타입을 만드는 법

타입 만들기

forEach

-예시1

const a: Arr = [1, 2, 3];
a.forEach((item) => {
  console.log(item);
});
a.forEach((item) => {
  console.log(item);
  return "3";
});

이 코드가 있을 때 Arr 타입을 추론할 수 있어야 한다.

 

interface Arr {
  forEach(callback: (item: number) => void): void;
}

const a: Arr = [1, 2, 3];
a.forEach((item) => {
  console.log(item);
});
a.forEach((item) => {
  console.log(item);
  return "3";
});

forEach 안에 콜백 함수가 있고 리턴하는 것이 없어서 void로 해준다.

 

-예시2

interface Arr {
  forEach(callback: (item: number) => void): void;
}

const b: Arr = ["1", "2", "3"];
b.forEach((item) => {
  console.log(item);
});
b.forEach((item) => {
  console.log(item);
  return "3";
});

이렇게 문자열로 바뀐다면 다시 에러가 난다.

 

interface Arr<T> {
  forEach(callback: (item: T) => void): void;
}

const a: Arr<number> = [1, 2, 3];
a.forEach((item) => {
  console.log(item);
});
a.forEach((item) => {
  console.log(item);
  return "3";
});

const b: Arr<String> = ["1", "2", "3"];
b.forEach((item) => {
  console.log(item);
});
b.forEach((item) => {
  console.log(item);
  return "3";
});

그렇기에 제네릭을 사용해야 한다.

map

-예시1

const a: Arr<number> = [1, 2, 3];
const b = a.map((v) => v + 1);

이 코드의 타입 추론은

interface Arr<T> {
  map(callback: (v: T) => T): T[];
}

매개 변수는 원본 배열의 타입과 같다. 그리고 리턴값은 T의 배열이다.

 

-예시2

interface Arr<T> {
  map<S>(callback: (v: T) => S): S[];
}

const a: Arr<number> = [1, 2, 3];
const c = a.map((v) => v.toString());

이렇게 리턴 타입이 원본 배열과 다를 때는 다른 제네릭을 추가해준다. 

filter

-예시1

const a: Arr<number> = [1, 2, 3];
const b = a.filter((v) => v % 2 === 0);

이 코드의 타입 추론은

interface Arr<T> {
  filter(callback: (v: T) => boolean): T[];
}

이렇게 해야한다.

 

-예시2

interface Arr<T> {
  filter<S extends T>(callback: (v: T) => v is S): S[];
}

const c: Arr<number | string> = [1, "2", 3, "4", 5];
const d = c.filter((v): v is string => typeof v === "string");

이렇게 두 타입이 같이 있는 경우에는 타입 가드를 사용하면 된다.

<S extends T>를 안하면 S와 T가 관련 없다해서 에러가 발생한다. is를 사용하면 타입 범위를 더욱 좁혀준다.