本投稿の目的

TypeScriptの良さをしっかりと理解したい。
やんわり理解していたJavaScriptではなく、TypeScriptを使う理由を改めて考えてみます。

ターゲット

TypeScriptを使うことを悩んでいる人
TypeScriptを使い始めたばかりの人
TypeScriptをなんとなく使っている人

TypeScriptとは

マイクロソフトが開発したオープンソース言語です。
簡潔に表現するなら、「静的型定義が可能なJavaScript」です。

TypeScriptで書かれたコードはJavaScriptに変換してから使用します。
このような言語の総称をAlternative JavaScript(AltJS)と呼び、その他にはCoffeeScriptが有名です。

なぜそのままJSで書かないのか

主に以下のような問題が発生する可能性があるからだと思います。

動的型付けによるバグの発生
型の定義ができないので、意図しない値が入る可能性がある
コンパイル時の型チェック機能がないので、意図しない値が入る可能性がある
null safetyではないので、意図しないnullやundefinedが入る可能性がある

TypeScriptの特徴

JavaScriptの上位互換であること

すべての有効なJavaScriptのコードはTypeScriptで動作します。
TypeScriptはJavaScriptのスーパーセット(上位互換)なのです。

簡単に言うと、JavaScriptで出来ていたことはすべてTypeScriptでも出来ます。
JavaScriptで出来なかった機能を拡張した言語がTypeScriptというわけです。

下記はJavaScriptのコードです。

const sample = 'Hello World!';
console.log(sample);

次のコードはTypeScriptのコードです。

const sample = 'Hello World!';
console.log(sample);

全く同じように書くことができます。
(コードによっては型チェックエラーが発生する可能性がありますけども、、、)

つまり、JavaScriptの使用経験があれば、TypeScriptの学習コストは低いです。

型定義が使えること

型定義による恩恵は言わずもがなですが、予期しないバグの少ないシステムが開発できることや他者が記述したコードの可読性が高まります。

上記の恩恵からも理解できるように特に大規模なシステム開発を行う場合に恩恵が大きいです。

型定義の例を以下に記述します。

// プリミティブ型
const fruitName: string = 'pear';

// オブジェクト型
const product: { id: number; name: string; price: number } = {
    id: 1,
    name: 'pear',
    price: 10000,
};

// 関数式
function getPrice(id: number): number {
    // 必要な処理
    return 10000;
}

const getPrice = (id: number): number => {
    // 必要な処理
    return 10000;
}

// リテラル型
const fruitName: 'pear' = pear;

// 配列型
const fruitNames: string[] = ['pear', 'apple', 'peach'];

その他にも様々な型定義が存在するので、ご興味がある方は非常にわかりやすいこちらの記事をご参照ください。
TypeScriptの型入門

また、TypeScriptには型推論という仕組みがあります。
明示的に型指定しなくても自動的に型を判別するので、プログラム実行前にエラーを発見することができます。
つまり、今まで使っていたJavaScriptと同じ書き方をしても型チェックの恩恵を得られます。

nullやundefinedによるエラー回避

'Uncaught TypeError: Cannot read property 'propertyName' of undefined'

JavaScriptを使っていれば、一度は目にしたことがあるでしょう。
nullやundefinedの安全性がないJavaScriptでは実行時エラーが発生する可能性があります。

TypeScriptでは回避できるのか、というとデフォルトでは回避できません。
デフォルトの仕様としてTypeScriptもnullやundefinedをすべての型に代入できます。

ただし、TypeScriptではtsconfig.jsonで'strictNullChecks'を有効にすると、実行前にエラーを発見することができるようになります。

結論

TypeScriptは型定義による恩恵が最大の特徴だと思います。
小規模な開発であれば、型定義の恩恵は少なくなるとは思いますが、エラーの少ないシステムを開発する上で型定義は非常に有用だと感じました。

今後もTypeScriptを使用していく上で感じたメリットは追記していきます。

参考サイト

TypeScript公式
 TypeScriptの型入門 - Qiita
TypeScript: "strictNullChecks"について - Qiita