Edited at

TypeScriptってなんぞ(小並感


ゴール


  1. TypeScriptが何かをふわっと理解する

  2. TypeScriptをわかった気になる


TypeScript is 何?


TypeScript の言語仕様では、TypeScript を「JavaScript の糖衣構文」と表現しています。この表現は真実で、おそらくこの表現があるから、この言語の対象ユーザー、つまり現在 JavaScript を使っているクライアント側の開発者がこの言語を手に取る重要な一歩になります。


https://msdn.microsoft.com/ja-jp/magazine/dn890374.aspx


MSDNより。

要するにJavascriptの糖衣構文ってことですね。その後ろは「Javascriptユーザが触る言語として糖衣構文ってのは重要だ」ってことだと思います。多分。

糖衣構文なのか言語なのか...糖衣構文でもあるし言語でもある、と表現するのが正しいのかもしれませんね。下位互換なら任せろのMicrosoftなのでTypeScriptはPythonみたいに下位をバッサリってことは無いんじゃないかなって思ってます。

糖衣構文とは書いてありましたが、もうちょっと砕いて見ていくとNative Javascript(ECMAScript)に「静的型付け」「Null安全」「型推論」を加えた言語、と捉えるのがベターかと思います。最近流行ってる言語、Kotlin、Swift、GoもNull安全・静的型付け・型推論を備えてますね。TypeScriptも漏れずです。

先に書いた通り、Javascriptとの違いは「静的型付け」「Null安全」「型推論」だけです。それだけです。

書き方はJavascriptとそこまで変わりません。Javascriptを「より安全」に「より効率良く」書けるようにした言語がTypeScriptです。これはJavascriptに取って非常に重要なメリットになります。


軽くまとめ


  • Javascriptに「静的型付け」「Null安全」「型推論」を加えた言語

  • Javascriptをより安全により効率よく書ける言語


TypeScript PlayGround

https://www.typescriptlang.org/play/


TypeScriptにおける静的型付け/ Null安全

TypeScript

let num: number = 1;

console.log(num);

// Type 'true' is not assignable to type 'number'.
num = true;

// Type '"hoge"' is not assignable to type 'number'.
num = 'hoge';

// Type 'null' is not assignable to type 'number'.
num = null;

Javascript(コンパイル後)


※通常はコンパイル時にエラーになるのでコンパイルに失敗します。

var num = 1;

console.log(num);
num = true;
num = 'hoge';
num = null;

このようにJavascriptでは型付けできずにバグの元になったり、無駄にテストケースが増えるといった事象を防げます。TDDで進めたとしてもコストは下がるのではないでしょうか。


ちなみにnullの代入はtsconfig.jsonのstrictNullChecksをOFFにすることで可能になります。ただしstrictNullChecksは特別な理由が無い限りはOFFにすべきではありません。nullを許容したい場合は以下のように回避すべきです。

TypeScript(ユニオン型 / 共用型)

let num: number | null = 1;

console.log(num);

num = null;

console.log(num);

strictNullChecksをOFFにしたら負け。ユニオン型も敗北一歩手前。


TypeScriptにおける型推論

TypeScript

let i = 1

console.log(typeof i);

// Type '"hoge"' is not assignable to type 'number'.
i = 'hoge';

let s = 'hoge';
console.log(typeof s);

// Type '1' is not assignable to type 'string'.
s = 1;

GoやKotlinと同じように型推論されており、見事にその期待通りの動きをしてくれています。


最後に

大分端折った感ある。