🔥

TypeScriptの勉強 1 ~導入から実行まで~

2022/02/21に公開

TypeScript

tech

初めに

TypeScript を勉強する際のメモという形で残していきます。

勉強している本の詳細まで書くつもりはないので、本格的に勉強したい人は購入をおすすめします。

TypeScript の導入

mkdirやcdコマンドなどで使用したいフォルダに移動してから以下のコマンドを実行します。

npm init
npm install --save-dev typescript tslint @types/node

モジュール名	説明
`typescript`	TypeScript
`tslint`	TypeScript の機能エラーチェック等を行う静的分析ツール
`@types/node`	Node.js のライブラリなどに型情報を付与する

TypeScript の設定

使用するフォルダのルートディレクトリに tsconfig.json を置きます。

例として以下のような設定が挙げられます。

{
  "compilerOptions": {
    "lib": ["ES2015"],
    "module": "CommonJS",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "ES2015"
  },
  "include": ["src"]
}

オプション	説明
`compilerOptions`	コンパイル（コンパイラ）のオプション
`include`	TS ファイルをコンパイルするフォルダ
`lib`	JS の実行環境にどんな API（ES2015 の `Object.assign`, DOM の `document.querySelector` 等）があるか
`module`	どのモジュールシステム（CommonJS, ES2015 とか）にコンパイルするか
`outDir`	生成された JS ファイルをどのフォルダに格納するか
`sourceMap`	ソースマップ（`.js.map`, `.jsx.map`）を一緒に出力するか
`strict`	不正なコードを厳格にチェックするか有効にすると、全てのコードを適切に型付けするように強制される
`target`	TS をどの JS バージョン（ES3, ES5, ES2015 など）にコンパイルするか

詳しい説明は以下のリンクを参照してください。

https://www.typescriptlang.org/tsconfig

TSLint の設定

TSLint の設定はtslint.jsonに記述します。

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "rules": {
    "semicolon": false,
    "trailing-comma": false
  }
}

詳しいルールについては以下のリンクを参照してください。

実行

以下のような適当な TypeScript ファイルを用意します。

src/index.ts

console.log("Hello, TypeScript !");

ターミナルで TypeScript ファイルをコンパイルして、

./node_modules/.bin/tsc

Node.js で実行します。

node ./dist/index.js

実行出来れば以下の通りになります。

$ node ./dist/index.js
Hello, TypeScript !

もし、スクリプトが実行できない場合は、以下の対処法が参考になれば幸いです。

Window10(11)時のトラブル「このシステムではスクリプトの実行が無効に…」

TypeScript をコンパイルするために、

./node_modules/.bin/tsc

を実行すると、以下のようなエラーが出ました。なにやら、スクリプトが無効とか書いてあります。

$ ./node_modules/.bin/tsc

./node_modules/.bin/tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\*****\ts\node_modules\.bin\tsc.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ ./node_modules/.bin/tsc
+ ~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

「./node_modules/.bin/tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\*****\ts\node_modules.bin\tsc.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。」

初期状態では、PowerShell のスクリプトの実行が実行ポリシーによって許可されていないため、エラーが発生します。

解決策としては、管理者として PowerShell を開き、以下のコマンドを実行します。

PowerShell Set-ExecutionPolicy RemoteSigned

その後、先ほどのターミナルで同じコマンドを実行すると、コンパイル出来ます。

./node_modules/.bin/tsc

実行ポリシーを初期状態に戻すには管理者として PowerShell を開き、以下のコマンドを実行します。

PowerShell Set-ExecutionPolicy Restricted

https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750

実行環境の整備

tsc

グローバルに TypeScript をインストールすると、tscコマンドで簡単にビルドできます。

npm install typescript --save -g

--buildオプションでコンパイル、

tsc --build

--build --cleanオプションでビルドファイルの削除が出来ます。

tsc --build --clean

ts-node

ts-nodeを使ってコンパイルと実行を行うことが出来ます。

npm install ts-node

インストールが完了したら、以下のような一行のコマンドで実行出来ます。

./node_modules/.bin/ts-node src/index.ts