TypeScriptの基本から応用まで - プログラミングの要点を押さえて理解しよう

免責事項

この記事は私がメモを整理していた際にChatGPTに文章として整形してもらったらいい感じにまとまったのでそのまま張り付けたものです。ほんとChatGPTは何でもやってくれますね。便利。

JavaScriptからTypeScriptへの移行

JavaScriptのコードをTypeScriptに移行する際は、ファイルの拡張子を.tsに変更します。
TypeScriptコンパイラは、型の問題を検出して教えてくれます。これにより、コードの品質向上が期待できます。

TypeScriptの型システム

型の基本概念がTypeScriptの中心です。変数や関数に型を付けることで、コード内のデータ形式を指定します。
型注釈を追加することで、コンパイラはより細かいチェックを行ってくれます。
TypeScriptの型システムにより、コンパイラが生成したJavaScriptコードをデプロイして利用できます。

プリミティブ型と変数宣言

JavaScriptの変数宣言にはletとconstがあります。letは再代入可能で、constは再代入不可です。基本的にはconstを使用することを推奨します。
プリミティブ型はイミュータブルであり、プロパティを持ちません。しかし、オートボクシングによりプリミティブをオブジェクトのように扱えます。
プリミティブ型にはboolean、number、string、undefined、null、symbol、bigintがあり、その他はすべてオブジェクトです。

undefinedとnullの適切な扱い方

undefinedとnullの両方が「値がない」ことを意味するため、片方を選ぶことを推奨します。undefinedに寄せることが現実的です。
変数宣言で初期値をnullにする場合は容易ですが、存在しないオブジェクトプロパティや配列要素にアクセスする際にnullを返すようにすることは難しい場合があります。

型変換とボックス化

JavaScriptでは、異なる型の値を演算すると暗黙的に型変換が行われる「型強制」があります。
プリミティブ型をオブジェクトのように扱う「オートボクシング」があり、これにより柔軟な操作が可能です。
TypeScriptでは、ラッパーオブジェクトよりもプリミティブ型で型注釈する方が望ましいです。

any型と型注釈

any型はどんな型でも代入でき、型チェックが行われません。型推論できない変数は暗黙的にany型になります。
any型は使い方によっては便利ですが、型安全性が低下する可能性があるため、注意が必要です。

オブジェクトと型注釈

TypeScriptでオブジェクトを型注釈する際は、プロパティごとに型を定義します。変数にオブジェクトを代入すると型推論が効きます。
安全性を考慮して、object型の使用は避けるべきです。代わりに{}型やカスタムなインターフェースを使用しましょう。

オプショナルチェーンとオブジェクトループ

オプショナルチェーン(?.)は、安全にプロパティを参照する方法です。値がnullかundefinedの場合、undefinedが返されます。
TypeScriptでは、オプショナルチェーンを使用すると、値の型とundefinedのユニオン型になります。
オブジェクトのプロパティをループするための方法として、for-in文やfor-of文 + Object.entries()などがあります。

配列のループと静的フィールド

配列をループするための方法として、for文、for-of文、配列のメソッド(forEachやmap)があります。
静的フィールドはインスタンスを生成せずに利用できる変数であり、JavaScriptやTypeScriptで利用されます。

まとめ

TypeScriptは、JavaScriptの拡張として型システムを提供し、コードの品質向上や開発効率の向上に役立ちます。基本的な型の概念から始め、プリミティブ型、型注釈、オブジェクト操作、ループなどのテクニックをマスターしましょう。これにより、より堅牢で保守性の高いコードを実現できます。