typescript ?(Optional Parameters)와 | undefined(Union)의 차이

Typescript 하면서 undefined를 지정하는 방법은 2가지가 있다.

// Optional Parameters로 지정하는 방법
interface Fruit {
    cost?: number
}

// Union으로 지정하는 방법
interface Fruit {
    cost: number | undefined
}

2개의 방법 중에서 한 가지 차이점이 존재한다. union으로 지정했을 때는 속성이 존재해야하고, optional parameters로 지정했을 때는 속성을 정의해주지 않아도 된다. 

 

Union으로 정의를 했다면 다음과 같이 사용하면 에러가 발생한다.

// Union으로 지정하는 방법
interface Fruit {
    cost: number | undefined
}

// Property 'cost' is missing in type '{}' but required in type 'Fruit'.
const x: Fruit = {};

// Good!
const x: Fruit = { cost: undefined };

 

Optional Parameters로 정의했다면 다음과 같이 사용할 수 있다.

// Optional Parameters 지정하는 방법
interface Fruit {
    cost?: number
}

// Good!
const x: Fruit = {};

// Good!
const x: Fruit = { cost: undefined };

 

Reference

https://stackoverflow.com/questions/64655681/whats-the-difference-between-and-undefined-in-typescript