[TypeScript] 다른 곳에서 쓰인 타입 가져오기

타입스크립트로 개발을 하다보면 타입을 항상 일일히 정해주는 것 보다는 다른 곳에서 쓰인 걸 그대로 들고오는게 더 안정적이고 덜 귀찮다. 그럴 때 자주 쓰는 Utility Types를 간단하게 정리해봤다.

Parameters

Parameters는 함수의 파라미터 타입을 배열 형태로 가져오는 유틸 타입이다.

const func = (a: number, b: string) => console.log(a, b)

// func 라는 함수의 첫번째 파라미터의 타입을 가져옴
// type FirstParams = number
type FirstParams = Parameters<typeof func>[0]
                              
// func 라는 함수의 두번째 파라미터의 타입을 가져옴
// type SecondParams = string
type SecondParams = Parameters<typeof func>[1]

ReturnType

ReturnType은 말그대로 함수의 리턴 타입을 가져오는 유틸 타입이다.

const func = (a: number, b: number) => a + b 

// func 라는 함수의 리턴 타입을 가져옴
// type Sum = number
type Sum = ReturnType<typeof func>

React.ComponentProps

리액트를 사용하는 경우, ComponentProps를 사용해 특정 컴포넌트의 props 타입을 가져올 수 있다.

import { ComponentProps } from 'react'
import { Link } from 'react-router-dom'

// Link 컴포넌트의 onClick prop의 타입을 가져옴
// type LinkProps = ((event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined
type OnClick = ComponentProps<typeof Link>['onClick']