TypeScriptの環境構築

参考

環境構築コマンド

• $ npm init -y
• $ npm install —-save-dev typescript
• $ npm install —-save-dev @types/node
• $ npx tsc —-init
• $ npx tsc [—-watch]
• $ npx tsc —-showConfig

備考

• package.json内の”scripts”で指定するコマンドは、ローカルパッケージ(node_modules)に実行コマンドが存在しても$ npxを先頭につける必要はない.

tsconfig.json

• “type”: “module”の指定で、ライブラリインポート時に*.ts, *.js拡張子を指定せずにESModuleとして扱える. この際、CommonJS(require)は使えない.
• ESModule設定下でCommonJS形式のライブラリをインポートするには、*.cts拡張子で保存する必要がある.
• “module”: “esnext”や“nodenext”の指定かつpakcage.jsonで”type”: “module”と指定すると, ESModuleとしてソースコードが定義される. デフォルトは,”commonjs”.

備考

• Node.jsの場合, package.jsonで”type”: “module”が指定されていれば、ソースコードをモジュールとして扱う。この設定に関わらず、*.cjsはスクリプト. *.mjsはモジュールとして扱われる.
• TSの場合, ソースコードの中にimportやexportがあると自動でモジュールとして認識される. (そうでない場合、スクリプトとして認識される)

TS/JSのスクリプトとモジュール

• HTMLのscript要素でJSをLoadする際にtype=“module”でモジュールとして扱われ、無指定でスクリプトと認識される. スクリプトの中でimportやexportを記述するとエラーになる.

”target”属性

• どのJSにコンパイルするかを指定する

| version | 説明 | | :—- | :—- | | es3 | 旧JS | | es5 | 旧JS | | es6/es2015 | モダンJSの初期バージョン | | es2016 | - | | es2017 | - | | es2018 | - | | es2019 | - | | es2020 | - | | es2021 | - | | es2022 | - | | es2023 | - | | esnext | - |

“module”属性

• モジュールの扱い方

| version | 説明 | | :—- | :—- | | none | - | | CommonJS | - | | amd | - | | umd | - | | es6/es2015 | - | | es2020 | - | | es2022 | - | | esnext | - | | esnode | - | | nodenext | - | | system | - |

“moduleResolution”属性

• モジュールの解決方法を指定
• npmでインストールしたモジュールをTSで認識できるようにするオプション

| オプション | 説明 | | :—- | :—- | | classic | - | | node10 | - | | node16 | - | | nodenext | - | | builder | - |

“outDir”属性

• *.jsファイルの出力先

“forceConsistentConfigInFileNames”属性

• boolean設定
• trueにするとインクルードするファイル名の大小を区別する

“skipLibCheck”属性

• 型定義ファイルのチェックをスキップしてコンパイル時間を短縮する

“include”属性

• プログラムに含めるファイル名またはパターンリストを配列形式で指定する.
• tsconfig.jsonからの相対パスで指定する.

“exclude”属性

• プログラムから除外するファイル名またはパターンリストを配列形式で指定する.
• tsconfig.jsonからの相対パスで指定する.

includeとexcludeでコンパイル対象を決める

“include”: [ “src/**/*.ts”, “src/**/*.tsx” ]
“exclude”: [ “foo/bar/**/*.ts” ]

“allowJS”属性

• *.js, *.jsxをコンパイル対象に含めるか否か

“lib”属性

• TSにはJS-APIやBrowser-API(Web-API)がデフォルトで組み込まれている.
• ビルドインのAPIを使用する設定

“listFiles”属性

• コンパイルされるファイル名を出力する

“explainFiles”属性

• コンパイルの詳細を出力

Strict設定

• “strict”: true で下記8つのオプションが全て有効になる

オプション	説明
alwaysStrict	-
strictNullChecks	-
strictBindCallApply	-
strictFunctionTypes	-
strictPropertyInitialization	-
noImplicitAny	-
noImplicitThis	-
useUnkownInCatchVeriables	-

型定義ファイルlib.d.ts

• TypeScriptをインストールしたときに付属する型定義ファイル
• JS-API, Brower-API(Web-API), DOM-APIなどの型定義が含まれている.
• node_modules/typescript/lib/lib.d.ts
• 他にも複数の型定義ファイルがある