TypeScript　まとめ４（インストール〜コンパイル方法）

## TypeScriptまとめ集
1. [型について](https://qiita.com/hiro-hiro/items/f2dc671f48e2599e923b)
1. [ユーティリティ型](https://qiita.com/hiro-hiro/items/0f0201a8a49db06e0032)
1. [モジュール化](https://qiita.com/hiro-hiro/items/9879a297cf5b30c474e2)
1. [インストール〜コンパイル方法](https://qiita.com/hiro-hiro/items/52108807c0594798e1c3)

## 目次
1. [TypeScriptのインストール〜コンパイル](#1typescriptのインストールコンパイル) 
1. [外部ライブラリの使用](#2外部ライブラリの使用)
1. [コンパイラオプション](#3コンパイラオプション)

## 以下の環境で記事を作成
* エディタはVisual Studio Code
* Node.jsはインストール済み
* npmプロジェクトにて実行。
* TypeScript バージョン4.2.2

## 1.TypeScriptのインストール〜コンパイル

### 1.npmプロジェクトを作成する。

以下のコマンドをターミナルにて実行する。

```zsh
# npmプロジェクトを作成
$ npm init

# package.jsonの設定が既定のままでもいい場合はこちら
$ npm init -y
```

### 2.TypeScriptをインストールする

以下のコマンドをターミナルにて実行する。
※個人間で設定が違うことがないように、基本はローカルインストールをすること。

```zsh
# TypeScriptをインストールする
$ npm install -S typescript

# もしくはこちらの書き方
$ npm install --save typescript
```

-S, --saveをつけることで、package.json内のdependenciesにパッケージ情報が記録される。
npm installを実行すると、記録したパッケージ情報に基づいて、node_modules内にパッケージがインストールされる。

### 3.コンパイル時の設定を記録する。

以下のコマンドをターミナルにて実行する。

```zsh
# ts.configファイルを作成する
$ tsc --init
```

**※ts.configの中身は、下の方で紹介。**

### 4.tsファイルを作成、コンパイルしてjsファイルを作成する。

コンパイルは、以下のコマンドにて実行できる。
これにより、同フォルダにてsample.jsが作成される。(sample.tsが対象)

```zsh
# コンパイル(sample.tsを対象)
$ tsc sample.ts
```

複数ファイルをコンパイルしたい場合は、

```zsh
# 複数ファイルをコンパイル
$ tsc sample1.ts sample2.ts sample3.ts
```

全ファイルをコンパイルしたい場合は、

```zsh
# 全ファイルをコンパイル
$ tsc
```

**コンパイルオプションについては下の方で紹介。**

## 2.外部ライブラリの使用
jQueryやChart.jsといったJavaScriptライブラリをTypeScriptでも使いたい場合。

### 1.型定義ファイルをインストールする。
以下のコマンドを実行する。

```zsh
# 以下のコマンドで型定義ファイルとHTML内に埋め込むスクリプトファイルをインストールできる(jQueryとChart.js)
$ npm install --save jquery @types/jquery
$ npm install --save chart.js @types/chart.js

# 型定義ファイル(@typesフォルダに格納される)だけをインストールしたい場合
$ npm install --save @types/jquery
$ npm install --save @types/chart.js
```

上記を実行することで、@typesフォルダが作成され、中に型定義ファイルが作成される。
ファイル名は「〜.d.ts」といった形で作成される。（index.d.tsという名前が基本）
インストール後のpackage.jsonは以下。

```zsh:package.jsonの中
# dependenciesに記録される
{
  "name": "sample-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/chart.js": "^2.9.32",
    "@types/jquery": "^3.5.5",
    "chart.js": "^3.1.1",
    "jquery": "^3.6.0",
    "typescript": "^4.2.4"
  }
}
```

### 2.外部ライブラリをインポート
外部ライブラリをtsファイル内でインポートして、各ライブラリで使用される変数を使用できるようにする。
基本的にindex.d.ts内に、インポートできるクラスやインターフェイスが定義されているため、それをインポートする。
※jQueryはインポートしなくても使用できるようになっていた。

```typescript
import { Chart } from 'chart.js';

const canvas = document.querySelector('.my-chart')! as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;

const data:any = {/*省略*/};
const options = {/*省略*/};

//new Chartでエラーが出なくなる
const myRadarChart = new Chart(ctx, {type: 'radar',options,data,});
```


## 3.コンパイラオプション

コンパイルコマンドを入力する際に、オプションをつけることで色々できる。

### -d / --declaration
宣言ソースファイル(d.ts.)を生成する。

```zsh:-d/--declaration
$ tsc -d sample.ts
```
### -h / --help
コンパイラの使用方法を表示する。

```zsh:-h/--help
$ tsc -h
```

### -m / --module
モジュール形式を指定する。

```zsh:-m/--module
# CommonJS方式の場合
tsc -m commonjs main.ts

# AMD形式の場合
tsc -m amd main.ts
```

### --noImplicitAny
暗黙のany型の宣言や式を警告する。

```zsh:--noImplicitAny
$ tsc --noImplicitAny sample.ts
```

### --out
ソースファイルを連結して単一ファイルに出力する。

```zsh:--out
# sample1.tsとsample2.tsを連結して、sample.jsを出力する
$ tsc sample.js sample1.ts sample2.ts
```
### --outDir
出力先のディレクトリを指定する。

```zsh:--outDir
# resultフォルダに出力する
$ tsc --outDir result
```

### --removeComments
コメントを出力する。

```zsh:--removeComments
$ tsc --removeComments sample.ts
```

### -t / --target
ECMAScriptのバージョンを指定する。

```zsh:-t/--target
$ tsc -t ES5 sample.ts
```

### -v / --version
コンパイラのバージョン番号を表示する。

```zsh:-v/--version
$ tsc -v
```

### -w / --watch
入力ファイルを監視して自動コンパイルする。

```zsh:-w/--watch
$ tsc -w sample.ts
```

### @
ファイルからコンパイラオプションを読み込む。

```zsh:@
# 以下のようなテキストファイル(build.txt)があった場合
--out result.js sample.ts

# テキストファイルの内容でコンパイルする
tsc @build.txt
```

### --sourcemap
.mapファイルを出力する

### --sourceRoot
デバッガが参照する.tsファイルの場所を指定する。

### --mapRoot
デバッガが参照する.mapファイルの場所を指定する。