Q. 아래 세 타입의 차이점은?
type AvatarProps = {
src?: string;
};
type AvatarProps = {
src: string | undefined;
};
type AvatarProps = Partial<{
src: string;
}>;셋 다 똑같은 거 아니야? 라고 생각했다면 정독하자.
Optional vs Undefined
- Optional :
src라는 이름의 Prop이 없어도 된다.src를 전달하지 않으면 undefined가 할당된다. - Undefined :
src라는 이름의 Prop은 반드시 있어야 한다. 다만, undefined일 수 있다.
하나의 예시로,
type AvatarProps = {
src: string | undefined;
};
<Avatar src={undefined} /> // ✅ Works
<Avatar /> // 💥 Error하지만 하나 애매한 것이,
type AvatarProps = {
src?: string;
}
<Avatar /> // ✅ Works
<Avatar src={undefined} /> // ✅ Why works??exactOptionalPropertyTypes
Ref. TypeScript 공식문서, 'exactOptionalPropertyTypes'
tsconfig에서 해당 속성을 켜면 src?: string → src?: string | undefined 타입 변경을 막는다.
정리하자면,
- Optional 타입에 Prop 뺐을 때 undefined가 할당되는 것 : 기능
- Optional 타입을 Undefined 타입처럼 사용 : 돌아가긴 함.
exactOptionalPropertyTypes로 제한 가능 - Undefined 타입을 Optional 타입처럼 사용 : 에러
Partial
type Partial<T> = {
[P in keyof T]?: T[P];
};예를 들어,
type Person = {
name: string;
age: number;
location: string;
};
type PartialPerson = Partial<Person>;PartialPerson은 이렇게 된다. (exactOptionalPropertyTypes를 켠다면)
type PartialPerson = {
name?: string;
age?: number;
location?: string;
};설정을 켜지 않고 가만히 있으면 이렇게 된다.
type PartialPerson = {
name?: string | undefined;
age?: number | undefined;
location?: string | undefined;
};