<pre><code class="lang-typescript">// union type with null
type Product1 = {
 name: string;
 bestBeforeDate: Date | null;
}

// optional type 
type Product2 = {
 name: string;
 bestBeforeDate?: Date;
}
</code></pre>
<h3 id="heading-union-type">union type</h3>
<ul>
<li><code>null</code> 타입을 추가하면, 명시적으로 <code>null</code> 타입을 가질 수 있음을 나타낸다.</li>
</ul>
<h3 id="heading-optional-type">optional type</h3>
<ul>
<li>프로퍼티가 필수가 아닐 때 사용된다.
</li>
<li>프로퍼티가 없는 경우 <code>null</code>이 아니라 <code>undefined</code> 타입을 가진다.
</li>
<li>optional 프로퍼티는 <code>null</code> 값을 가질 수 없다.
</li>
</ul>

```typescript
// union type with null
type Product1 = {
  name: string;
  bestBeforeDate: Date | null;
}

// optional type 
type Product2 = {
  name: string;
  bestBeforeDate?: Date;
}
```

### union type

* `null` 타입을 추가하면, 명시적으로 `null` 타입을 가질 수 있음을 나타낸다.
    

### optional type

* 프로퍼티가 필수가 아닐 때 사용된다.
    
* 프로퍼티가 없는 경우 `null`이 아니라 `undefined` 타입을 가진다.
    
* optional 프로퍼티는 `null` 값을 가질 수 없다.

union type with null vs optional type

union type

optional type