반응형
타입스크립트를 이용하여 인터페이스를 확장하는 방법은 여러가지가 있다.
api를 통해서 데이터를 받을 때, 필요한 데이터 타입은 number일지라도 넘어오는 데이터 타입은 string인 경우가 있다.
인터페이스는 number로 선언했을때 이를 확장하여 string으로 바꿔주는 ResponseTodo 타입을 새로 선언해야한다면, 그냥 인터페이스를 똑같이 작성하면 된다.
interface Todo {
seq: number
title: string
description: string
}
interface ResponseTodo {
seq: string
title: string
description: string
}
하지만 위의 방법은 중복이 심해진다.
이럴 때 유틸리티 타입이 도움이 된다.
일단 요약하자면 다음과 같다.
- 프로퍼티 전체에 optional(=undefined) 조건을 바꾼 타입이 필요한 경우
- Partial<Type> : 프로퍼티들이 optional하게 변경된 타입을 생성한다.
- Required<Type> : 프로퍼티들이 required하게 변경된 타입을 생성한다.
- 특정 프로퍼티들만 선택하여 타입을 새로 만들고 싶은 경우
- Pick<Type, Keys> : 원하는 프로퍼티만 가진 타입을 생성한다.
- Omit<Type, Keys> : 원하는 프로퍼티를 제외한 타입을 생성한다.
- 특정 프로퍼티를 선택/제외 하고 싶은 경우
- Extract<Type, PropertyTypes> : 해당 타입들을 가진 프로퍼티들만 이용해서 타입을 생성한다.
- Exclude<Type, PropertyTypes> : 해당 타입들을 가진 프로퍼티들을 제외한 나머지 프로퍼티들로 타입을 생성한다.
- 그 외
- ReturnType<Type> : 특정 함수의 리턴타입을 가져오고 싶을 때 사용한다. 제네릭에는 함수가 들어간다.
- Awaited<Type> : Promise로 감싸진 함수,변수의 리턴 타입을 가져오고 싶을 때 사용한다. Promise를 제거해준다.
- Readonly<Type> : 해당 타입의 프로퍼티들이 readonly 속성을 갖게 된다.
- Record<Keys, Type> : 해당하는 key들의 값의 타입이 Type이 된다.
- NonNullable<Type> : 타입에서 null, undefined를 제거해준다.
Parameters<typeof 함수> // 파라미터가 배열로 리턴됨
반응형
'Language > JavaScript' 카테고리의 다른 글
[React] 렌더링이 두번 될 경우 (api 호출이 두번 될 경우) (0) | 2022.04.30 |
---|---|
arr.push를 콜백함수로 사용한다면? (0) | 2022.03.22 |
[Javascript] Proxy 와 Reflect (0) | 2022.02.11 |
[Javascript] 클린 코드 - if문, switch문을 object로 리팩토링하기 (0) | 2022.01.18 |
vite 절대경로 설정하는 법 (0) | 2022.01.17 |