모든 개발자가 알아야 할 고급 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. 조합의 종류

Union 유형을 사용하면 변수가 여러 유형 중 하나를 보유할 수 있으므로 유형 안전을 유지하면서 다양한 데이터 유형을 처리할 수 있는 유연성을 제공합니다. 다양한 작업을 처리할 수 있는 멀티 도구 ?️를 갖는 것과 같습니다.

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. 교차점 유형

교차 유형은 여러 유형을 하나로 결합하므로 결합된 유형의 모든 속성을 갖는 변수가 필요합니다.

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라는 두 가지 유형을 정의한 다음 교차점을 사용하여 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는 강력한 도구이며, 이러한 고급 개념을 숙지하면 코드를 더욱 강력하고 유지 관리 가능하며 정말 멋지게 만들 수 있습니다. 이러한 고급 기능을 계속 탐색하면 코드가 더욱 간결해지고 유형 정의가 더욱 정확해지며 전반적인 개발 작업 흐름이 더욱 원활해짐을 알게 될 것입니다.