일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 2주 프로젝트
- 손에 익히며 배우는 네트워크 첫걸음
- 타입스크립트 올인원
- 코드스테이츠
- Async
- 토익
- 파이썬
- 제로초
- 자바스크립트
- 리트코드
- 알고리즘
- LeetCode
- 프로그래머스
- javascript
- 4주 프로젝트
- 렛츠기릿 자바스크립트
- 회고
- js
- programmers
- 타입스크립트
- python
- 리액트
- SQL 고득점 Kit
- 정재남
- 백준
- 리덕스
- til
- codestates
- 코어 자바스크립트
- 타임어택
Archives
- Today
- Total
Jerry
[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part3. Utility Types- (18) : Partial 타입 분석 본문
Front/Typescript
[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part3. Utility Types- (18) : Partial 타입 분석
juicyjerry 2024. 3. 4. 22:14반응형
Partial 타입 분석
아래와 같은 코드가 있다.
Profile이란 객체 타입과 해당 타입인 객체 변수가 존재한다.
interface Profile {
name: string,
age: number,
married: boolean
}
const zerocho: Profile = {
name: 'zerocho',
age: 29,
married: false,
}
해당 객체 타입을 잘 쓰다 어느날 해당 속성 중 married 속성이 필요 없어도 된다고 했을 경우,
아래처럼 새로 객체를 만들거나
const newZeroCho: Profile = {
name: 'zerocho',
age: 29,
}
새롭게 인터페이스를 정의를 추가해 사용할 수 있지만, 중복되는 코드가 발생
interface NewProfile {
name: string,
age: number,
}
const newZeroCho: NewProfile = {
name: 'zerocho',
age: 29,
}
이럴 때, Partial 유틸리티 사용 -> 모든 속성 옵셔널로 변경시킴
const newZeroCho: Partial<Profile> = {
name: 'zerocho',
age: 29,
}
Partial를 똑같이 만들어보기
// 인덱스 시그니처
type P<T> = {
[key: string]: string;
}
// 맵드 타입스
type P<T> = {
[key in keyof T]: string;
}
type Name = 'Human' | 'Animal'; // 유니온
type P<T> = {
[key in keyof Name]: string; // 이 객체는 Human 또는 Aniaml이 됨
}
인덱스 시그니처(Index Signatures)와 맵드 타입스(Mapped Types)는
1) 타입스크립트에서 객체 타입 선언 시 사용
2) 유연한 타입 선언으로 코드 재사용성과 유지 보수성 향상
인덱스 시그니처는 객체의 모든 프로퍼티가 같은 타입을 가져야 할 때 사용
사전에 프로퍼티 이름을 알 수 없거나, 객체가 동적으로 프로퍼티를 추가할 수 있을 때 유용
맵드 타입스는 기존의 타입을 기반으로 새로운 타입을 만들어내는 기능
기존 타입의 프로퍼티를 반복하여 새로운 타입을 생성할 수 있
Profile의 속성 모두 옵셔널로 바뀜 But, 값도 속성에 맞지 않음
type P<T> = {
[key in keyof Profile]?: string;
}
type Name = Profile['name']; // 이 방식을 응용
type P<T> = {
[key in keyof T]?: T[key];
}
위 코드로 풀어서 해석한다면,
키들을 모두 꺼내고, 각 속성의 타입들을 명시 -> P는 Partial과 동일
P<Profile>
{
name?: string,
age?: number,
married: boolean,
}
반응형