## Table of Contents

## exclude

[exclude](https://www.typescriptlang.org/docs/handbook/utility-types.html#excludeuniontype-excludedmembers)는 여러개의 타입이 함께 존재하는 유니언 타입에서 특정 타입을 제거하는 유틸리티 타입이다. `exclude`로 제거할 수 있는 것은 하나의 타입 부터 유니언 까지 가능하다.

```typescript
type T0 = Exclude<'a' | 'b' | 'c', 'a'>
// type T0 = "b" | "c"
type T1 = Exclude<'a' | 'b' | 'c', 'a' | 'b'>
// type T1 = "c"
type T2 = Exclude<string | number | (() => void), Function>
// type T2 = string | number
```

[exclude의 동작방식](https://github.com/microsoft/TypeScript/blob/546a87fa31086d3323ba4843a634863debb75781/lib/lib.es5.d.ts#L1503-L1506)을 보면 다음과 같이 확인할 수 있다.

```typescript
/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T
```

### extends

제네릭에서 사용되는 `T extends U`라는 키워드는 **T가 U라는 타입인지** 를 의미한다.

즉, 위 예시를 해석하면 다음과 같다.

> `T`가 `U`의 타입 이라면, `never` (빈 타입)을, 그렇지 않다면 `T` 그자체, 즉 원래대로 돌려준다

## pick

[pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys)은 객체 타입에서, 넘겨받은 키에 해당하는 키만 리턴하는 새로운 객체 타입을 만들어준다.

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

type TodoPreview = Pick<Todo, 'title' | 'completed'>

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

pick이 작동하기 위해서는, 먼저 객체에서 키를 뽑아서 해당 키를 제외해야 하므로, 객체 타입에서 키를 뽑는 법 부터 알아야 한다.

```typescript
keyof Todo // "title" | "description" | "completed" | "createdAt"
```

그 다음, 이 키에 해당 하는 객체 타입의 값만 뽑아 오면 될 것이다.

```typescript
type Pick<T, Key extends keyof T> = {
  [NewKey in key]: T[key]
}
```

작동방식을 확인하면 거의 유사하다는 것을 알 수 있다.

> [타입스크립트 원본 코드 확인해보기](https://github.com/microsoft/TypeScript/blob/546a87fa31086d3323ba4843a634863debb75781/lib/lib.es5.d.ts#L1489-L1494)

## Omit

[omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys) 은 객체 타입 (interface 등)에서 특정 키를 기준으로 생략하여 타입을 내려주는 유틸리티 타입이다.

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

// description을 제외
type TodoPreview = Omit<Todo, 'description'>

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

마찬가지로 키를 먼저 뽑아온다.

```typescript
type TodoKeys = keyof Todo // "title" | "description" | "completed" | "createdAt"
```

그리고 이번에는 해당하는 값을 가져오는 것이 아니고, 제거를 해야한다. 여기서 부터 조금씩 복잡해지는데, 하나씩 해보자.

먼저 앞서 사용했던 `Pick`과 `Exclude`를 활용하여, `TODO`에서 `title`만 제거해보자.

```typescript
type TodoWithoutTitle = Pick<Todo, Exclude<keyof Todo, 'title'>>
// type TodoWithoutTitle = {
//     description: string;
//     completed: boolean;
//     createdAt: number;
// }
```

이를 깔끔하게 제네릭으로 정리하면 다음과 같다.

```typescript
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
```

객체의 키로 `string`, `number`, `symbol`만 가능하기 때문에, 조금 아래와 같이 추가할 수도 있다.

```typescript
type Omit<T, K extends keyof string | number | symbol> = Pick<
  T,
  Exclude<keyof T, K>
>
```

> https://github.com/microsoft/TypeScript/blob/546a87fa31086d3323ba4843a634863debb75781/lib/lib.es5.d.ts#L1513-L1516
> 뭔가 저건 과하다고 생각한건지 `any`로 퉁쳤다.

### Omit 과정 다시한번 살펴보기

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

type TodoWithoutTitle = Omit<Todo, 'title'>

type TodoWithoutTitle = Pick<Todo, Exclude<keyof Todo, 'title'>>

type TodoWithoutTitle = Pick<
  Todo,
  Exclude<'title' | ' description' | 'completed' | 'createdAt', 'title'>
>

type TodoWithoutTitle = Pick<
  Todo,
  | ('title' extends 'title' ? never : 'title')
  | ('description' extends 'title' ? never : 'description')
  | ('completed' extends 'title' ? never : 'completed')
  | ('createdAt' extends 'title' ? never : 'createdAt')
>

type TodoWithoutTitle = Pick<
  Todo,
  never | 'description' | 'completed' | 'createdAt'
>

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
}
```


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

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

## Table of Contents

## Introduction

자바스크립트의 경우를 먼저 생각해보자. 자바스크립트는 함수에 넘기는 인수를 다른 타입으로 하거나, 혹은 다른 위치에 넣는 등 함수가 넘겨받는 인수의 구조를 유연하게 작성할 수 있다. 아래 실제 api를 살펴보자.

- [node.js의 filehandle.write](https://nodejs.org/api/fs.html#filehandlewritebuffer-offset-length-position)
  - `filehandle.write(buffer)`
  - `filehandle.write(string)`
- [node-postgress](https://node-postgres.com/features/queries)의 쿼리
  - `client.query('query', (err, res) => ...)`
  - `client.query('query', ['value1', value2'] (err, res) => ...)`

이런 함수의 다향성을 쉽게 타이핑하기 위해서는 어떻게 해야할까?

## `Union`

`Union` 타입을 쓰는 것은 다른 타입의 인수를 허용하는 함수를 작성할 때 가장 먼저 떠오르는 방법일 것이다.

```typescript
declare function foo(a: string | number)
```

여기서 `a`는 `string` `number` 둘다 될 수 있으므로, 다양한 타입의 인수가 필요하다면 `Union`을 쓰는 것은 적절해보인다. 그리고 내부에 타입 가드 함수를 추가하여 함수 내부에서 적절하게 필요한 타입을 좁힐 수 있다.

```typescript
function foo(a: string | number) {
  if (typeof a === 'string') {
    // do something...
  }

  if (typeof a === 'number') {
    // do something...
  }
}
```

그렇다면, 리턴 타입이 인수가 어떤 타입이느냐에 따라 달라진다고 가정해보자. 그렇다면 어떻게 타이핑하는 것이 좋을까? 여기에서는 제네릭 타입을 이용하여 인수를 타이핑 하는 것이 좋을 것이다. 그리고 이를 올바른 리턴 값에 따라 조건부로 타이핑 하면 될 것이다.

이러한 문제를 한번 예시로 들어보자. `int`라고 하는 인수가 온다면 랜덤한 숫자를, `char`라는 인수가 온다면 랜덤한 글자를 반환하는 함수를 작성해보자. 먼저 자바스크립트다.

```typescript
function getRandom(str) {
  if (str === 'int') {
    // generate a random integer
    return Math.floor(Math.random() * 10)
  } else {
    // generate a random char
    return String.fromCharCode(97 + Math.floor(Math.random() * 26))
  }
}
```

이를 타입스크립트에서 적절하게 타이핑 하기 위해서는, 아래와 같은 순서로 작업을 해야 한다.

- 먼저 `str`이 `"int" | "char"`와 같은 유니언 타입으로 선언하고, 리턴 타입을 이에 의존하도록 해야 한다. 이를 위해서는, 우리는 제네릭 타입을 사용해야 한다.
- 앞서 만든 제네릭 조건부 타입을 `GetReturnType` 이라 불리는 타입에 넘겨주어, `T`에 따라 올바른 리턴 타입이 올 수 있도록 해야 한다.

위 두 조건을 구현한 식이다.

```typescript
type GetReturnType<T> = T extends 'char' ? string : T extends 'int' ? number : never

function getRandom<T extends'char' | 'int'>(str: T): GetReturnType<T> {
  if (str === 'int') {
    // generate a random number
    return Math.floor(Math.random() * 10) as GetReturnType<T>
  } else {
    // generate a random char
    return String.fromCharCode(97+Math.floor(Math.random() * 26)) as GetReturnType<T>
}
```

이제, 여기서 한단계 더 뇌절해서 랜덤 `boolean`도 지원한다고 가정해보자.

```typescript
type GetReturnType<T> = T extends 'char'
  ? string
  : T extends 'int'
  ? number
  : T extends 'bool'
  ? boolean
  : never

function getRandom<T extends 'char' | 'int' | 'bool'>(
  str: T,
): GetReturnType<T> {
  if (str === 'int') {
    // generate a random number
    return Math.floor(Math.random() * 10) as GetReturnType<T>
  } else if (str === 'char') {
    // generate a random char
    return String.fromCharCode(
      97 + Math.floor(Math.random() * 26),
    ) as GetReturnType<T>
  } else {
    // generate a random boolean
    return Boolean(Math.round(Math.random())) as GetReturnType<T>
  }
}
```

위 코드에서 볼 수 있듯이, 타입이 하나씩 함수에 추가될 때 마다 확장하는 과정이 부담스러운 것을 볼 수 있다. 다행이도, 이러한 과정은 제네릭 타입을 받는 대신에 아래처럼 객체 타입으로 하면 좀더 쉬워 진다.

```typescript
type ReturnTypeByInputType = {
  int: number
  char: string
  bool: boolean
}

function getRandom<T extends 'char' | 'int' | 'bool'>(
  str: T,
): ReturnTypeByInputType[T] {
  if (str === 'int') {
    // generate a random number
    return Math.floor(Math.random() * 10) as ReturnTypeByInputType[T]
  } else if (str === 'char') {
    // generate a random char
    return String.fromCharCode(
      97 + Math.floor(Math.random() * 26),
    ) as ReturnTypeByInputType[T]
  } else {
    // generate a random boolean
    return Boolean(Math.round(Math.random())) as ReturnTypeByInputType[T]
  }
}
```

`document.querySelector`를 생각해보자. 이 함수는 여러가지 다양한 태그명을 인수로 받고, 그에 맞는 요소를 리턴한다. [타입스크립트의 `lib.dom.d.ts`를 보면 이러한 구현 내용](https://github.com/microsoft/TypeScript/blob/ca00b3248b1af2263d0223d68e792b7ca39abcab/lib/lib.dom.d.ts#L11050-L11052)을 볼 수 있다.

### 그런데 타입 단언은 왜 필요할까?

위 코드를 보면 거추장스럽게 모든 리턴문에 `as ReturnTypeByInputType[T]`가 붙어 있는 것을 볼 수 있다. 이는 타입스크립트 3.5 부터 추가된 리턴 값에 https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html (여기에서는 `as ReturnTypeByInputType[T]`)를 주기 위해서다. 해당 인덱스에서 선택한 속성 (타입)의 모든 가능한 intersection에 대해서 리턴 타입을 체크해야 하기 때문이다. 위 예제에서는, 리턴 값이 `ReturnTypeByInputType[T]` 모두를 만족하거나, `number & string & boolean`을 모두 만족하는 intersection 타입을 넘겨주거나 (그런 타입은 `never` 뿐이다) 해야 한다. 양쪽 두 조건을 모두 만족하는 것은 `never` 뿐이므로, `as never`로 작성해도 작동한다.

타입 단언은 본질적으로 안전하지 않은 방식이다. 이를 함수 오버로딩으로 해결하는 방식도 있다. 그러나 두개다 사실 그정도로 안전하지는 않다.

## 옵셔널 파라미터

옵셔널 파라미터 또한 매우 일반적인 방식으로, 파라미터를 정의하여 사용할 수 있으며, 정의 되지 않은 파라미터에 대해서는 검사할 필요도 없다.

타입스크립트에서는, `?`를 사용하면 된다.

```typescript
declare function foo(a: string, b?: boolean)
```

여기에서는 결과적으로, `b`는 `boolean | undefined` 형태의 union 타입이 된다.

이러한 옵셔널 파라미터의 제공 여부에 따라서 다른 유형의 값을 리턴하는 패턴도 일반적으로 볼 수 있다.

검색 결과를 비동기로 가져오는 `search` 함수가 있다고 가정해보자. 이 함수는 콜백 함수를 인수로 받는다. 이 콜백 인수가 있으면, 검색 결과를 콜백 함수로 전달한다. 그렇지 않으면 검색 결과를 확인 할 수 있는 `Promise`를 반환한다.

```javascript
function search(query, cb) {
  const res = api(query)
  if (cb) {
    res.then((data) => cb(data))
    return
  }

  return res
}

const p = search('foo') // return a promise
const v = search('foo', (data) => {}) // void
```

타입스크립트에서는, 이 함수를 다음과 같은 과정으로 타이핑 할 수 있다.

- `cb`를 `?`와 함께 옵셔널 파라미터로 지정한다.
- `cb` 의 타입을 제네릭으로 타이핑 한다.
- `extends` 키워드를 사용하여 올바른 타입으로 타이핑 한다.

```typescript
type Callback = (results: Result[]) => void

function search<T extends Callback | undefined = undefined>(
  query: string,
  cb?: T,
): T extends Callback ? void : Promise<Result[]> {
  const res = api(query)

  if (cb) {
    res.then((data) => cb(data))
    return undefined as void & Promise<Result[]>
  }

  return res as void & Promise<Result[]>
}

const p = search('key') // ✅ Promise<Result[]>
const v = search('key', (data) => {}) // ✅ void
```

여기서 확인할 수 있는 사실은 다음과 같다.

- `extends` 라고 하는 조건부 표현을 사용하여 올바른 리턴타입을 정의 했다.
- 타입 단언이 역시나 필요하다.

여기도 타입단언이 추가되면서 꽤나 복잡해졌다. 만약 복잡한 다형성 함수가 필요하다면, 더 나은 다음의 대안을 쓰는게 좋을 수도 있다.

## 함수 오버로드

타입스크립트는 함수 오버로드를 지원하고 있다. 이 타입스크립트의 함수 오버로드는 1.1 부터 볼 수 있던 오래된 기능이다. 그러나 타입스크립트 초기 개발 중에 추가된 다른 기능들과는 다르게, (enum 등) 이 오버로드 기능은 잘 쓰이지 않는 경향이 있다.

아마도 함수 오버로드를 잘 사용하지 않는 이유는 자바스크립트 개발자들에게는 조금 낯선 개념이라 그런게 아닐까 싶다. 자바스크립트에서는, 함수 오버로드가 없다. 자바스크립트는 특정 스코프에서는 특정한 명칭을 가진 하나의 함수만 존재할 수 있다.

그러나 동적 타입 언어세너는, 자바스크립트의 타입 체크가 런타임 중에 일어난다. 이 말은 함수의 인수를 동적으로 우리가 필요한 만큼 가질 수 있으며, 이는 마치 함수 오버로드와 같이 동작한다는 것이다.

### 함수 오버로딩 구현하기

인수가 숫자라면 이를 문자로, 반대로 문자라면 숫자로 리턴하는 함수를 구현한다고 가정해보자. 자바스크립트에서는 아마 이렇게 구현할 것이다.

```typescript
function switchIt(input) {
  if (typeof input === 'string') return Number(input)
  else return String(input)
}
```

이를 앞선 예제와 같은 형식으로 타입스크립트에서 구현한다면 이렇게 될 것이다.

```typescript
function switchIt<T extends string | number>(
  input: T,
): T extends string ? number : string {
  if (typeof input === 'string') {
    return Number(input) as string & number
  } else {
    return String(input) as string & number
  }
}

const num = switchIt('1') // has type number ✅
const str = switchIt(1) // has type string ✅
```

이것을 함수 오버로딩 방식으로 타이핑 할 것이다.

- 먼저 두개의 다른 시그니쳐를 만든다.
- 오버로드한 함수의 구현부를 작성한다.
  - 유니언 타입으로 각 인수의 타입을 받는다.
  - 함수 내부에서는, 타입 가드를 사용하여 적절한 처리를 추가한다.

```typescript
function switchIt_overloaded(input: string): number
function switchIt_overloaded(input: number): string
function switchIt_overloaded(input: number | string): number | string {
  if (typeof input === 'string') {
    return Number(input)
  } else {
    return String(input)
  }
}
```

함수 오버로드를 사용하여,

- 제네릭과 조건부 타입을 제거
- 타입 단언 제거

이 덕분에

- 가독성 향상. 오버로드한 함수가 어떤 타입이 올 수 있는지 명확하게 구별할 수 있다. 또한 인수의 타입과 그에 따른 리턴 타입이 명확하게 분리되어 있다.
- IDE가 오버로드 함수를 더욱 잘 지원할 수 있게 된다.

### 좀더 복잡한 예제

방금 전에 만들었던 검색 함수 예제를 떠올려 보자. 이를 함수 오버로딩으로 구현하면 다음과 같이 처리할 수 있다.

```typescript
type Callback = (results: Result[]) => void

function search_overloaded(term: string): Promise<Result[]>
function search_overloaded(term: string, cb: Callback): void
function search_overloaded(
  term: string,
  cb?: Callback,
): void | Promise<Result[]> {
  const res = api(term)

  if (cb) {
    res.then((data) => cb(data))
    return
  }

  return res
}

const p = search_overloaded('key') // ✅ Promise<Result[]>
const v = search_overloaded('key', (data) => {}) // ✅ void
```

### 이것도 안전하지 않기는 마찬가지

타입 단언은 종종 좋지 않은 코드 (code smell)로 간주되며, 이를 함수 오버로드로 제거하는 것은 좋아보일 수도 있다. 그러나 이것 또한 안전하지 않은 건 매한가지다.

```typescript
function switch_overloaded(input: string): number
function switch_overloaded(input: number): string
function switch_overloaded(input: number | string): number | string {
  if (typeof input === 'string') {
    return input // 그냥 string 리턴함
  } else {
    return input // 그냥 숫자 리턴함
  }
}

const num = switch_overloaded('1') // ❌ ????
const str = switch_overloaded(1) // ❌ ????
```

> [typescript playground에서 보기](https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABAZwO4yhAFgfTgNwFMAnAGzgEMATQqgChjAAcQoAuFKYxgcwEoOYEAFsARiQBQoSLAQp0mXARLlqtBs1aCR44gM7cwPKeGjwkaDNjxEylGvUYt2iIWJKIAPgd763urx8jRABvCUQIiJhgRDooAE8mQjgYp1ZEAF4sxAByZC5eHL5Q8Miy4kIoEGIkNKhEAHoGxEAP2sBThqCeREAazsAWRcALVdKIgF9EQlJkQhKy8srq2s16ptaOwGohwATxnoGhxFGJYYkJCAR81xFM+SslW1UHOhyARiLG5sAZcjPhPMQEpMQYZA+AVE6QwfwBFGgIAopFI8UQFE6RxO9XyxAulkUNhU9nUD2Ky3eqK+Pym-06iGB9VBZIhVWhsPhgJIQA)

읭? 올바르지 않은 타입을 리턴해버렸음에도 에러가 나지 않는다. 타입스크립트 컴파일러는 함수 본체의 코드 (오버로드 된)의 함수 시그니처와 대조할 뿐이지, 분기 문에서 어떻게 오버로드를 다루는지는 알 수 없다. 결과적으로, 오버로드 함수 시그니처와 모순된 내부 코드를 작성할 수 있는 위험성이 존재한다.

### 사실 함수 오버로드도 함수타입의 intersection 일 뿐...

함수 오버로드는 intersection 함수 타입에 대한 단지 문법적 설탕일 뿐이다.

```typescript
function switchIt(input: string): number
function switchIt(input: number): string
```

이는 사실 아래와 같다.

```typescript
type F = ((input: string) => number) & ((input: number) => string)

const switchIt_intersection: F = (input) => {
  if (typeof input === 'string') {
    return Number(input)
  } else {
    return String(input)
  }
}

const num = switchIt_intersection(1) // ✅
const str = switchIt_intersection('1') // ✅
```

마찬가지로, `F`도 객체 타입(인터페이스) 형태로 작성할 수도 있다.

```typescript
interface F {
  (input: number): string
  (input: string): number
}
```

## 정리

함수 오버로드를 사용하건, 조건부 타입을 활용한 제네릭 타입을 사용하건, 어떤 것을 사용하든지 이 선택에는 적절한 이유가 있어야 하고, 어느 것도 안전하지 않기 때문에 신중해야 한다.

- 함수의 인수가 여러개가 될 수 있는 경우, 함수 오버로드를 사용하는게 적절할 수 있다.
- 조건 타입에 따른 제네릭 타입은 인수가 리턴 타입에 영향을 미칠 때 적절하게 활용 가능하다. 매핑으로 구현하면 가독성이 눈에 띄게 향상되기 때문이다. 이를 함수 오버로드로 작성하면 매우 장황해질 수 있고, 읽는 사람으로 하여금 혼란을 야기할 수 있다.


mapped type과 오버로딩, 어떤걸 쓰는게 좋을까?

타입스크립트의 함수의 다형성

## Table of Contents

## `never`란 무엇인가

`never`가 무엇이고 왜 만들어졌는지 이해하기 위해서는, 먼저 타입시스템에서 `타입`이 무엇을 의미하는지 이해해야 한다.

타입은 가능한 값의 집합을 의미한다. 예를 들어서, `string`이라는 타입은 가능한 모든 문자열의 집합을 의미한다. 그러므로 변수에 `string`이라는 타입을 달아둔다는 것은, 이 변수에는 문자열만 할당할 수 있다는 것을 의미한다.

```typescript
let foo: string = 'bar'
foo = 3 // ❌ 3 은 문자열이 아님
```

타입스크립트에서 `never` 는 없는 값의 집합이다. 타입스크립트 이전에 인기가 있었던 flow에서는, 이와 동일한 역할을 하는 `empty`라고 하는 것이 존재한다.

이 집합에는 값이 없기 때문에, `never` 은 어떠한 값도 가질 수 없으며, 여기에는 `any` 타입에 해당하는 값들도 포함된다. 이러한 특징 때문에, `never` 는 `uninhabitable type` `bottom type` 이라고도 불린다.

> 이와 반대로, `top type`은 `unknown`이라고 정의 되어 있다.

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#other-important-typescript-types

## 왜 `never`가 필요한가?

숫자에서 아무것도 존재하지 않는 것을 표현하기 위해 0이 존재하는 것처럼, 타입 시스템에서도 그 어떤 것도 불가능하다는 것을 나타내는 타입이 필요하다.

여기서 `불가능` 이라는 뜻은 다음과 같은 것을 의미한다.

- 어떤 값도 가질 수 없는 빈 타입
  - 제네릭 및 함수에서 허용되지 않는 파라미터
  - 호환 되지 않는 타입 교차
  - 빈 유니언 타입 (유니언 했지만 아무것도 안되는 경우)
- 실행이 완료되면 caller에게 제어 권한을 반환하지 않는 (혹은 의도된) 함수의 반환 유형 (예: node의 `process.exit()`)
  - `void`와는 다르다. `void`는 함수가 caller에게 아무것도 리턴하지 않는 다는 것을 의미한다.
- rejected된 promise의 fulfill 값
  ```typescript
  const p = Promise.reject('foo') // const p: Promise<never>
  ```

## `never`가 `union`과 `intersection`에서 작동하는 방식

숫자 0 이 덧셈과 곱셈에서 작동하는 것과 비슷하게, `never` 타입도 `union`과 `intersection`에서 특별한 특징을 가지고 있다.

- 0을 덧셈하면 그 값이 그대로 오는 것 처럼, `never`도 union 타입에서는 drop되는 특징을 가지고 있다.

```typescript
type t = never | string // string
```

- 0을 곱셈하면 0이 되어버리는 것처럼, `never`을 intersection type으로 지정하면 `never`가 되어 버린다.

```typescript
type t = never & string // never
```

이러한 두가지 특징은 이후에 알게 될 주요 사례의 기반이 된다.

## `never` 타입은 어떻게 사용할 수 있을까

### 허용할 수 없는 함수 파라미터에 제한을 하는 방법

`never` 타입에는 값을 할당 할 수 없기 때문에, 함수에 올수 있는 다양한 파라미터에 제한을 거는 용도로 사용할 수 있다.

```typescript
// 이 함수는 never만 사용 가능하다.
function fn(input: never) {
  // do something...
}

declare let myNever: never
fn(myNever) // ✅

// never 이외에 다른 값은 타입 에러를 야기한다.
fn() // ❌
fn(1) // ❌
fn('foo') // ❌
declare let myAny: any
fn(myAny)
```

### `switch` `if-else` 문에서 일치 하지 않는 값이 오는 경우

함수가 `never` 타입만 인수로 받는 경우, 함수는 `never`외의 다른 값과 함께 실행 될 수 없다.

이러한 특징을 사용하여, `switch` 문과 `if-else` 문장 내부에서 철저한 일치를 보장할 수 있다.

```typescript
function unknownColor(x: never): never {
  throw new Error('unknown color')
}

type Color = 'red' | 'green' | 'blue'

function getColorName(c: Color): string {
  switch (c) {
    case 'red':
      return 'is red'
    case 'green':
      return 'is green'
    default:
      return unknownColor(c) // 그 외의 string으 불가능하다.
  }
}
```

### 부분적으로 구조적 타이핑을 허용하지 않는 방법

어떤 함수에서, `VariantA`와 `VariantB` 타입의 파라미터만 허용한다고 가정해보자. 하지만 그 이외에 이 두가지 타입의 속성을 모두 갖고 있는 파라미터 (두 타입의 서브타입)는 허용하지 않는 다고 가정해보자.

위와 같은 경우, `VariantA | VariantB` 와 같은 유니언 타입으로 선언할 수도 있다. 그러나 이 경우 타입스크립트는 구조적 타이핑을 기반으로 하고 있기 때문에, 원래 타입보다 더 많은 속성을 가진 객체 타입을 함수에 전달하는 것이 허용된다. (객체 리터럴 제외) 무슨 말인지 아래 예시에서 살펴보자.

```typescript
type VariantA = {
  a: string
}

type VariantB = {
  b: number
}

declare function fn(arg: VariantA | VariantB): void

const input = { a: 'foo', b: 123 }
fn(input) // 타입스크립트는 이 경우 아무런 에러를 내지 않는다.
```

이 경우, `never`를 사용한다면, 일부 구조 타이핑을 방지할 수 있으며, 사용자가 두가지 모든 속성을 가진 객체를 가져오는 것을 방지할 수 있다.

```typescript
type VariantA = {
  a: string
  b?: never
}

type VariantB = {
  b: number
  a?: never
}

declare function fn(arg: VariantA | VariantB): void

const input = { a: 'foo', b: 123 }
fn(input) // ❌ a는 never라서 안댐
```

### 의도하지 않은 api 사용 방지

```typescript
type Read = {}
type Write = {}
declare const toWrite: Write

declare class MyCache<T, R> {
  put(val: T): boolean
  get(): R
}

const cache = new MyCache<Write, Read>()
cache.put(toWrite) // ✅ generic type이기 때문에 가능
```

위 예제에서, `get` 메소드를 통해 데이터를 읽을 수 있는 읽기전용 캐시를 만들고자 한다. 여기 `put` 메소드에 `never`를 활용하면 이러한 코드를 방지할 수 있다.

```typescript
declare class ReadOnlyCache<R> extends MyCache<never, R> {}

const readonlyCache = new ReadOnlyCache<Read>()
readonlyCache.put(data) // ❌
```

### 이론적으로 이 조건부 분기문에 도달할 수 없음을 나타내는 경우

`infer`를 사용하여 조건 부 타입 내부에 또다른 타입을 변수를 만들 때, 모든 `infer` 키워드에 대해 다른 분기를 추가해야 한다.

```typescript
type A = 'foo'
type B = A extends infer C
  ? C extends 'foo'
    ? true
    : false // inside this expression, C represents A
  : never // 여기는 닿을 수가 없다.
```

### 유니언 유형에서 멤버를 필터링

불가능한 분기점을 나타내는 것 이외에도, 조건형 타입에서 원하지 않는 타입을 필터링하고 싶은 경우에도 사용 가능하다.

방금 살펴보았던 것 처럼, union 타입에서 자동으로 제거되지는 않는다. 이처럼 union 타입에서는 `never`는 무용 지물이다.

만약 특정 기준에 따라 union member를 결정하는 유틸리티 타입을 작성하고 싶다면, `never` 가 유용해질 수 있다.

`ExtractTypeByName` 이라고 하는 유틸리티 타입에서 `name` 속성이 `foo`인 멤버를 추출하고, 일치 하지 않는 멤버를 필터링한다고 가정해보자.

```typescript
type Foo = {
  name: 'foo'
  id: number
}

type Bar = {
  name: 'bar'
  id: number
}

type All = Foo | Bar

type ExtractTypeByName<T, G> = T extends { name: G } ? T : never

type ExtractedType = ExtractTypeByName<All, 'foo'> // the result type is Foo
// type ExtractedType = {
//     name: 'foo';
//     id: number;
// }
```

위 타입이 실행되는 순서는 아래와 같다.

```typescript
type ExtractedType = ExtractTypeByName<All, Name>
type ExtractedType = ExtractTypeByName<Foo | Bar, 'foo'>
type ExtractedType =
  | ExtractTypeByName<Foo, 'foo'>
  | ExtractTypeByName<Bar, 'foo'>
```

```typescript
type ExtractedType = Foo extends { name: 'foo' }
  ? Foo
  : never | Bar extends { name: 'foo' }
  ? Bar
  : never

type ExtractedType = Foo | never
type ExtractedType = Foo
```

### mapped type에서 키를 필터링 하는 용도

타입스크립트에서는, 타입은 immutable 하다. 만약 객체 타입에서 속성을 삭제하고 싶다면, 기존 속성을 변환하고 필터링하여 새롭게 생성해야 한다. 이를 위해 매핑된 타입의 키를 조건부로 다시 매핑하면 해당 키가 필터링된다.

```typescript
type Filter<Obj extends Object, ValueType> = {
  [Key in keyof Obj as ValueType extends Obj[Key] ? Key : never]: Obj[Key]
}

interface Foo {
  name: string
  id: number
}

type Filtered = Filter<Foo, string> // {name: string;}
```

### 제어 흐름에서 타입을 좁히고 싶을 때

함수에서 리턴값을 `never`로 타이핑 했다는 사실은, 함수가 실행을 마칠 때 호출자에게 제어 권한을 반환하지 않는 다는 것을 의미한다. 이를 활용하면, 컨트롤 플로우를 제어하여 타입을 좁힐 수 있다.

> 함수가 never를 리턴하는 경우는 여러가지가 있다. exception, loop에 갇히거나, 혹은 `process.exit`

```typescript
function throwError(): never {
  throw new Error()
}

let foo: string | undefined

if (!foo) {
  throwError()
}

foo // string
```

혹은 `||` `??` 키워드로도 가능하다.

```typescript
let foo: string | undefined

const guaranteedFoo = foo ?? throwError() // string
```

### 호환되지 않는 타입의 intersection이 불가능함을 나타내고 싶을 때

호환이 되지 않는 서로다른 타입에 대해 intersection을 표시한다면 `never`가 된다.

```typescript
type t = number & string // never
```

`never`와 intersecting을 했을 때도 마찬가지다.

```typescript
type t = never & number
```

## `never` 타입을 읽는 법 (에러메시지 에서)

아마도 타입스크립트로 개발을 해본 사람이라면, `Type 'number' is not assignable to type 'never'.` 이라는 메시지를 가끔씩 보았을 것이다. 이는 일반적으로 타입스크립트가 여러가지 타입을 intersect하는 과정에서 발생하는 에러다. 이러한 에러는 타입의 안전성을 유지하기 위해서 타입스크립트 컴파일러가 내보내는 경고다.

아래 예제를 살펴보자.

```typescript
type ReturnTypeByInputType = {
  int: number
  char: string
  bool: boolean
}

function getRandom<T extends 'char' | 'int' | 'bool'>(
  str: T,
): ReturnTypeByInputType[T] {
  if (str === 'int') {
    // 랜덤 숫자 생성
    return Math.floor(Math.random() * 10) // ❌ Type 'number' is not assignable to type 'never'.
  } else if (str === 'char') {
    // 랜덤 char 생성
    return String.fromCharCode(
      97 + Math.floor(Math.random() * 26), // ❌ Type 'string' is not assignable to type 'never'.
    )
  } else {
    // 랜덤 boolean 생성
    return Boolean(Math.round(Math.random())) // ❌ Type 'boolean' is not assignable to type 'never'.
  }
}
```

이 함수는 `number`, `string`, `boolean` 을 넘겨 받은 변수에 따라서 리턴하고 싶었던 것 같다. 그러나 각각의 리턴 문에서 타입스크립트는 에러를 뱉는다. 타입스크립트는 프로그램에서 각각 가능한 상태들에 대해 이러한 타입을 좁히도록 도움을 준다. 즉, 여기에서 `ReturnTypeByInputType[T]`는 런타임시에 number가 될수도, string이 될수도, boolean이 될수도 있다는 것을 의미한다.

여기의 리턴 유형이 가능한 모든 `ReturnTypeByInputType[T]`에 할당할 수 있는지 확인할 수 있는 경우에만 타입 안전성을 확보할 수 있다. 이 3가지 타입의 intersection은 무엇일까? 이 세가지 타입은 모두 서로 호환이 되지 않기 때문에 `never`를 반환하게 된다. 그래서 우리는 `never`메시지를 보게된 것이다. 이를 해결하기 위해서는, 타입 assertion이 필요하다.

- `return Math.floor(Math.random() * 10) as ReturnTypeByInputType[T]`
- `return Math.floor(Math.random() * 10) as never`

또다른 예제를 살펴보자.

```typescript
function f1(obj: { a: number; b: string }, key: 'a' | 'b') {
  obj[key] = 1 // Type 'number' is not assignable to type 'never'.
  obj[key] = 'x' // Type 'string' is not assignable to type 'never'.
}
```

`obj[key]` 는 런타임시에 키에 따라서 string이 될수도 number가 될 수도 있다. 타입스크립트는 따라서 key로 올수 있는 모든 값에 대해 동작할 수 있어야 되므로 제한을 두었다. 따라서 여기에서는 `never`로 결정된다.

## never를 확인하는 방법

사실 `never`인지 확인하는 것은 생각보다 쉽지 않다.

```typescript
type IsNever<T> = T extends never ? true : false

type Res = IsNever<never> // never 🧐
```

`IsNever`로 never인지 확인하기 위해 true, false를 리턴하게 헀지만 실상은 저것마저도 `never`가 된다.

https://github.com/microsoft/TypeScript/issues/23182#issuecomment-379094672 의 대답을 요약하자면

- `never`는 빈 uinion이다
- 타입스크립트는 조건 타입내부에 있는 유니온 타입을 자동으로 결정한다
- 여기에서는 빈 uinon이 들어왔으므로, 여기에 조건 타입은 다시 `never`가 된다.

따라서 우리가 생각하는 `IsNever`의 목적을 달성하기 위해서는 아래와 같은 튜플을 이용하는 방식을 취해야 한다.

```typescript
type IsNever<T> = [T] extends [never] ? true : false
type Res1 = IsNever<never> // 'true' ✅
type Res2 = IsNever<number> // 'false' ✅
```

> 사실 타입스크립트 소스코드에 있는 내용이다 https://github.com/microsoft/TypeScript/blob/main/tests/cases/conformance/types/conditional/conditionalTypes1.ts#L212


알쏭달쏭 신기한 타입스크립트와 타입의 세계

타입스크립트 타입 never 에 대해 자세히 알아보자

## Table of Contents

## Console.log를 기록하는 wasm 만들어보기

`Cargo.toml`

```toml
[package]
name = "consolelog"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.74"
web-sys = { version = "0.3.56", features = ['console'] }
```

`lib.rs`

```rust
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    // js_namespace는 console을 할당했다.
    // 즉 log만 쓰면 console.log가 된다.
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // 여기는 console.log
    #[wasm_bindgen(js_namespace=console, js_name=log)]
    fn log_u32(a: u32);

    // 여기도 console.log
    #[wasm_bindgen(js_namespace=console, js_name=log)]
    fn log_strings(a: &str, b: &str);
}

macro_rules! console_log {
    // log 함수랑 연결된다.
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

// rust extern으로 하는 방법
fn rust() {
    log("Hello yceffort!");
    log_u32(42);
    log_strings("Hello", "yceffort")
}

// macro
fn using_macro() {
    console_log!("Hello {}!", "yceffort");
    console_log!("Hello yceffort");
}

// websys library
fn using_web_sys() {
    use web_sys::console;

    console::log_1(&"Hello using web-sys".into());

    let js: JsValue = 4.into();

    console::log_2(&"Logging values are".into(), &js);
}

#[wasm_bindgen(start)]
pub fn run() {
    rust();
    using_macro();
    using_web_sys();
}
```

![console.log](./images/consolelog.png)

## 번들러 없이 직접 import 해서 사용하기

`Cargo.toml`

```toml
[package]
name = "without-bundler"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2.79"

[dependencies.web-sys]
version = "0.3.4"
features = [
  'Document',
  'Element',
  'HtmlElement',
  'Node',
  'Window',
]
```

`lib.rs`

```rust
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn main() {
    let window = web_sys::window().expect("there is no window in global");
    let document = window.document().expect("there is no document in window");
    let body = document.body().expect("there is no body in a document");

    let p_element = document.create_element("p").expect("fail to create P element");

    p_element.set_inner_html("Hello from rust");

    body.append_child(&p_element).expect("fail to append element");
}

#[wasm_bindgen]
pub fn add(a: u32, b: u32) -> u32 {
    a + b
}
```

![without-bundler1](./images/without-bundler1.png)

![without-bundler2](./images/without-bundler2.png)

## js 코드를 import 해서 rust에서 실행하기

가령 자바스크립트에 아래와 같은 코드가 있다고 가정해보자.

`defined-in-js.js`

```javascript
export function name() {
  return 'Rust'
}

export class MyClass {
  constructor() {
    this._number = 42
  }

  get number() {
    return this._number
  }

  set number(n) {
    return (this._number = n)
  }

  toString() {
    return `My number is: ${this.number}`
  }
}
```

위 코드를 rust에서 실행하기 위해서는 먼저 해당 js코드를 추상화하는 작업이 필요하다. 위 코드에 대한 추상화는 아래와 같이 작업하면 된다.

```rust
use wasm_bindgen::prelude::*;

#[wasm_bindgen(module = "/defined-in-js.js")]
extern "C" {
    // name 함수 정의
    fn name() -> String;

    // 클래스 정의
    type MyClass;

    // 클래스에 new keyword를 constructor로 정의
    #[wasm_bindgen(constructor)]
    fn new() -> MyClass;

    // getter
    #[wasm_bindgen(method, getter)]
    fn number(this: &MyClass) -> u32;

    // setter
    #[wasm_bindgen(method, setter)]
    fn set_number(this: &MyClass, number: u32) -> MyClass;

    // toString
    #[wasm_bindgen(method)]
    fn toString(this: &MyClass) -> String;
}

// console.log를 정의한다.
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

#[wasm_bindgen(start)]
pub fn run() {
    log(&format!("Hello from {}!", name())); // should output "Hello from Rust!"

    // 클래스를 선언한다
    let x = MyClass::new();
    // 테스트 코드!
    assert_eq!(x.number(), 42);
    // setter에 숫자 주입
    x.set_number(10);
    // toString
    log(&x.toString());
}
```

`run()` 함수 내부에 있는 것들이 순차적으로 실행될 것이다.

```
Hello from Rust!
My number is: 10
```


Rust로 web assembly 만들어보기 (3) - Rust로 다양한 Web Assembly 만들어보기

## Table of Contents

## 개발 환경

1. [Install Rust](https://www.rust-lang.org/install.html)로 먼저 Rust를 설치한다.
2. 그리고 wasm을 만들기 위해, [wasm-pack](https://github.com/rustwasm/wasm-pack)을 설치한다.

```shell
cargo install wasm-pack
```

## 패키지 만들기

```shell
cargo new --lib hello-wasm
```

이제 아래와 같은 파일이 생성되었을 것이다.

```rust
#[cfg(test)]
mod tests {
    #[test]
    fn it_works() {
        let result = 2 + 2;
        assert_eq!(result, 4);
    }
}
```

일반적으로 단위테스트는 src 디렉토리의 각 파일에 테스트 할 코드와 함께 작성한다. 여기서 사용되는 규칙은 각 파일에 `mod tests`라는 모듈을 `#[cfg(test)]`와 함께 선언하고, 그안에 테스트할 코드를 작성하면 된다. `#[cfg(test)]` 로 선언된 모듈은 `cargo test`를 할 때만 실행되고, build시에는 컴파일 되지 않는다. 따라서 빌드 시 시간과 공간을 절약할 수 있다.

> cfg는 configuration 이라는 뜻이다.

`[#test]`는 이 함수가 테스트 함수임을 가리키는 역할을 한다.

## Rust 작성하기

먼저 `Cargo.toml`에 `wasm_bindgen`을 의존성 목록에 추가해주자.

```toml
[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["yceffort <yceffort@gmail.com>"]
description = "A sample project with wasm-pack"
license = "MIT/Apache-2.0"
repository = "https://github.com/yceffort/rust-playground/tree/main/wasm/tutorial/hello-wasm"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
```

```rust
// import * from wasm_bindgen/prelude와 같다.
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}
```

[wasm-bindgen](https://github.com/rustwasm/wasm-bindgen)은 자바스크립트와 러스트 사이에 일종의 다리 역할을 한다고 보면 된다. 자바스크립트에서 rust api를 호출하거나, 반대로 rust가 js에서 발생한 예외처리를 하는 등의 처리를 할 수 있도록 해준다.

`#[XXX]`는 일종의 wrapper를 생성하는 속성 값인데, 이것이 무슨일을 하는지는 이후에 알아보자.

`extern` 키워드는, 이 것이 rust 외부에 정의된 함수라는 것을 알린다. 외부에 `alert`라는 함수가 있으며, 이는 문자열 타입의 `s` 를 받는 다는 것을 의미한다. 눈치 챘을 수도 있지만, 이는 `window.alert`를 의미한다.

즉, 자바스크립트에 무언가 함수를 호출 하고 싶다면 `extern` 키워드와 함께 추가하면 된다.

```rust
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}
```

이번에는 `extern` 키워드 대신 다른 것이 나왔다. 이번에는 `fn` 구문을 wrapping 하고 있다. 이는 rust 함수를 자바스크립트에 의해 호출될 수 있도록 처리한다는 것을 의미한다. 즉 `extern`과는 반대가 되는 기능이다.

함수를 보면 알겠지만, `greet()`는 문자열 타입 `name`을 받고 `hello {name}`이라는 문자열을 만들고 이를 alert에 넘겨주고 있다.

이제 이 코드를 빌드해보자

## 빌드하기

```shell
wasm-pack build --scope yceffort
```

마지막 scope는 npm 계정의 아이디를 넣어주면된다.

이 빌드는 다음과 같은 과정을 수행한다.

1. Rust 코드를 WebAssembly로 컴파일
2. WebAssembly위에서 `wasm-bindgen`을 실행하여, WebAssembly가 npm이 이해할 수 있는 모듈로 감싸는 자바스크립트 파일을 생성
3. `pkg` 폴더를 만들고, 자바스크립트 파일과 WebAssembly 코드를 그 안으로 옮긴다.
4. `Cargo.toml`과 동등한 `package.json`을 생성
5. `README.md`가 있다면 패키지로 복사

빌드가 완료되었다면, `pkg` 폴더가 생성되어 있는 것을 볼 수 있다.

`hello_wasm.js`

```javascript
import * as wasm from './hello_wasm_bg.wasm'
export * from './hello_wasm_bg.js'
```

`package.json`

```json
{
  "name": "@yceffort/hello-wasm",
  "collaborators": ["yceffort <yceffort@gmail.com>"],
  "description": "A sample project with wasm-pack",
  "version": "0.1.0",
  "license": "MIT/Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/yceffort/rust-playground.git"
  },
  "files": [
    "hello_wasm_bg.wasm",
    "hello_wasm.js",
    "hello_wasm_bg.js",
    "hello_wasm.d.ts"
  ],
  "module": "hello_wasm.js",
  "types": "hello_wasm.d.ts",
  "sideEffects": false
}
```

## 빌드한 패키지 사용해보기

이 npm package를 사용할 수 있도록 한번 설정해보자.

```json
{
  "name": "hello-wasm-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack-dev-server"
  },
  "dependencies": {
    "@yceffort/hello-wasm": "../hello-wasm/pkg"
  },
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "author": "",
  "license": "ISC"
}
```

```javascript
const path = require('path')
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  mode: 'development',
}
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hello-wasm example</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>
```

```javascript
const js = import('./node_modules/@yceffort/hello-wasm/hello_wasm.js')
js.then((js) => {
  js.greet("yceffort's first WebAssembly")
})
```

![first-wasm](./images/first-wasm.png)

## `wasm-bindgen`의 대략적인 원리

`wasm-bindgen`의 가장 중요한 개념은, wasm module이 ES Module의 한 가지 종류로 인식하고 연동한다는 것이다. `pkg`에 있는 `d.ts`를 보면 (타입스크립트 시그니쳐까지..!) 다음과 같이 선언되어 있다.

```typescript
/* tslint:disable */
/* eslint-disable */
/**
 * @param {string} name
 */
export function greet(name: string): void
```

WebAssembly는 이러한 처리가 불가능하므로, 이 것을 수행해주는 것이 `wasm-bindgen`이다. 이 중 자바스크립트 파일은 러스트를 호출할때 사용되는 인터페이스 역할을 하고, `*_bg.wasm` 파일이 실제로 방금 컴파일한 것과 구현체를 가지고 있다.

`hello_wasm_bg.js` 파일은 다음과 같이 구현되어 있다.

```javascript
import * as wasm from './hello_wasm_bg.wasm'

// ...

function getStringFromWasm0(ptr, len) {
  return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len))
}

/**
 * @param {string} name
 */
export function greet(name) {
  var ptr0 = passStringToWasm0(
    name,
    wasm.__wbindgen_malloc,
    wasm.__wbindgen_realloc,
  )
  var len0 = WASM_VECTOR_LEN
  wasm.greet(ptr0, len0)
}

export function __wbg_alert_a5a2f68cc09adc6e(arg0, arg1) {
  alert(getStringFromWasm0(arg0, arg1))
}
```

`wasm.greet(ptr0, len0);`를 보면, 이 함수는 문자열이 아닌 포인터와 length를 인수로 받고 있는 것을 알 수 있다.

조금 더 깊이 들어가서, WebAssembly의 `greet`함수가 러스트 컴파일러에 의해 컴파일되는 시점을 보면 이런식으로 코드가 작성되어 있다.

```rust
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

#[export_name = "greet"]
pub extern fn __wasm_bindgen_generated_greet(arg0_ptr: *mut u8, arg0_len: usize) {
    let arg0 = unsafe { ::std::slice::from_raw_parts(arg0_ptr as *const u8, arg0_len) }
    let arg0 = unsafe { ::std::str::from_utf8_unchecked(arg0) };
    greet(arg0);
}
```

원래 작성한 코드와 함께, 이상한 이름의 함수와 `#[export_name = "greet"]`가 붙어 있다. 이는 JS가 던진 pointer와 length를 받는 부분이다. 이 두개 인자를 받아서, `greet` 함수에 전달한다.

정리하자면, `#[wasm_bindgen]`는 두개의 wrapper를 생성한다.

- JS 타입을 받아서 wasm으로 변환 (자바스크립트)
- wasm 타입을 rust 타입으로 변환 (러스트)

즉, 앞서 언급했던 것 처럼, `wasm-bindgen`는 자바스크립트 - WASM - 러스트 사이에 다리 역할을 하고 있으며, 이를 위해 많은 일들이 뒷단에서 일어나고 있음을 알 수 있다.


Page 5

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

타입스크립트의 함수의 다형성

타입스크립트 타입 never 에 대해 자세히 알아보자

Rust로 web assembly 만들어보기 (3) - Rust로 다양한 Web Assembly 만들어보기

Rust로 web assembly 만들어보기 (2) - Rust로 간단한 Web Assembly 만들기