TypeScriptまとめ集
目次
以下の環境で記事を作成
- エディタは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は以下。
# 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.)を生成する。
$ tsc -d sample.ts
-h / --help
コンパイラの使用方法を表示する。
$ tsc -h
-m / --module
モジュール形式を指定する。
# CommonJS方式の場合
tsc -m commonjs main.ts
# AMD形式の場合
tsc -m amd main.ts
--noImplicitAny
暗黙のany型の宣言や式を警告する。
$ tsc --noImplicitAny sample.ts
--out
ソースファイルを連結して単一ファイルに出力する。
# sample1.tsとsample2.tsを連結して、sample.jsを出力する
$ tsc sample.js sample1.ts sample2.ts
--outDir
出力先のディレクトリを指定する。
# resultフォルダに出力する
$ tsc --outDir result
--removeComments
コメントを出力する。
$ tsc --removeComments sample.ts
-t / --target
ECMAScriptのバージョンを指定する。
$ tsc -t ES5 sample.ts
-v / --version
コンパイラのバージョン番号を表示する。
$ tsc -v
-w / --watch
入力ファイルを監視して自動コンパイルする。
$ tsc -w sample.ts
@
ファイルからコンパイラオプションを読み込む。
# 以下のようなテキストファイル(build.txt)があった場合
--out result.js sample.ts
# テキストファイルの内容でコンパイルする
tsc @build.txt
--sourcemap
.mapファイルを出力する
--sourceRoot
デバッガが参照する.tsファイルの場所を指定する。
--mapRoot
デバッガが参照する.mapファイルの場所を指定する。