TypeScript 태그된 공용체는 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'이면 오류 속성에 대해 알고 있습니다. 이렇게 하면 특정 상태에 존재하지 않는 속성에 실수로 액세스하는 것을 방지할 수 있습니다.

유지관리성 향상

: 애플리케이션이 성장함에 따라 다양한 상태를 관리하기가 더욱 쉬워집니다. 코드의 한 부분을 변경하면 다른 부분에 필요한 업데이트가 발생하여 버그가 줄어듭니다.

• ? 태그된 공용체 사용에 대한 팁

  일관된 판별자: 모든 유형에 걸쳐 동일한 속성 이름(예: 유형, 종류 또는 상태)을 사용합니다.
리터럴 유형: 정확한 유형 범위를 좁히기 위해 판별자 속성이 리터럴 유형('email', 'sms' 등)을 사용하는지 확인하세요.

문자열 열거형을 피하세요: 판별자가 유형 축소를 간단하게 유지하려면 열거형보다 문자열 리터럴 유형을 선호하세요.

? 결론

태그된 공용체는 더 안전하고 유지 관리하기 쉬운 코드를 작성하는 데 도움이 되는 TypeScript의 강력한 기능입니다. 가능한 각 유형을 명시적으로 처리하면 예기치 않은 오류가 발생할 가능성이 줄어들고 코드를 더 쉽게 이해할 수 있습니다.

현재 또는 다음 TypeScript 프로젝트에서 태그된 공용체를 사용해 보고 이점을 직접 경험해 보세요!

? 추가 자료

TypeScript 핸드북: 공용체 및 교차 유형

TypeScript 차별 공용체란 무엇인가요?

위 내용은 TypeScript 태그된 공용체는 OP입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!