🔍 프로그래머스 FE 데브코스 5기 TIL - TypeScript 제네릭, 조건부타입, infer

2023. 11. 14

💻 Intro & TMI

이제 1차 팀원과의 시간이 하루밖에 남지 않았다...
데브코스에서 처음 만난 사람들이기도 하고 우여곡절이 많아 정이 들었던 팀이었던 현주팀인데 벌써 헤어질 시간이라니.
시간이 엄청 빨리 지나가는 거 같다.
이번 주는 강의도 월, 화로 타입스크립트를 마무리하고 다음주 월요일까지는 방학이라 재정비 시간이다.
방학 동안에는 현주팀과 진행하려고 했던 미니게임천국 사이드 프로젝트를 마무리하고 부족한 공부를 더 할 것이다.

---

🧐 오늘 새롭게 배운 것

제네릭

타입스크립트에서 함수 오버로딩을 통해서 타입 조건을 추가하다가 보면 아래 그림과 같이 코드가 엄청 길어지는 경우가 발생한다.

이러한 비효율적인 코드 작성을 해결하기 위해서 사용할 수 있는 개념이 제네릭(Generic)이다.

복잡한 타입 조건이 매개변수와 반환값에 동일하게 적용될 경우 이 타입 조건을 변수화하여 적용하는 것이다.

제네릭은 <> 괄호를 통해 선언 및 호출할 수 있다.
제네릭의 이름을 자유롭게 설정 가능하다.

function toObj<T>(a: T, b: T): { a: T; b: T } {
  return { a, b }
}

toObj<string>('A', 'B')
toObj<number>(1, 2)
toObj<boolean>(true, false)

제네릭은 타입 추론에 의해 호출 시 제네릭을 생략하더라도 매개 변수가 지정된 것으로 추론이 가능하면 에러가 발생하지 않는다.
반대로 추론을 통해 올바르지 않은 타입이 지정되었으면 에러가 발생한다.

function toObj<T>(a: T, b: T): { a: T; b: T } {
  return { a, b }
}

// 'A'를 통해 a가 string 타입 및 T가 string 타입임을 알 수 있어
// 제네릭을 생략해도 에러가 발생하지 않는다.
toObj('A', 'B')

// 'A'를 통해 제네릭 T가 string인데 b의 타입이 number이므로
// 에러가 발생한다.
toObj('A', 123) // 'number' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다.

하지만 위의 toObj의 함수의 T 타입에는 null이나 undefined 타입이 들어가도 에러가 발생하지 않게 되는 치명적인 문제가 있다.

따라서 제네릭은 제약조건과 함꼐 사용되어야 이러한 문제를 방지할 수 있다. 제약조건은 extends로 설정한다.

function toObj<T extends string | number | boolean>(
  a: T,
  b: T,
): { a: T; b: T } {
  return { a, b }
}

제약조건을 통해 T 타입의 조건을 명시적으로 정해줘서 사용자가 원하는 타입이 아닌 것은 사용하지 않도록 제약을 걸어야 한다.

제네릭은 함수 말고도 인터페이스, 클래스에도 사용 가능하다!
인터페이스를 통해 위 toObj 함수의 반환값 타입을 좀 더 간단하게 만들 수 있다.

interface ToObj<T> {
  a: T
  b: T
}

function toObj<T extends string | number | boolean>(a: T, b: T): ToObj<T> {
  return { a, b }
}

여러 개의 제네릭을 사용하고 싶다면 아래와 같이 사용 가능하다.

/*
  interface User<T, U, V> {
    name: T,
    age: U,
    isValid: V
  }
*/

type User<T, U, V> = { name: T; age: U; isValid: V } | [T, U, V]

type U = User<string, number, boolean>

const person1: U = { name: 'person1', age: 17, isValid: true }

const person2: U = ['person2', 19, false]

보통 객체 타입으로 타입을 지정할 때는 인터페이스를 사용할 수 있는데 person2처럼 지정하고 싶은 타입이 제네릭을 요소로 가지는 배열 형태라면 type 연산자를 통해 튜플 형태로 지정할 수 있다.

또한 타입 별칭 U에서 사용한 것처럼 타입 별칭에도 제네릭을 포함시킬 수 있으며 이렇게 작성하면 코드가 간결해진다.

제네릭을 활용한 조건부 타입

타입을 사용자가 원하는 조건에 따라 지정할 수 있도록 JS의 삼항연산자 문법처럼 구현할 수 있다.
이렇게 구현한 조건부 타입을 유틸리티 타입이라고도 부른다.

강의에서는 여러 가지 예제를 만나봤는데 꽤 유용했다.

// 타입이 string 또는 number일 때만 boolean 타입을 지정하는 조건부 타입
type MyType<T> = T extends string | number ? boolean : never

const a: MyType<string> = true
const b: MyType<number> = true
const c: MyType<null> = true // 에러: 'boolean' 형식은 'never' 형식에 할당할 수 없습니다.

내가 원하는 타입에 해당할 때만 특정한 타입을 지정할 수 있는 필터 역할을 하는 MyType이라는 유틸리티 타입이었다.

// T라는 타입에서 U의 타입을 제외하는 조건부 타입
// T 타입이 제약조건인 U 타입과 일치하면 never 타입을 통해 할당을 막는다.
type MyExclude<T, U> = T extends U ? never : T
type MyUnion = string | number | boolean | null

const a: MyExclude<MyUnion, boolean | null> = 123

const b: MyExclude<MyUnion, boolean | null> = null
// 'null' 형식은 'string | number' 형식에 할당할 수 없습니다.

마찬가지로 Union 타입이 있을 때 해당 타입에서 특정한 타입을 제외할 수 있는 MyExclude 유틸리티 타입이다.

// T라는 객체 타입에 특정 속성의 타입을 체크하는 조건부 타입이다.
type IsPropertyType<T, U extends keyof T, V> = T[U] extends V ? true : false
// keyof 키워드를 통해 객체 타입의 속성(키)를 추출할 수 있다.
type Keys = keyof User // 'name' | 'age'

interface User {
  name: string
  age: number
}

const n: IsPropertyType<User, 'name', number> = true
// User 객체 타입의 'name' 속성은 string 타입이므로
// false 타입이 지정되므로 에러가 발생한다.

7주차 고양이 사진첩 과제에서 객체 타입 내 속성의 타입을 검사하는 로직을 구현했었다.
이것을 타입스크립트에서 조건부 타입을 통해 손쉽게 구현할 수 있었다.
타입스크립트를 사용하는 궁극적인 이유가 이것이지 않을까

• keyof
  타입스크립트에서 객체 타입 또는 인터페이스에서 키(속성)을 Union 타입으로 뽑아낼 수 있게 해준다.

infer 키워드

infer 키워드는 제약 조건을 설정할 때 타입스크립트에게 타입 추론을 할 대상을 지정할 때 쓰인다.

아래 코드는 배열 타입이 주어지면 해당 배열 타입 내 요소의 타입이 일치할 때만 값을 할당할 수 있게 하는 조건부 타입이다.

type ArrayItemType<T> = T extends (infer I)[] ? I : never

const numbers = [1, 2, 3]
const a: ArrayItemType<number[]> = 123
const b: ArrayItemType<boolean> = 123
// 'number' 형식은 'never' 형식에 할당할 수 없습니다.

const fruits = ['Apple', 'Banana', 'Cherry']
const c: ArrayItemType<typeof fruits> = 'Mango'

const hello = () => {}
const d: ArrayItemType<typeof hello> = 'hello'
// 'string' 형식은 'never' 형식에 할당할 수 없습니다.

ArrayItemType에서 주어진 T타입과 제약조건을 비교할 때 (infer I)[]을 지정하면 배열 타입이긴 한데 배열 안 요소의 타입을 T 타입을 바탕으로 추론할 수 있게 해주는 것이 infer 키워드이다.

추론 과정을 정리하면

1. a에서는 T타입이 요소 타입이 number인 배열을 지정했으므로 제약조건과 비교할 때 I가 number라고 추론이 가능하다. 따라서 number인 I를 반환하기 때문에 123을 할당 가능하다.

2. b에서 T를 boolean 타입으로 지정했을 때는 애초에 배열 타입이 아니므로 추론할 수가 없다. 따라서 never 타입이 반환되므로 에러가 발생한다.

3. c에서는 typeof fruits가 string[]이 되므로 I는 string으로 추론된다. 따라서 Mango를 할당 가능하다.

4. d에서는 typeof hello가 () => Void로 해석되므로 애초에 배열 타입이 아니기에 never 타입이 반환된다. 따라서 에러가 발생한다.

이와 같이 제약조건을 비교할 때 infer를 지정하면 추론할 대상을 구체적으로 설정할 수 있다.

아래 SecondArgumentType 타입은 T타입의 두 번째 인자의 타입을 체크한다.

type SecondArgumentType<T> = T extends (f: any, s: infer S) => any ? S : never

function hello(a: string, b: number) {}
const a: SecondArgumentType<typeof hello> = 123

여기서 f와 반환값을 any 타입으로 지정한 이유는 사용자가 궁금하고 집중하는 대상은 두 번째 인자인 s의 타입이므로 나머지는 어떤 타입이 들어와도 되기 때문이다.

따라서 hello 함수의 두 번째 인자 b가 number 타입이므로 a는 number 타입이 되므로 123을 할당 가능하다.

---

👀 느낀점

👍 Keep

이전 CSS 강의 때 강의를 듣고도 과제 때 활용을 못했던 경험이 있어 타입스크립트 강의부터는 다시 백문이 불여일타를 적용했다. 직접 코드를 쳐보고 이것 저것을 변경해보면서 코드가 이해될 때까지 뜯어보니 개념 이해가 잘 되는 것 같다.

😱 Problem

타입스크립트 스터디를 따로 진행했는데 첫 회의를 불참했다. 이유는 전날 너무 늦게 자서 늦잠을 자버린 것이다. 컨디션 및 학습 일정 관리를 더 철저히 하자...

😜 Try

타입스크립트를 공부하다보니 7주차 과제 때 상태에 대한 타입 검사를 꼼꼼히 했었어서 그런가 이해가 좀 빨랐다. 얼른 프로젝트나 포트폴리오에 적용해봐야겠다.

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.