TypeScriptのタイプについて知る必要があるすべて

TypeScript: JavaScript での静的型付けの初心者ガイド

JavaScript の柔軟性は諸刃の剣です。これにより、迅速なプロトタイピングと使いやすさが可能になりますが、その動的な性質により、デバッグが困難なランタイム エラーが発生する可能性があります。 JavaScript のスーパーセットである TypeScript は、静的型付けを追加することでこの問題を解決します。このガイドでは、TypeScript の型システムを紹介し、その利点と効果的な使用方法を説明します。

型について

プログラミングでは、type は変数が保持できるデータの種類を指定します。 JavaScript の動的型付けは、変数の型を自由に変更できることを意味します。

<code class="language-javascript">let value = 42; // Number
value = "Hello"; // String</code>

この柔軟性は便利ですが、予期せぬ問題を引き起こす可能性があります。 TypeScript の静的型付けでは、このようなエラーを防ぐために変数の型を宣言する必要があります。

<code class="language-typescript">let value: number = 42;
value = "Hello"; // Error: Type 'string' is not assignable to type 'number'</code>

型の重要性

静的型付けには大きな利点があります:

• 早期エラー検出: 実行時ではなく、コンパイル中にエラーを検出します。
• 強化されたツール: IDE でのオートコンプリートとリファクタリングの改善によるメリットを活用します。
• コードの読みやすさの向上: 型は組み込みのドキュメントとして機能します。
• スケーラビリティ: 大規模なプロジェクトをより効率的に管理します。

TypeScript の基本的な型

核となる TypeScript 型を見てみましょう:

1. 数値: 数値を表します:

   <code class="language-typescript">let age: number = 25;
   let pi: number = 3.14;</code>

2. 文字列: テキストの場合:

   <code class="language-typescript">let name: string = "Alice";
   let message: string = `Hello, ${name}`;</code>

3. ブール値: 真/偽値:

   <code class="language-typescript">let isActive: boolean = true;</code>

4. 配列: 項目のコレクション:

   <code class="language-typescript">let numbers: number[] = [1, 2, 3];
   let names: string[] = ["Alice", "Bob"];</code>

   またはジェネリックを使用する場合:

   <code class="language-typescript">let values: Array<number> = [10, 20, 30];</code>

5. タプル: 固定長と型の配列:

   <code class="language-typescript">let tuple: [string, number] = ["Alice", 25];</code>

6. 列挙型: 名前付き定数を定義します:

   <code class="language-typescript">enum Direction {
     Up,
     Down,
     Left,
     Right
   }
   let move: Direction = Direction.Up;</code>

7. 任意: ワイルドカード タイプ (慎重に使用してください!):

   <code class="language-typescript">let random: any = 42;
   random = "Hello";</code>

8. Void: 戻り値のない関数の場合:

   <code class="language-typescript">function logMessage(message: string): void {
     console.log(message);
   }</code>

9. Null および未定義: null または未定義を明示的に表します:

   <code class="language-typescript">let empty: null = null;
   let notAssigned: undefined = undefined;</code>

10. Never: 決して発生しない型 (例: 常にエラーをスローする関数):

    <code class="language-typescript"> function alwaysThrows(): never {
       throw new Error("This always throws!");
     }</code>

高度な TypeScript タイプ

TypeScript は、複雑なシナリオ向けに、より高度な型を提供します。

• ユニオンタイプ：変数が複数のタイプを保持することを許可します：let id: number | string;
• 交差点タイプ：複数のタイプを組み合わせる：type Staff = Person & Employee;
• タイプエイリアス：カスタムタイプ名を作成：type Point = { x: number; y: number; };
• インターフェイス：オブジェクトの形状を定義します：interface User { id: number; name: string; }
• リテラルタイプ：変数を特定の値に制限します：let direction: "up" | "down";
• タイプアサーション：タイプを明示的に指定してください：let input = <HTMLInputElement>document.getElementById("input");

初心者向けの実用的なヒント

• 。tsc --initを使用して既存のJavaScriptプロジェクトにタイプスクリプトを追加することから始めます
ベストプラクティスには
• コンパイラオプションを使用します strict徐々にCodeBaseにタイプを導入します
タイプスクリプトサポートのためにvsコードのような優れたIDEを利用してください。
結論
• anyTypeScriptのタイプシステムにより、コードの品質と保守性が大幅に向上します。タイプをマスターすることで、より堅牢でスケーラブルなアプリケーションを書き込みます。 静的タイピングの力を受け入れ、開発ワークフローを強化します！

以上がTypeScriptのタイプについて知る必要があるすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。