TypeScript 태그된 공용체는 OP입니다.-JS 튜토리얼-php.cn

TypeScript 태그된 공용체는 OP입니다.

Linda Hamilton

풀어 주다： 2024-10-10 06:17:29

원래의

352명이 탐색했습니다.

TypeScript Tagged Unions are OP

TypeScript에서 여러 객체 모양을 처리하는 데 어려움을 겪고 보다 유형이 안전한 솔루션을 원한 적이 있습니까?

그렇다면 당신은 혼자가 아닙니다. 많은 개발자는 태그된 공용체(차별화된 공용체라고도 함)가 TypeScript에서 제공하는 모든 잠재력을 인식하지 못합니다. 이 강력한 기능은 코드의 안전성, 가독성 및 유지 관리성을 향상시킬 수 있습니다. 이 기사에서는 태그된 공용체에 대해 자세히 알아보고 이를 통해 TypeScript 기술을 향상시킬 수 있는 방법을 살펴보겠습니다.

?️ 태그된 연합이란 무엇입니까?

태그된 공용체를 사용하면 각각 "태그" 또는 "판별자"라고 알려진 구별 속성을 가진 여러 가능한 모양 중 하나를 나타내는 유형을 만들 수 있습니다. 이를 통해 TypeScript는 조건부 검사에서 유형의 범위를 좁혀 코드가 가능한 모든 사례를 명시적으로 처리하도록 보장합니다.

? 왜 관심을 가져야 합니까?

향상된 유형 안전성

태그된 공용체는 가능한 모든 사례가 처리되도록 보장하여 컴파일 타임에 오류를 잡는 데 도움이 됩니다. 이렇게 하면 런타임 오류가 줄어들고 코드가 더욱 강력해집니다.

명확하고 유지 관리 가능한 코드

각 사례의 모양을 명시적으로 정의하면 코드가 더 읽기 쉽고 유지 관리가 더 쉬워집니다. 미래의 개발자(혹은 미래의 당신)도 감사할 것입니다!

완전성 검사

TypeScript는 가능한 사례를 처리하는 것을 잊어버린 경우 경고를 표시하여 코드가 모든 시나리오를 고려하도록 할 수 있습니다.

? 사례별로 태그된 노동조합

다양한 모양이 있고 면적을 계산하려는 시나리오를 생각해 보세요.

// Define interfaces with a discriminant property 'kind'
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

// Create a union type of all shapes
type Shape = Circle | Rectangle | Triangle;

// Function to calculate the area based on shape kind
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;

    case 'rectangle':
      return shape.width * shape.height;

    case 'triangle':
      return (shape.base * shape.height) / 2;

    default:
      // The 'never' type ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

로그인 후 복사

여기서 무슨 일이 일어나고 있나요?

식별 속성(종류): 각 인터페이스에는 리터럴 유형의 종류 속성이 포함되어 있습니다. 이 속성은 공용체의 태그 역할을 합니다.
Union Type(Shape): 모든 Shape 인터페이스를 단일 유형으로 결합합니다.
유형 축소: 스위치 문 내에서 TypeScript는 종류 속성을 기반으로 어떤 형태를 다루고 있는지 정확히 알고 있습니다.
완전성 검사: never 유형이 있는 기본 사례는 새 도형이 추가되었지만 처리되지 않은 경우 TypeScript가 컴파일 시간 오류를 생성하도록 보장합니다.

?️ 예: 상태 관리

태그된 공용체는 비동기 작업(예: 데이터 가져오기)의 다양한 상태를 나타내는 등 상태 관리 시나리오에서 매우 유용합니다.

interface LoadingState {
  status: 'loading';
}

interface SuccessState {
  status: 'success';
  data: string;
}

interface ErrorState {
  status: 'error';
  error: string;
}

type AppState = LoadingState | SuccessState | ErrorState;

function renderApp(state: AppState) {
  switch (state.status) {
    case 'loading':
      return 'Loading...';
    case 'success':
      return `Data: ${state.data}`;
    case 'error':
      return `Error: ${state.error}`;
    // default case can be omitted because typescript is making sure all cases are covered!
  }
}

로그인 후 복사

? 이것이 왜 좋은가요?

상태의 명확한 표현: 각 인터페이스는 애플리케이션의 고유한 상태를 나타내므로 이해하고 관리하기 쉽습니다.
데이터 액세스를 통한 유형 안전성: 상태가 '성공'이면 TypeScript는 상태에 데이터 속성이 있음을 인식합니다. 마찬가지로 상태가 'error'이면 오류 속성에 대해 알고 있습니다. 이렇게 하면 특정 상태에 존재하지 않는 속성에 실수로 액세스하는 것을 방지할 수 있습니다.

유지관리성 향상