<div id="readability-page-1" class="page"><div><h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#exclude">exclude</a>
<ul>
<li><a href="#extends">extends</a></li>
</ul>
</li>
<li><a href="#pick">pick</a></li>
<li><a href="#omit">Omit</a>
<ul>
<li><a href="#omit-%EA%B3%BC%EC%A0%95-%EB%8B%A4%EC%8B%9C%ED%95%9C%EB%B2%88-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0">Omit 과정 다시한번 살펴보기</a></li>
</ul>
</li>
</ul>
<h2 id="exclude">exclude</h2>
<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#excludeuniontype-excludedmembers">exclude</a>는 여러개의 타입이 함께 존재하는 유니언 타입에서 특정 타입을 제거하는 유틸리티 타입이다. <code>exclude</code>로 제거할 수 있는 것은 하나의 타입 부터 유니언 까지 가능하다.
<pre><code>type T0 = Exclude&lt;'a' | 'b' | 'c', 'a'&gt;
// type T0 = "b" | "c"
type T1 = Exclude&lt;'a' | 'b' | 'c', 'a' | 'b'&gt;
// type T1 = "c"
type T2 = Exclude&lt;string | number | (() =&gt; void), Function&gt;
// type T2 = string | number
</code></pre>
<a href="https://github.com/microsoft/TypeScript/blob/546a87fa31086d3323ba4843a634863debb75781/lib/lib.es5.d.ts#L1503-L1506">exclude의 동작방식</a>을 보면 다음과 같이 확인할 수 있다.
<pre><code>/**
 * Exclude from T those types that are assignable to U
 */
type Exclude&lt;T, U&gt; = T extends U ? never : T
</code></pre>
<h3 id="extends">extends</h3>
제네릭에서 사용되는 <code>T extends U</code>라는 키워드는 T가 U라는 타입인지 를 의미한다.
즉, 위 예시를 해석하면 다음과 같다.
<blockquote>
<code>T</code>가 <code>U</code>의 타입 이라면, <code>never</code> (빈 타입)을, 그렇지 않다면 <code>T</code> 그자체, 즉 원래대로 돌려준다
</blockquote>
<h2 id="pick">pick</h2>
<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys">pick</a>은 객체 타입에서, 넘겨받은 키에 해당하는 키만 리턴하는 새로운 객체 타입을 만들어준다.
<pre><code>interface Todo {
 title: string
 description: string
 completed: boolean
}

type TodoPreview = Pick&lt;Todo, 'title' | 'completed'&gt;

const todo: TodoPreview = {
 title: 'Clean room',
 completed: false,
}
</code></pre>
pick이 작동하기 위해서는, 먼저 객체에서 키를 뽑아서 해당 키를 제외해야 하므로, 객체 타입에서 키를 뽑는 법 부터 알아야 한다.
<pre><code>keyof Todo // "title" | "description" | "completed" | "createdAt"
</code></pre>
그 다음, 이 키에 해당 하는 객체 타입의 값만 뽑아 오면 될 것이다.
<pre><code>type Pick&lt;T, Key extends keyof T&gt; = {
 [NewKey in key]: T[key]
}
</code></pre>
작동방식을 확인하면 거의 유사하다는 것을 알 수 있다.
<blockquote>
<a href="https://github.com/microsoft/TypeScript/blob/546a87fa31086d3323ba4843a634863debb75781/lib/lib.es5.d.ts#L1489-L1494">타입스크립트 원본 코드 확인해보기</a>
</blockquote>
<h2 id="omit">Omit</h2>
<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys">omit</a> 은 객체 타입 (interface 등)에서 특정 키를 기준으로 생략하여 타입을 내려주는 유틸리티 타입이다.
<pre><code>interface Todo {
 title: string
 description: string
 completed: boolean
 createdAt: number
}

// description을 제외
type TodoPreview = Omit&lt;Todo, 'description'&gt;

const todo: TodoPreview = {
 title: 'Clean room',
 completed: false,
 createdAt: 1615544252770,
}
</code></pre>
마찬가지로 키를 먼저 뽑아온다.
<pre><code>type TodoKeys = keyof Todo // "title" | "description" | "completed" | "createdAt"
</code></pre>
그리고 이번에는 해당하는 값을 가져오는 것이 아니고, 제거를 해야한다. 여기서 부터 조금씩 복잡해지는데, 하나씩 해보자.
먼저 앞서 사용했던 <code>Pick</code>과 <code>Exclude</code>를 활용하여, <code>TODO</code>에서 <code>title</code>만 제거해보자.
<pre><code>type TodoWithoutTitle = Pick&lt;Todo, Exclude&lt;keyof Todo, 'title'&gt;&gt;
// type TodoWithoutTitle = {
// description: string;
// completed: boolean;
// createdAt: number;
// }
</code></pre>
이를 깔끔하게 제네릭으로 정리하면 다음과 같다.
<pre><code>type Omit&lt;T, K&gt; = Pick&lt;T, Exclude&lt;keyof T, K&gt;&gt;
</code></pre>
객체의 키로 <code>string</code>, <code>number</code>, <code>symbol</code>만 가능하기 때문에, 조금 아래와 같이 추가할 수도 있다.
<pre><code>type Omit&lt;T, K extends keyof string | number | symbol&gt; = Pick&lt;
 T,
 Exclude&lt;keyof T, K&gt;
&gt;
</code></pre>
<blockquote>
<a href="https://github.com/microsoft/TypeScript/blob/546a87fa31086d3323ba4843a634863debb75781/lib/lib.es5.d.ts#L1513-L1516">https://github.com/microsoft/TypeScript/blob/546a87fa31086d3323ba4843a634863debb75781/lib/lib.es5.d.ts#L1513-L1516</a>
뭔가 저건 과하다고 생각한건지 <code>any</code>로 퉁쳤다.
</blockquote>
<h3 id="omit-과정-다시한번-살펴보기">Omit 과정 다시한번 살펴보기</h3>
<pre><code>interface Todo {
 title: string
 description: string
 completed: boolean
 createdAt: number
}

type TodoWithoutTitle = Omit&lt;Todo, 'title'&gt;

type TodoWithoutTitle = Pick&lt;Todo, Exclude&lt;keyof Todo, 'title'&gt;&gt;

type TodoWithoutTitle = Pick&lt;
 Todo,
 Exclude&lt;'title' | ' description' | 'completed' | 'createdAt', 'title'&gt;
&gt;

type TodoWithoutTitle = Pick&lt;
 Todo,
 | ('title' extends 'title' ? never : 'title')
 | ('description' extends 'title' ? never : 'description')
 | ('completed' extends 'title' ? never : 'completed')
 | ('createdAt' extends 'title' ? never : 'createdAt')
&gt;

type TodoWithoutTitle = Pick&lt;
 Todo,
 never | 'description' | 'completed' | 'createdAt'
&gt;

type TodoWithoutTitle = {
 [Key in 'description' | 'completed' | 'createdAt']: User[Key]
}

type TodoWithoutTitle = {
 description: Todo['description']
 completed: Todo['completed']
 createdAt: Todo['createdAt']
}

type TodoWithoutTitle = {
 description: string
 completed: boolean
 createdAt: number
}
</code></pre></div></div>

yceffort

헬퍼 타입도 잘 알고 써야 도움이 된다

타입스크립트의 Omit은 어떻게 동작할까? Exclude, Pick 부터 알아보기

댓글