TypeScript "satisfies" 연산자 이해하기

들어가면서

안녕하세요. 오늘은 타입스크립트 4.9버전에서 나온 satisfies 연산자를 알아보겠습니다.

satisfies 연산자는 구체적인 타입 추론을 하는데 도움을 주는 연산자입니다. 

구체적인 타입 추론은 간결하게 코드를 작성하고 TypeSafe한 환경을 만드는데 도움을 줍니다. 

공식문서에 있는 예시를 통해 이해하는 시간을 가져볼게요.

 

 

satisfies 연산자 이해하기

다양한 케이스들을 살펴보면서 satisfies연산자를 배워보겠습니다.

각 케이스마다 질문이 있으니 스스로 생각해보고 답해보시면 기억에 잘 남으실 거에요.

 

Case1: 객체만 만든 경우

Q1. case1에서 타입 에러가 발생할까요?

type Color = 'blue' | 'red' | 'black'

const color = {
    bleu: [0,0,255],
    red: '#32234',
    black: [255, 0,0]
}

// Case1
const case1 = color.red.toUpperCase() // 에러 발생?

A: 타입 에러가 발생하지 않았습니다. 하지만 bleu 오타가 있네요! 오타를 잡으려면 타입을 명시해줘야 겠네요

 

 

Case2: 타입 명시해주기

Q2. case2에서 타입 에러가 발생할까요?

const color: Record<Color, [number, number, number] | string> = {
    bleu: [0,0,255], // 타입 에러 발생
    red: '#32234',
    black: [255, 0,0]
}

// Case2
const case2 = color.red.toUpperCase() // 에러 발생?

A: 우선 color 객체의 bleu에서 bleu' does not exist in type 'Record<Color, string | [number, number, number]> 에러가 발생합니다. 오타를 잡아줬네요.

case2에서는 Property 'toUpperCase' does not exist on type 'string | [number, number, number]'. 타입 에러가 발생합니다. 타입스크립트는 red의 타입이 string인지 [number, number, number] 인지 알지 못합니다. 배열에서는 toUpperCase를 사용할 수 없기 때문에 에러를 발생시키게 됩니다.

 

 

Case3: as 사용하기

Q3. case3에서 타입 에러가 발생할까요?

const color = {
    blue: [0,0,255],
    red: '#32234',
    black: [255, 0,0]
} as Record<Color, [number, number, number] | string>

// Case3
const case3 = color.red.toUpperCase() // 에러 발생?

A: 타입 명시했을 때와 같은 타입 에러가 발생합니다. 여전히 타입스크립트는 red 프로퍼티가 string인지, [number, number, number] 배열인지 정확히 모릅니다. 

 

물론 아래처럼 타입 검사를 직접해주면 해결할 수 있습니다.

if(color.red === typeof 'string') {
    const case3 = color.red.toUpperCase() // Great! 에러 발생 X
}

 

 

 

Case4: satisfies 연산자 사용하기

Q4. case4에서 타입 에러가 발생할까요?

const color = {
    blue: [0,0,255],
    red: '#32234',
    black: [255, 0,0]
} satisfies Record<Color, [number, number, number] | string>

// Case4
const case4 = color.red.toUpperCase() // 에러 발생?

A: 타입 에러가 발생하지 않습니다. red가 string타입이라는 것을 정확하게 타입 추론합니다.

satisfies 연산자는 객체의 각 프로퍼티의 타입을 validate하여 [number, number, number] 타입인지 string 타입인지 정확하게 타입을 추론합니다. as를 사용할 때처럼 직접 타입 검사를 하는 코드도 추가할 필요도 없습니다.

 

 

마무리

satisfies 연산자가 어떻게 구체적으로 타입을 추론하는지 예시를 통해 확인했습니다.

이를 통해 간결하고 안전한 타입 환경을 만드는데 도움을 받을 수있습니다.

satisfies 연산자를 이해하는데 도움이 되었길 바랍니다!

TypeSafe한 환경을 위해 앞으로도 모두 파이팅입니다.