TypeScript 導入〜実行までのメモ

導入

公式ドキュメント通り、npmコマンドでインストールする。 https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

$ npm install -g typescript

これで準備OK。

tsc コマンドで .ts → .js のコンパイルが可能になった。

これまで通り(Javascript)の書き方

関数 hello を宣言して呼んでいるだけ。

hello.ts

// 従来のやり方(javascript)
function hello(str) {
  console.log('Hello ' + str + ' !!');
}

hello('TypeScript');

コンパイルして、実行してみる。

$ tsc hello.ts
$ node hello.js

Hello TypeScript !!

もちろん、hello にnumberを渡しても怒られない。

hello.ts

// 従来のやり方(javascript)
function hello(str) {
  console.log('Hello ' + str + ' !!');
}

hello(50);

コンパイルして、実行してみる。

$ tsc hello.ts
$ node hello.js

Hello 50 !!

怒られない。

型を明記しなかった場合、暗黙的にany型になるようだ。

TypeScriptの書き方

今度はTypeScriptの書き方。

関数 hello を宣言して呼んでいるのは同じだが、

以下の2点を明記して宣言している。

• 引数 str はString型であること
• 返り値が存在しないこと(void)

hello.ts

// 静的型付けをしたやり方(TypeScript)
function hello(str: String): void {
  console.log('Hello ' + str + ' !!');
}

hello('TypeScript');

実行結果は変わらない。

$ tsc hello.ts
$ node hello.js

Hello TypeScript !!

ここで、hello に数値を渡してみると…

hello.ts

// 静的型付けをしたやり方(TypeScript)
function hello(str: String): void {
  console.log('Hello ' + str + ' !!');
}

hello(50);

エラーが発生し、コンパイルに失敗した。

$ tsc hello.ts 

hello.ts:5:7 - error TS2345: Argument of type '50' is not assignable to parameter of type 'String'.

5 hello(50);
        ~~


Found 1 error.

引数はString型だよって明記されているのにnumberを渡したからだ(そりゃそうじゃ)。

静的型付け言語となったJavasctiptで、心理的安全性を確保して実装しよう！

感想

CやJavaから入った人間なので、Javascriptの型制限が緩いことにややストレスがあった。

(規模の大きいプロジェクトになるとメンバーも多いのでその辺がガバガバになったりね……)

静的型付け言語だとコンパイル時にエラーを吐いてくれるので、

「そのまま本番環境に乗ってしまった！」

なんてこともないし安心よね。

そもそも単体試験で防げってツッコミはなしで…。

あ、TypeScriptでJestって使えるのかな…試してみなきゃ。