[TypeScript] 제네릭과 유틸리티 타입

제네릭

타입을 클래스나 함수 등에서 파라미터처럼 사용할 수 있음

function printAnything<T>(arr: T[]): void {
  for(let i = 0; i < arr.length; i ++) {
    console.log(arr[i]);
  }
}

printAnything(['a', 'b', 'c']);  // <string>을 쓰지 않아도 타입 추론 가능
printAnything([1, 2, 3]);  // <number>를 쓰지 않아도 타입 추론 가능

 

T, U는 제네릭에서 많이 사용되는 단어이고 꼭 저런 단어가 아니더라도 내가 식별할 수 있는 단어면 활용할 수 있다!

 

hook에서 활용하기

function App() {
  const [counter, setCounter] = useState<number>();
  const increment = () => {
    setCounter(prev => prev++);
  };
  
  return <div onClick={increment}>{counter}</div>;
}

- 위 경우에서 useState에 제네릭을 사용해주지 않으면 state의 타입은 undefined로 추론되어, 다른 값을 대입하고자할 때 에러가 생김

위와 같이 제네릭을 사용하면 number | undefined로 활용할 수 있음

 

 

유틸리티 타입

데이터를 이용해 간단한 계산을 하는 함수들을 Utility Function이라고 부르는 것처럼 타입을 통해 간단한 계산을 수행해주는 타입을 유틸리티 타입이라고 한다.

즉, 타입 변환을 위해 타입스크립트에서 지원하는 문법

 

Pick<T, K>

특정 타입에서 필요로하는 요소만 골라서 사용할 수 있다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

const todo: TodoPreview = {
  title: 'clean room',
  completed: false,
};

- Todo에서 title, completed 두가지 키만 pick 해서 TodoPreview라는 타입을 만들었다.

 

Omit<T, K>

원하는 타입에서 어떤 것만 제외할지 지정할 수 있다.

여러 타입을 빼고싶은 경우 | 연산자를 사용해 제외할 타입들을 지정할 수 있다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Omit<Todo, 'description' | 'completed'>;

const todo: TodoPreview = {
  title: 'clean room',
};

 

Pick과 Omit은 유사한 결과를 낼 수 있지만, 어떤 걸 사용할건지 딱 지정해주는 것이기 때문에 인지적으로 Pick을 사용하는 것이 좋을 수 있다. 하지만 지정해줘야하는 요소의 수가 많아진다면 적은 편을 선택하는 것이 나을수도!

 

Exclude<T, U>

앞의 원본 타입(T)에서 뒤에 지정한 타입(U)와 겹치는 것을 제거한다.

type T0 = Exclude<"a"|"b"|"c", "a">;  // "b" | "c"
type T1 = Exclude<string| number | (() => void), Function>;  // string | number

 

Partial<T>

어떤 타입을 Partial로 감싸주면 그 타입 내의 모든 조건들이 optional로 변한다.

interface PartialTodo {
  title?: string;
  description?: string;
}

function updateTodo(todo: Todo, filedsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}

 

Readonly<T>

읽기전용 객체를 만들 수 있다.

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: 'delete inactive users',
}

todo.title = 'eat delicious pizza';  // 에러, 읽기 전용 프로퍼티에 재할당하려 함

 

Record<K, T>

객체에서 key의 타입과 value의 타입을 각각 지정하고 싶은 경우

 

interface PageInfo {
  title: string;
}

type Page = 'home' | 'about' | 'contact';

// key는 Page 타입, value는 PageInfo 타입이 되어야 한다고 지정
const x: Record<Page, PageInfo> = {
  about: { title: 'about' },
  contact: { title: 'contact'},
  home: { title: 'home' },
};

// key에는 Page의 세 값 중 하나, value는 PageInfo 타입인 { title: ~~ }의 형태로 고정됨

 

Extract<T, U>

원본 타입(T)에서 지정한 타입(U)와 중복되는 값만 추출한다.

type T0 = Extract<'a' | 'b' | 'c', 'a' | 'f'>;  // a만 남는다
type T1 = Extract<string | number | (() => void), Function>;  // () => void 타입만 남는다

 

ReturnType<T>

함수의 반환 값을 타입으로 사용할 수 있게 함

function getUser() {
  return { name: 'alice', age: 25 };
}

// getUser의 반환값을 User 타입으로 활용할 수 있다
type User = ReturnType<typeof getUser>;

const user: User = { name: 'alice', age: 25 };

 

Parameters<T>

함수의 매개변수 타입을 추론하기위해 사용할 수 있다.

function log(message: string, userId: number): void {
  console.log(`${userId}: ${message}`);
}

typeof LogParams = Parameters<typeof log>;

const params: LogParams = ["Hello, world!", 1];

log(...params);

 

Awaited<T>

async 함수는 promise를 반환하는데, promise의 반환값의 타입을 추론할 수 있다.

// string 타입의 데이터를 받아오는 비동기 함수
async function fetchData(): Promise<string> {
  return 'hello world';
}

// fetchData의 반환타입인 Promise에서 실행 완료 후 반환될 데이터의 타입을 추론할 수 있음
type FetchDataType = Awaited<ReturnType<typeof fetchData>>;

const data: FetchDataType = await fetchData();
console.log(data);  // hello world

 

 

유틸리티타입 활용 예시

하나의 base 타입으로 여러가지 타입 만들기

// base type
type Todo = {
  id: number;
  title: string;
  completed: boolean;
}

// base type 기반으로 기능에 맞는 타입 만들기
type TodoId = Pick<Todo, 'id'>;

type CreateTodo = Pick<Todo, 'title' | 'completed'>;
type CreateTodo = Omit<Todo, 'id'>;

type ToggleTodo = Pick<Todo, 'id' | 'completed'>;
type ToggleTodo = Omit<Todo, 'title'>;

type EditTodo = Partial<Todo> & TodoId;

 

함수를 기반으로 타입을 빼오기

라이브러리 등을 사용했을 때 함수의 반환값을 정확히 알지 못할 수 있다.

그럴 때 유틸리티타입을 활용해 반환값을 추론하면 더 빠르고 안전하게 개발을 진행할 수 있다.

async function exampleFunction(): Promise<number> {
  return new Promise((resolve) => {
    resolve(42);
  });
}