すべての開発者が知っておくべき高度な TypeScript の概念-jsチュートリアル-php.cn

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

DDD

リリース： 2024-11-04 16:20:02

オリジナル

759 人が閲覧しました

dvanced TypeScript Concepts Every Developer Should Know

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
  }
};

ログイン後にコピー

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