타입스크립트 - 제네릭 함수처럼 사용하기

제네릭 함수처럼 사용하기

자바스크립트에서는 중복이 있다면 함수를 이용해 중복을 제거한다.

const person1 = {
  type: "human",
  race: "yellow",
  name: "zero",
  age: 28
};
const person2 = {
  type: "human",
  race: "yellow",
  name: "hyemin",
  age: 32
};

const personFactory = (name, age) => ({
  type: "human",
  race: "yellow",
  name,
  age
});
const person11 = personFactory("zero", 28);
const person22 = personFactory("hyemin", 32);

person1과 person2의 type, race 속성이 동일하기 때문에 personFactory함수를 만들어 중복된 부분을 제거할 수 있다.

자바스크립트처럼 타입스크립트도 제네릭을 사용하여 중복된 부분을 제거할 수 있다.

interface person1 {
  type: "human";
  race: "yellow";
  name: "zero";
  age: 28;
}
interface person2 {
  type: "human";
  race: "yellow";
  name: "hyemin";
  age: 32;
}
// name의 타입을 N으로 받고,
// age의 타입을 A로 받아서 사용
interface Person<N, A> {
  type: "human";
  race: "yellow";
  name: N;
  age: A;
}
interface Zero extends Person<"zero", 28> {}
interface Hyemin extends Person<"hyemin", 32> {}

person1과 person2의 type, race 타입이 동일하기 때문에, 제네릭을 사용해서 중복을 제거할 수 있다.

<>안에 타입_매개변수를 넣고, 선언한 제네릭을 사용할 때는 Person<”hyemin”, 32> 같이 <>안에 실제_타입_인수를 넣으면 된다.

배열 타입의 제네릭

interface ArrayT<T> {
  [key: number]: T;
  length: number;
}
type StringArr = ArrayT<string>; // type StringArr = ArrayT<string>

type BooleanArr = ArrayT<boolean>; // type BooleanArr = ArrayT<boolean>

함수 표현식과 함수 선언문에서의 제네릭 사용

// 함수 선언문 제네릭
const personFactoryE = <N, A>(name: N, age: A) => ({
  type: "human",
  race: "yellow",
  name,
  age
});
// 함수 표현식 제네릭
function personFactoryD<N, A>(name: N, age: A) {
  return {
    type: "human",
    race: "yellow",
    name,
    age
  };
}

타입 매개변수에 기본값 지정 가능

<> 안에 매개변수를 작성하고 =를 사용하여 기본값을 지정할 수 있다.

interface Person333<N = string, A = number> {
  type: "human";
  race: "yellow";
  name: N;
  age: A;
}

정리

interface 이름<타입_매개변수> {}
type 이름<타입_매개변수> = {};
class 이름<타입_매개변수> {}
function 이름<타입_매개변수>() {}
const 함수이름 = <타입_매개변수>() => {};