관리 메뉴

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,
}

 

 

 

 

 

 

 

반응형