TypeScriptでゼロからヒーローへ
TypeScriptはJavaScriptコードをより安全にします。コードを実行する前にバグを見つけるのに役立ちます。このガイドでは、基礎から応用までの概念を解説します。
TypeScriptはJavaScriptに静的型付けを追加します。コードはブラウザで実行可能なプレーンなJavaScriptに変換されます。
基本的な型
- number: 整数または小数
- boolean: true または false
- string: テキスト
- symbol: 一意の識別子
- bigint: 大きな整数
型注釈 変数作成時に型を定義します: let name: string = "Alice"; let age: number = 30;
配列とオブジェクト
- 配列: let fruits: string[] = ["apple", "banana"];
- オブジェクト: let user: { name: string; age: number } = { name: "Bob", age: 25 };
関数 関数の引数と戻り値を指定できます。関数が何も返さない場合は void を使用します。 function greet(name: string): string { return "Hello, " + name; }
高度な構造
- Type Aliases（型エイリアス）: 型にカスタム名を定義します。
- Interfaces（インターフェース）: オブジェクトの形状を定義します。
- Enums（列挙型）: 名前付き定数のセットを作成します。
- Tuples（タプル）: 要素数と型が固定された配列を作成します。
複雑なロジック
- Union Types（共用体型）: 変数が複数の型を持つことを許可します。
- Intersection Types（交差型）: 複数の型を1つに結合します。
- Generics（ジェネリクス）: 多くの型に対応できる再利用可能なコンポーネントを作成します。
- Utility Types（ユーティリティ型）: Partial や Pick などの組み込みツールを使用して型を変更します。
ベストプラクティス
- 単純なエイリアスやプリミティブ型には type を使用します。
- オブジェクトの形状には interface を使用します。
- any の使用は避けてください。TypeScriptの安全性が失われます。
- 型が不明な場合は、any の代わりに unknown を使用します。
- コードが明快な場合は、コンパイラに型推論を任せます。
TypeScriptを使えば、自信を持って大規模なアプリケーションを構築できます。
出典: https://dev.to/miasalazar/from-zero-to-hero-in-typescript-425j