타입스크립트 조건부 형식 - Exclude

January·2023년 8월 31일
0

Frontend

목록 보기
30/31
post-custom-banner

TestType['user']['name']
'{ name?: string | null | undefined; email?: string | null | undefined; login: string; id: number; node_id: string; avatar_url: string; gravatar_id: string | null; url: string; html_url: string; ... 11 more ...; starred_at?: string | undefined; } | null' 형식에 'name' 속성이 없습니다.

라이브러리 내장 타입을 가져와 사용하려는데 에러가 발생했습니다. user 키까지는 접근이 되는데 name은 접근이 되지 않았습니다. 그래서 user가 있는 파일에 들어가보니 {원하는타입} | null 타입이였습니다.

null 타입을 지우니 name 키에 접근이 가능했고 원인이 null이라는걸 알았습니다.

null만 아니면 되는데 이전에 라이브러리 커스텀을 해본적이 있어서 가장 먼저 patch-package가 생각났습니다. 근데 null 하나 때문에? 라는 생각이 드는데 팀원분이 Exclude를 사용해 단숨에 해결하시는데 멋 있었습니다.

저는 모르니까 알아봅시다!

Exclude

타입스크립트는 용도에 맞게 조건부 타입을 활용한 새로운 타입들을 미리 정의해 두었고, 이것을 Predefined conditional types 라고 하며 그 중 하나가 Exclude 입니다.

이해하기 위해 순서대로 코드를 작성해봤습니다.

// 개념 1
T extends U ? X : Y

// 개념 2
type Exclude<T, U> = T extends U ? never : T;

// 응용
type name = "bumsu" | "mina" | "chae" | "car";

type friends = Exclude<name, "bumsu" | "car">;
// type friends = "mina" | "chae" 와 같다.

적용

type ExampleType = Exclude<TestType, null>['name']

오류 해결!

post-custom-banner

0개의 댓글