TypeScript 2.0 태그 결합 유형

표 시 된 연합 형식 을 사용 하여 지불 방식 을 구축 합 니 다.
만약 에 우리 가 시스템 사용자 가 선택 할 수 있 는 다음 과 같은 지불 방식 으로 모델 링 을 한다 고 가정 합 니 다.
현금(현금)PayPal 과 주어진 이메일 주소Credit card 는 주어진 카드 번호 와 안전 코드 를 가지 고 있 습 니 다이러한 지불 방법 에 대해 우 리 는 TypeScript 인 터 페 이 스 를 만 들 수 있다.

interface Cash {
  kind: "cash";
}

interface PayPal {
  kind: "paypal",
  email: string;
}

interface CreditCard {
  kind: "credit";
  cardNumber: string;
  securityCode: string;
}

필요 한 정 보 를 제외 하고 모든 유형 은 하나의 kind 속성,즉 판별 속성 이 있 습 니 다.이 곳 의 모든 상황 은 문자열 의 글자 크기 형식 입 니 다.
현재 Payment Method 형식 을 정의 합 니 다.이것 은 우리 가 방금 정의 한 세 가지 유형의 집합 입 니 다.이러한 방식 을 통 해 Payment Method 의 모든 변 수 는 주어진 세 가지 구성 유형 중 하 나 를 가 져 야 합 니 다.

type PaymentMethod = Cash | PayPal | CreditCard;

현재 우리 의 유형 은 이미 준비 되 었 습 니 다.지불 방법 을 받 아들 이 고 읽 을 수 있 는 말 을 되 돌려 주 는 함 수 를 만 듭 니 다.

function describePaymentMethod(method: PaymentMethod) {
  switch (method.kind) {
    case "cash":
      // Here, method has type Cash
      return "Cash";

    case "paypal":
      // Here, method has type PayPal
      return `PayPal (${method.email})`;

    case "credit":
      // Here, method has type CreditCard
      return `Credit card (${method.cardNumber})`;
  }
}

우선,이 함수 에 포 함 된 형식 설명 이 적 고 method 매개 변 수 는 하나 만 포함 합 니 다.그 밖 에 함 수 는 기본적으로 순수 ES 2015 코드 입 니 다.
switch 문장의 모든 케이스 에서 TypeScript 컴 파일 러 는 하나의 구성원 형식 으로 연합 형식 을 축소 합 니 다.예 를 들 어"paypal"과 일치 하면 method 매개 변수의 유형 은 Payment Method 에서 PayPal 로 축소 합 니 다.따라서,우 리 는 email 속성 에 접근 할 수 있 으 며,유형 단언 을 추가 할 필요 가 없습니다.
본질 적 으로 컴 파일 러 추적 프로그램 은 연합 유형 을 축소 하기 위해 흐름 을 제어 한다.switch 문 구 를 제외 하고 조건 과 할당,반환 의 영향 도 고려 해 야 합 니 다.

function describePaymentMethod(method: PaymentMethod) {
  if (method.kind === "cash") {
    // Here, method has type Cash
    return "Cash";
  }

  // Here, method has type PayPal | CreditCard

  if (method.kind === "paypal") {
    // Here, method has type PayPal
    return `PayPal (${method.email})`;
  }

  // Here, method has type CreditCard
  return `Credit card (${method.cardNumber})`;
}

흐름 을 제어 하 는 유형 분석 은 태그 결합 유형 을 사용 하 는 것 이 매우 순 조 롭 습 니 다.최소한 의 TypeScript 문법 비용 을 사용 하면 우 리 는 거의 순수한 js 를 작성 할 수 있 고 유형 검사 와 코드 완성 에서 이득 을 볼 수 있 습 니 다.
태그 결합 형식 으로 Redux 작업 구축
연합 형식 이 진정 으로 역할 을 발휘 하 는 사례 를 표시 하 는 것 은 TypeScript 응용 프로그램 에서 Redux 를 사용 할 때 입 니 다.하나의 모델,두 개의 actions,하나의 Todo 응용 프로그램의 reducer 를 포함 한 사례 를 작성 합 니 다.
다음은 하나의 todo 를 나타 내 는 간단 한 Todo 유형 입 니 다.속성 이 수정 되 지 않도록 readonly 수식 자 를 사용 합 니 다.

interface Todo {
  readonly text: string;
  readonly done: boolean;
}

사용 자 는 새로운 todos 를 추가 하고 기 존 todos 의 완성 상 태 를 전환 할 수 있 습 니 다.이러한 수요 에 따라 우 리 는 두 개의 Redux 조작 이 필요 하 다.다음 과 같다.

interface AddTodo {
  type: "ADD_TODO";
  text: string;
}

interface ToggleTodo {
  type: "TOGGLE_TODO";
  index: number
}

앞의 예제 와 마찬가지 로 이 제 는 Redux 작업 을 응용 프로그램 이 지원 하 는 모든 작업 의 결합 으로 구축 할 수 있 습 니 다.

type ReduxAction = AddTodo | ToggleTodo;

이 예 에서 type 속성 은 판별 속성 을 충당 하고 Redux 에서 흔히 볼 수 있 는 명명 모드 를 따른다.현재 이 두 action 과 함께 일 하 는 Reducer 를 추가 합 니 다.

function todosReducer(
  state: ReadonlyArray<Todo> = [],
  action: ReduxAction
): ReadonlyArray<Todo> {
  switch (action.type) {
    case "ADD_TODO":
      // action has type AddTodo here
      return [...state, { text: action.text, done: false }];

    case "TOGGLE_TODO":
      // action has type ToggleTodo here
      return state.map((todo, index) => {
        if (index !== action.index) {
          return todo;
        }

        return {
          text: todo.text,
          done: !todo.done
        };
      });

    default:
      return state;
  }
}

마찬가지 로 함수 서명 만 형식 설명 을 포함 합 니 다.코드 의 나머지 부분 은 TypeScript 가 아 닌 순수 ES 2015 입 니 다.
우 리 는 앞의 예시 와 같은 논 리 를 따른다.Redux 작업 의 type 속성 을 기반 으로 기 존 상 태 를 수정 하지 않 고 새 상 태 를 계산 합 니 다.switch 문장의 경우,우 리 는 모든 조작 유형의 text 와 index 속성 에 접근 할 수 있 으 며,어떠한 종류의 단언 도 필요 하지 않 습 니 다.
never 형식
TypeScript 2.0 은 새로운 원본 형식 never 를 도 입 했 습 니 다.never 형식 은 값 을 표시 하 는 형식 이 나타 나 지 않 습 니 다.구체 적 으로 말 하면 never 는 함수 의 반환 유형 을 영원히 되 돌려 주지 않 고 변수 가 유형 보호 에서 true 가 되 지 않 는 유형 입 니 다.
이것 은 never 유형의 정확 한 특징 입 니 다.다음 과 같 습 니 다.

never 는 모든 유형의 하위 유형 이 고 모든 유형 에 값 을 부여 할 수 있 습 니 다

타 입 이 never 의 하위 타 입 이거 나 never 에 게 할당 할 수 있 는 타 입 이 없습니다(never 타 입 자 체 는 제외)

4.567917.함수 표현 식 이나 화살표 함수 가 형식 주 해 를 되 돌려 주지 않 았 을 때 함수 가 return 문 구 를 가지 고 있 지 않 거나 never 형식 표현 식 의 return 문 구 를 가지 고 있 으 며 함수 가 종점 까지 실행 할 수 없 는 경우(예 를 들 어 제어 흐름 분석 을 통 해 결 정 된 것)함수 의 반환 유형 은 never 로 추정 된다

never 반환 형식 주석 이 명확 한 함수 에서 모든 return 문 구 는 never 형식의 표현 식 이 있어 야 하고 함수 의 종점 은 실행 할 수 없어 야 합 니 다

구름 속 에 안개 속 에 있 는 것 을 들 었 습 니 다.다음은 몇 가지 예 를 들 어 never 라 는 형님 에 대해 이야기 하 겠 습 니 다.
영원히 돌아 오지 않 는 함수
다음은 영원히 돌아 오지 않 는 함수 예제 입 니 다.

// Type () => never
const sing = function() {
  while (true) {
    console.log("       ，   ！");
    console.log("       ，   ！");
    console.log("       ，   ！");
    console.log("       ，   ！");
    console.log("       ，   ！");
    console.log("       ，   ！");
  }
}

이 함 수 는 break 나 return 문 구 를 포함 하지 않 는 무한 순환 으로 구성 되 어 있어 순환 을 벗 어 날 수 없습니다.따라서 함수 의 반환 유형 은 never 로 추정 된다.
유사 하 게 아래 함수 의 반환 유형 은 never 로 추정 된다.

// Type (message: string) => never
const failwith = (message: string) => {
  throw new Error(message);
};

TypeScript 는 never 형식 을 추정 합 니 다.이 함 수 는 형식 설명 을 되 돌려 주지 않 았 고 도착 할 수 있 는 점 이 없 기 때 문 입 니 다.(제어 흐름 분석 에 의 해 결 정 됩 니 다)
이 유형의 변 수 는 있 을 수 없습니다.
또 다른 상황 은 never 유형 이 ture 로 추정 되 지 않 는 다 는 것 이다.다음 예제 에서 우 리 는 value 매개 변수 가 문자열 과 숫자 가 동시에 있 는 지 확인 합 니 다.이것 은 불가능 합 니 다.

function impossibleTypeGuard(value: any) {
  if (
    typeof value === "string" &&
    typeof value === "number"
  ) {
    value; // Type never
  }
}

이 예 는 분명히 지나치게 해서 더욱 실제 적 인 용례 를 보 는 것 이다.다음 예제 에 서 는 TypeScript 의 제어 흐름 분석 이 유형 수비 하 변수의 결합 유형 을 축소 시 켰 음 을 보 여 줍 니 다.직관 적 으로 말 하면 유형 검사 기 는 우리 가 value 가 문자열 이라는 것 을 검사 하면 숫자 가 될 수 없고 반대로 도 마찬가지 라 는 것 을 안다.

function controlFlowAnalysisWithNever(
  value: string | number
) {
  if (typeof value === "string") {
    value; // Type string
  } else if (typeof value === "number") {
    value; // Type number
  } else {
    value; // Type never
  }
}

마지막 else 분기 에서 value 는 문자열 도 숫자 도 아 닙 니 다.이러한 상황 에서 TypeScript 는 never 형식 을 추정 합 니 다.우 리 는 value 매개 변 수 를 string|number 로 주 해 했 기 때 문 입 니 다.즉,string 이나 number 를 제외 하고 value 매개 변 수 는 다른 유형 이 있 을 수 없습니다.
제어 흐름 분석 이 string 과 number 를 value 형식의 후보 항목 으로 제외 하면 유형 검사 기 는 never 유형 을 추정 하 는데 이것 이 유일한 가능성 이다.그러나,우 리 는 value 에 대해 어떠한 유용 한 일 도 할 수 없습니다.왜냐하면 그것 의 유형 은 never 이기 때문에,우리 의 편집기 도 구 는 이 값 이 어떤 방법 이나 속성 을 사용 할 수 있 는 지 자동 으로 표시 하지 않 습 니 다.

never 와 void 의 차이
TypeScript 에 왜 void 형식 이 있 는 지,왜 never 형식 이 필요 한 지 물 어 볼 수 있 습 니 다.비록 이 두 가 지 는 매우 비슷 해 보이 지만,그것들 은 두 가지 다른 개념 이다.
명시 적 반환 값 이 없 는 함 수 는 undefined 를 암시 적 으로 되 돌려 줍 니 다.비록 우 리 는 일반적으로 이런 함수 가"아무것도 되 돌려 주지 않 는 다"고 말 하지만,그것 은 되 돌아 올 것 이다.이런 상황 에서 우 리 는 보통 반환 값 을 소홀히 한다.이러한 함 수 는 TypeScript 에서 void 반환 형식 으로 추정 된다.
never 반환 형식 을 가 진 함 수 는 영원히 돌아 오지 않 습 니 다.그것 도 undefined 로 돌아 가지 않 습 니 다.이 함수 가 정상적으로 완성 되 지 않 았 다 는 것 은 오류 가 발생 하거나 실행 이 완료 되 지 않 는 다 는 것 을 의미한다.
함수 성명 의 유형 추정
함수 성명 의 반환 유형 에 대해 작은 문제 가 있 을 것 으로 추정 합 니 다.우리 가 앞에서 열거 한 몇 가지 never 특징 을 너 는 아래 의 이 말 을 발견 할 것 이다.
함수 표현 식 이나 화살표 함수 가 형식 주 해 를 되 돌려 주지 않 았 을 때 함수 가 return 문 구 를 가지 고 있 지 않 거나 never 형식 표현 식 의 return 문 구 를 가지 고 있 으 며 함수 가 종점 까지 실행 할 수 없 는 경우(예 를 들 어 제어 흐름 분석 을 통 해 결 정 된 것)함수 의 반환 유형 은 never 로 추정 된다.
함수 표현 식 과 화살표 함 수 를 언급 했 지만 함수 설명 은 언급 되 지 않 았 습 니 다.즉,함수 표현 식 으로 추정 되 는 반환 형식 은 함수 성명 으로 추정 되 는 반환 형식 과 다 를 수 있 습 니 다.

// Return type: void
function failwith1(message: string) {
  throw new Error(message);
}

// Return type: never
const failwith2 = function(message: string) {
  throw new Error(message);
};

이런 행위 의 원인 은 뒤로 호환성 이 있 기 때문에 다음 과 같다.함수 성명 의 반환 형식 never 를 원한 다 면 명시 적 설명 을 할 수 있 습 니 다.

function failwith1(message: string): never {
  throw new Error(message);
}

이상 은 TypeScript 2.0 태그 연합 유형 에 대한 상세 한 내용 입 니 다.TS 2.0 태그 연합 유형 에 관 한 자 료 는 다른 관련 글 에 주목 하 십시오!