TypeScriptの型をおさらいしよう！

こんにちは。FEチームのMapleです。私たちのチームは、現在のシステムアーキテクチャを見直し、Reactを用いた新しいアーキテクチャへの移行を検討しています。
そこでTypeScriptを使用しているので、再確認をしようと思います！

はじめに

• TypeScriptはJavaScriptのスーパーセットで、静的型付けをできるようにします。
• コードの品質向上やバグの発見が容易になります。
• 型付けによる開発効率の向上や、予期しないエラーの防止について説明します。

1. TypeScriptの基本型

• プリミティブ型:
  • string, number, boolean, null, undefined, symbol, bigintの基本型を紹介します。

    let str: string = "Hello, TypeScript"; // string型の変数
    let num: number = 42; // number型の変数
    let bool: boolean = true; // boolean型の変数
    let arr: number[] = [1, 2, 3]; // number型の要素を持つ配列
    let tuple: [string, number] = ["hello", 42]; // string型とnumber型の要素を持つタプル
  
  

2. オブジェクトとインターフェース

• オブジェクト型:

    let person: { name: string; age: number } = {
      name: "John", // nameプロパティはstring型
      age: 30 // ageプロパティはnumber型
    };

• インターフェース:

    interface Person {
      name: string; // nameプロパティはstring型
      age: number; // ageプロパティはnumber型
    }
    
    let john: Person = { name: "John", age: 30 };
    // Personインターフェースに準拠したオブジェクト

3. 型エイリアスとユニオン型

• 型エイリアス:

    type Point = { x: number; y: number }; // Point型の定義
    
    let point: Point = { x: 10, y: 20 }; // Point型のオブジェクト

• ユニオン型と交差型:

    let id: number | string; // number型またはstring型を許容するユニオン型
    id = 10; // number型の値を代入
    id = "42"; // string型の値を代入
    
    type Animal = { name: string }; // Animal型の定義
    type Bear = Animal & { honey: boolean }; // Animal型とhoneyプロパティを持つ交差型
    
    let bear: Bear = { name: "Winnie", honey: true }; // Bear型のオブジェクト

4. 型ガードと型推論

• 型ガード:

    function isString(value: any): value is string {
      return typeof value === "string"; // valueがstring型かどうかをチェック
    }
    
    function example(value: string | number) {
      if (isString(value)) {
        console.log(value.toUpperCase()); // valueがstring型の場合
      } else {
        console.log(value.toFixed(2)); // valueがnumber型の場合
      }
    }

• 型推論:

    let inferredString = "This is inferred as a string"; // string型として推論される
    let inferredNumber = 42; // number型として推論される

5. ジェネリクス

• ジェネリクスの基本:

    function identity<T>(arg: T): T {
      return arg; // ジェネリック型Tを使用する関数
    }
    
    let output = identity<string>("Hello"); // Tがstring型の場合
    let output2 = identity<number>(42); // Tがnumber型の場合

• ジェネリック型の制約:

    function loggingIdentity<T extends { length: number }>(arg: T): T {
      console.log(arg.length); // lengthプロパティを持つT型
      return arg;
    }
    
    loggingIdentity("Hello"); // OK: string型はlengthプロパティを持つ
    // loggingIdentity(42); // Error: number型はlengthプロパティを持たない

6. 型のユーティリティ

• 組み込みユーティリティ型:

    interface Todo {
      title: string;
      description: string;
      completed: boolean;
    }
    
    type PartialTodo = Partial<Todo>; // Todo型の全プロパティがオプショナルになる
    type ReadonlyTodo = Readonly<Todo>; // Todo型の全プロパティが読み取り専用になる

まとめ

今回は型を解説しました。以上になります！