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

TypeScriptまとめ集

1. 型について
2. ユーティリティ型
3. モジュール化
4. インストール〜コンパイル方法

目次

1. TypeScriptのインストール〜コンパイル
2. 外部ライブラリの使用
3. コンパイラオプション

以下の環境で記事を作成

• エディタはVisual Studio Code
• Node.jsはインストール済み
• npmプロジェクトにて実行。
• TypeScript バージョン4.2.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.外部ライブラリの使用

jQueryやChart.jsといったJavaScriptライブラリをTypeScriptでも使いたい場合。

1.型定義ファイルをインストールする。

以下のコマンドを実行する。

# 以下のコマンドで型定義ファイルと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は以下。

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はインポートしなくても使用できるようになっていた。

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.)を生成する。

-d/--declaration

$ tsc -d sample.ts

-h / --help

コンパイラの使用方法を表示する。

-h/--help

$ tsc -h

-m / --module

モジュール形式を指定する。

-m/--module

# CommonJS方式の場合
tsc -m commonjs main.ts

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

--noImplicitAny

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

--noImplicitAny

$ tsc --noImplicitAny sample.ts

--out

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

--out

# sample1.tsとsample2.tsを連結して、sample.jsを出力する
$ tsc sample.js sample1.ts sample2.ts

--outDir

出力先のディレクトリを指定する。

--outDir

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

--removeComments

コメントを出力する。

--removeComments

$ tsc --removeComments sample.ts

-t / --target

ECMAScriptのバージョンを指定する。

-t/--target

$ tsc -t ES5 sample.ts

-v / --version

コンパイラのバージョン番号を表示する。

-v/--version

$ tsc -v

-w / --watch

入力ファイルを監視して自動コンパイルする。

-w/--watch

$ tsc -w sample.ts

@

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

@

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

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

--sourcemap

.mapファイルを出力する

--sourceRoot

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

--mapRoot

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