すべての開発者が知っておくべき高度な TypeScript の概念

TypeScript は、開発エクスペリエンスを向上させるために静的型付けやその他の機能を追加する JavaScript の強力なスーパーセットです。多くの開発者は基本を熟知していますが、高度な TypeScript の概念を習得すると、堅牢で保守可能でスケーラブルなコードを作成する能力が大幅に向上します。ここでは、すべての開発者が知っておくべき 10 の高度な TypeScript 概念を紹介します。

1. ユニオンの種類

共用体型では、変数が複数の型のうちの 1 つを保持できるため、型の安全性を保ちながら、さまざまなデータ型を柔軟に処理できます。さまざまなタスクを処理できるマルチツール ?️ を持っているようなものです。

Example 1:

let value: string | number;

value = "Hello";
console.log(value); // "Hello"

value = 123;
console.log(value); // 123


Example 2:
type status = "review" | "published" | "expired";

function getJobStatus(status: status): string {
  switch (status) {
    case "review":
      return "Job is on Review";
    case "published":
      return "Job is Published";
    case "expired":
      return "Job is Expired";
    default:
      return "Unknown status";
  }
}

2. 交差点の種類

交差型は複数の型を 1 つに結合するため、変数には結合された型のすべてのプロパティが必要です。

interface Person {
  name: string;
  age: number;
}

interface Employee {
  employeeId: number;
}

type Developer = Person & Employee;

const emp: Developer = {
  name: "Alice",
  age: 25,
  employeeId: 12345
};

console.log(emp);

この例では、Person と Employee の 2 つの型を定義し、次に交差を使用して Employee と Person の両方のプロパティを結合する Developer 型を作成しました。これは、組織内での開発者のアイデンティティと役割を表します。

3. タイプガード

型ガードは、条件ブロック内の変数の型を絞り込み、型の安全性を確保するのに役立ちます。彼らを警備員と考えてください。ナイトクラブでは、適切なタイプのみを許可します。

例

function isString(value: any): value is string {
  return typeof value === "string";
}

function printValue(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed());
  }
}

printValue("Hello"); // "HELLO"
printValue(123); // "123"

タイプガード: 私たちは皆、生活の中で少しの安全を必要としているからです。

4. 条件付きタイプ

条件型を使用すると、条件に基づいて型を作成でき、強力な型変換が可能になります。自分で選ぶ冒険の本のようなものですか?.

例

type IsString<T> = T extends string ? "Yes" : "No";

type Result1 = IsString<string>; // "Yes"
type Result2 = IsString<number>; // "No"

条件型は非常に強力で、条件に基づいて動的で柔軟な型を作成できます。

5. マップされた型

マップされた型を使用すると、各プロパティに変換を適用することで、既存の型を新しい型に変換できます。

例

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface Todo {
  title: string;
  description: string;
}

const todo: Readonly<Todo> = {
  title: "Learn TypeScript",
  description: "Study advanced concepts"
};

// todo.title = "New Title"; // Error: Cannot assign to 'title' because it is a read-only property.


type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

interface User {
  id: number;
  name: string;
  email: string;
}

type NullableUser = Nullable<User>;

type NullableUser = {
  id: number | null;
  name: string | null;
  email: string | null;
};

// In this example, Nullable transforms each property of User to also accept null.

6. テンプレートのリテラル型

テンプレート リテラル型を使用すると、文字列リテラルを組み合わせて型を作成できるため、型定義がより表現力豊かになります。

例

type Color = "red" | "green" | "blue";
type Brightness = "light" | "dark";

type Theme = `${Brightness}-${Color}`;

const theme1: Theme = "light-red";
const theme2: Theme = "dark-blue";

// const theme3: Theme = "bright-yellow"; // Error: Type '"bright-yellow"' is not assignable to type 'Theme'.

テンプレート リテラル タイプを使用すると、明るさ-色のパターンに従う必要があるテーマ タイプを定義できます。これは、タイプに従うべきスタイル ガイドを与えるようなものです。

7. 再帰型

再帰型はそれ自体を参照する型であり、ツリーやリンク リストなどの複雑なデータ構造をモデル化できます。

例

ツリー構造の再帰型の作成:

interface TreeNode {
  value: number;
  left?: TreeNode;
  right?: TreeNode;
}

const tree: TreeNode = {
  value: 1,
  left: {
    value: 2,
    left: { value: 3 },
    right: { value: 4 }
  },
  right: {
    value: 5
  }
};

再帰型: 場合によっては、無限ループのように永遠に続く型が必要になるためです (ただし、良い意味で)。

結論

TypeScript は強力なツールであり、これらの高度な概念を習得すると、コードをより堅牢で保守しやすく、まさに素晴らしいものにすることができます。これらの高度な機能の探索を続けると、コードがより簡潔になり、型定義がより正確になり、全体的な開発ワークフローがよりスムーズになることがわかります。

追加のリソース

• TypeScript ドキュメント
• TypeScript GitHub リポジトリ

コーディングを楽しんでください! ?

以上がすべての開発者が知っておくべき高度な TypeScript の概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。