# Utility Types

앞서 배웠던 것들을 사용하여 재 사용 가능한 utility type 을 만들 수 있습니다. 직접 만들어 사용하는 것 도 좋지만, 자주 사용하는 것 들에 대해 typescript 는 내장 utility type 들을 제공해 줍니다.

이 섹션에서는 자주 사용하는 utility type 을 소개합니다.

### `Awaited<Type>` <a href="#awaitedtype" id="awaitedtype"></a>

> Released: [4.5](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#the-awaited-type-and-promise-improvements)

Promise 로 감싸져 있는 타입을 추출합니다.

**Example**

```typescript
type A = Awaited<Promise<string>>;    
// type A = string 
type B = Awaited<Promise<Promise<number>>>;    
//type B = number 
type C = Awaited<boolean | Promise<number>>;    
//type C = number | boolean
```

### `Partial<Type>` <a href="#partialtype" id="partialtype"></a>

> Released:\
> [2.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#partial-readonly-record-and-pick)

객체의 모든 속성이 optional 한 타입을 구성합니다.&#x20;

**Example**

```typescript
interface Todo {
  title: string;
  description: string;
} 

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
} 
const todo1 = {
  title: "organize desk",
  description: "clear clutter",
}; 

const todo2 = updateTodo(todo1, {  description: "throw out trash",});
```

### `Required<Type>` <a href="#requiredtype" id="requiredtype"></a>

> Released:\
> [2.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#improved-control-over-mapped-type-modifiers)

[`Partial`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype) 과 반대로 모든 속성이 required 한 타입을 구성합니다.

**Example**

```typescript
interface Props {
  a?: number;  
  b?: string;
} 

const obj: Props = { a: 5 }; 

const obj2: Required<Props> = { a: 5 }; //Error : Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.
```

### `Record<Keys, Type>` <a href="#recordkeys-type" id="recordkeys-type"></a>

> Released:\
> [2.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#partial-readonly-record-and-pick)

객체의 key 는 `Keys` value 는 `Type` 인 객체를 구성합니다.

**Example**

```typescript
interface CatInfo {
  age: number; 
  breed: string;
} 

type CatName = "miffy" | "boris" | "mordred"; 

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },  
  mordred: { age: 16, breed: "British Shorthair" },
}; 

```

### `Pick<Type, Keys>` <a href="#picktype-keys" id="picktype-keys"></a>

**Example**

`Type` 으로부터 `Keys` (property = string 또는 string 유니온) 로 선택된 객체를 구성합니다.

> Released:\
> [2.1](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#partial-readonly-record-and-pick)

```typescript
interface Todo {
  title: string;  
  description: string;  
  completed: boolean;
} 

type TodoPreview = Pick<Todo, "title" | "completed">; 

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
}; 
```

### `Omit<Type, Keys>` <a href="#omittype-keys" id="omittype-keys"></a>

> Released:\
> [3.5](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-5.html#the-omit-helper-type)

[`Pick`](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys) 과 반대로`Type` 으로부터 `Keys` (property or property 유니온) 가 제외된 객체를 구성합니다

**Example**

```typescript
interface Todo {
  title: string;
  description: string;  
  completed: boolean;  
  createdAt: number;
} 

type TodoPreview = Omit<Todo, "description">; 

const todo: TodoPreview = {
  title: "Clean room",  
  completed: false,  
  createdAt: 1615544252770,
}; 
```

### `Exclude<UnionType, ExcludedMembers>` <a href="#excludeuniontype-excludedmembers" id="excludeuniontype-excludedmembers"></a>

> Released:\
> [2.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#predefined-conditional-types)

&#x20;`UnionType` 으로 부터  `ExcludedMembers` 에 할당 가능한 모든 union 을 제외함으로써 구성 합니다.

&#x20;**Example**

<pre class="language-typescript"><code class="lang-typescript">type T0 = Exclude&#x3C;"a" | "b" | "c", "a">;     
<strong>// type T0 = "b" | "c"
</strong>type T1 = Exclude&#x3C;"a" | "b" | "c", "a" | "b">;     
// type T1 = "c"
type T2 = Exclude&#x3C;string | number | (() => void), Function>;     
// type T2 = string | number 

type Shape =  
| { kind: "circle"; radius: number }  
| { kind: "square"; x: number }  
| { kind: "triangle"; x: number; y: number }; 

type T3 = Exclude&#x3C;Shape, { kind: "circle" }>     

/**
* type T3 = {
    kind: "square";
    x: number;
} | {
    kind: "triangle";
    x: number;
    y: number;
}
*/
</code></pre>

### `Extract<Type, Union>` <a href="#extracttype-union" id="extracttype-union"></a>

> Released:\
> [2.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#predefined-conditional-types)

`Type` 으로부터 `Union`  에 할당 가능한 모든 유니온 맴버를 추출하여 구성합니다.

&#x20;**Example**

```typescript
type T0 = Extract<"a" | "b" | "c", "a" | "f">;     
// type T0 = "a"
type T1 = Extract<string | number | (() => void), Function>;     
// type T1 = () => void 

type Shape =  
| { kind: "circle"; radius: number }  
| { kind: "square"; x: number }  
| { kind: "triangle"; x: number; y: number }; 

type T2 = Extract<Shape, { kind: "circle" }>     
/**
type T2 = {
    kind: "circle";
    radius: number;
}
*/
```

### `NonNullable<Type>` <a href="#nonnullabletype" id="nonnullabletype"></a>

> Released:\
> [2.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#predefined-conditional-types)

`Type` **으로 부터** `null` 과 `undefined`  를 제외하여 타입을 구성합니다.

**xample**

```
type T0 = NonNullable<string | number | undefined>;     type T0 = string | numbertype T1 = NonNullable<string[] | null | undefined>;     type T1 = string[]
```

### `Parameters<Type>` <a href="#parameterstype" id="parameterstype"></a>

> Released:\
> [3.1](https://github.com/microsoft/TypeScript/pull/26243)

&#x20;`Type` 에 넘겨진 함수의 매개변수에 사용된 type 으로부터 tuple 타입을 추출해서 사용합니다.

**Example**

```typescript
declare function f1(arg: { a: number; b: string }): void; 

type T0 = Parameters<() => string>;     
// type T0 = []

type T1 = Parameters<(s: string) => void>;     
// type T1 = [s: string]

type T2 = Parameters<<T>(arg: T) => T>;     
// type T2 = [arg: unknown]

type T3 = Parameters<typeof f1>;     
/**
type T3 = [arg: {
    a: number;
    b: string;
}]
*/
```

### `ReturnType<Type>` <a href="#returntypetype" id="returntypetype"></a>

> Released:\
> [2.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#predefined-conditional-types)

함수 `Type` 의 반환 타입으로 구성합니다.

**Example**

<pre class="language-typescript"><code class="lang-typescript">declare function f1(): { a: number; b: string }; 

type T0 = ReturnType&#x3C;() => string>;     
<strong>// type T0 = string
</strong>type T1 = ReturnType&#x3C;(s: string) => void>;     
// type T1 = void
type T2 = ReturnType&#x3C;&#x3C;T>() => T>;     
// type T2 = unknown
type T3 = ReturnType&#x3C;&#x3C;T extends number[]>() => T>;     
// type T3 = number[]
type T4 = ReturnType&#x3C;typeof f1>;
/**     
type T4 = {
    a: number;
    b: string;
}
*/
</code></pre>