TypeScript 제외 유형의 작동 방식

TypeScript에서 Exclude 유틸리티 유형을 사용하면 이미 정의된 공용체 유형에서 특정 멤버를 제외할 수 있습니다. 즉, 기존 유형에서 특정 상황에 대한 항목을 제거할 수 있습니다.

제외 유틸리티 유형이 TypeScript에서 어떻게 작동하는지 살펴보겠습니다.

유틸리티 유형

유틸리티 유형은 특정 문제를 해결하기 위해 TypeScript에 정의된 유형입니다. TypeScript에서 사용자 정의 유형을 처음 정의하는 경우 read my guide on defining custom types here .

TypeScript에서 제외 유형이 작동하는 방식

TypeScript에서는 공용체 유형이라는 특정 유형을 정의할 수 있습니다. 공용체 유형은 가능한 값의 목록입니다. 예를 들어:

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

위에서 myUnionType 유형을 지정하면 🍇, 🍎, 🫐 또는 🍋의 4가지 값만 가능합니다. 예를 들어:

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let myString:myUnionType = "🍇"

// This throws an error! "Type '"some-string"' is not assignable to type 'myUnionType'.
let secondString:myUnionType = "some-string"

이제 유니온 유형의 작동 방식에 대한 기본 사항을 다루었습니다. 이제 제외에 대해 이야기해 보겠습니다.

제외 유형

myUnionType을 사용하고 싶지만 유효한 값 목록에 🍋를 포함하고 싶지 않은 상황이 있다고 가정합니다. 이는 API 응답에서 실제로 발생할 수 있습니다. 표준 API 응답 유형이 있지만 해당 API 유형에서 특정 상황의 필드를 제거하려는 경우를 가정해 보십시오.

여기에서 제외를 사용할 수 있습니다. 제외에는 Exclude<UnionType, ExcludedMembers> 구문이 있습니다. 일반 공용체 유형을 전달한 다음 두 번째 인수에서 제거할 멤버를 지정합니다.

해 봅시다:

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let lemon:myUnionType = "🍋"

// This throws an error! Type '"🍋"' is not assignable to type '"🍇" | "🍎" | "🫐"'.
let noLemonsPlease:Exclude<MyUnionType, "🍋"> = "🍋"

두 번째 변수noLemonsPlease는 이 특정 변수에 대한 공용체 유형에서 🍋를 제거하기 위해 Exclude를 사용했기 때문에 오류를 발생시킵니다. 즉, 다른 곳에서 유형을 정상적으로 사용한 다음 Exclude를 사용하여 원하는 경우 멤버를 제외할 수 있습니다.

둘 이상의 구성원을 제거하려면 |로 구분하기만 하면 됩니다.

type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let lemon:myUnionType = "🍋"

let noLemonsPlease:Exclude<myUnionType, "🍋"> = "🍇"
//  ^
//  └ - - Type is  "🍇" | "🍎" | "🫐"

let noApplesOrLemons:Exclude<myUnionType, "🍋" | "🍎"> = "🍇";
//  ^
//  └ - - Type is  "🍇" | "🫐"

let onlyRaspberries:Exclude<myUnionType, "🍋" | "🍎" | "🫐"> = "🍇";
//  ^
//  └ - - Type is  "🍇"

let backToLemons:myUnionType = "🍋"
//  ^
//  └ - - Type is  "🍇" | "🍎" | "🫐" | "🍋"

따라서 Exclude 유형은 우리에게 적합할 때 특정 요소를 제거하고 다시 필요할 때 그대로 유지할 수 있는 유연성을 제공합니다.