5 分で少し分かった気になる TypeScript 入門

TypeScript について簡単にまとめてみる。

TypeScript とは

Microsoft 社が開発した JavaScript に静的型付けを付与した言語。 JavaScript として実行するには TypeScript をコンパイル(トランスパイル) する。

TypeScript は基本的に JavaScript と同じような構文だが、微妙に違う。 JavaScript の構文は以下のような感じ。

'use strict';
function putStrNum(str, num) {
  console.log(str, num);
}

var str = 'hello world';
var num = 10;
putStrNum(str, num);

TypeScript は下記のように書ける。

'use strict';
function putStrNum(str: string, num: number): void {
  console.log(str, num);
}

var str: string = 'hello world';
var num: number = 10;
putStrNum(str, num);

TypeScript の方にはstring や number、void などの型が変数宣言、引数や戻り値として記述されている。

一見すると手間が増えてしまっただけのように見える。実際、型を定義していく作業は大変だったりする。*1

どうして我々には型が必要か

よく言われるのは静的チェックが可能だということ。

実際に TypeScript を Visual Studio Code など*2で記述していると引数として与える変数が違っていると下線を引いて警告を出してくれる。

さらには強力な補完機能も型定義があることによって実現されている。

下記の3行目のように自前の型 TestType を定義して、print という Function型を持っているオブジェクトだと定義しておけば、実際に test を TestType型だと宣言すると補完機能が使えるようになる。

これは test の型を明確に定義していない any などでは下図のように補完候補は表示されない。*3

これらは大規模なアプリーケーション開発においては極めて大きなメリットになる。実装作業やデバッグ作業が遥かに楽になることは間違いない。 もちろん小規模なアプリーケーションにおいても有効。

まとめ

• TypeScript は JavaScript に静的型付けを付与した言語

• 今回紹介した TypeScript の利点は下記の2つ

  • 静的型チェックによるバグの防止
  • 補完候補の表示による効率化

*1:ライブラリには型定義ファイルが提供されている事が多い

*2:もちろんプラグインを使えば vim や Atom などでも

*3:もし表示する方法があったら教えて欲しえてください…！