타입스크립트 - 타입스크립트 - 제네릭

제네릭

예시1

매개변수에 직접 타입을 지정하기

function getArrayLength(arr: number[] | string[] | boolean[]): number {
  return arr.length;
}

getArrayLength([1, 2, 3]);
getArrayLength(["a", "b", "c"]);
getArrayLength([true, false]);

제네릭을 이용해서 매개변수 다양하게 받기
<>사용해서 매개변수의 타입을 할당

function getArrayLength1<T>(arr: T[]): number {
  return arr.length;
}

getArrayLength1<number>([1, 2, 3]); // T: number
getArrayLength1<string>(["a", "b", "c"]); // T: string
getArrayLength1<boolean>([true, false]); // T: boolean

예시2

name과 color의 타입은 알지만, option으로 들어오는 값의 타입에 대해 알지 못할 때

interface Vehicle {
  name: string;
  color: string;
  option: any;
}

const car = {
  name: "car",
  color: "red",
  option: { price: 1000 }
};
const bike = {
  name: "bike",
  color: "black",
  option: true
};

제네릭 사용하기

interface Vehicle1<T> {
  name: string;
  color: string;
  option: T;
}
const car1: Vehicle1<{ price: number }> = {
  name: "car",
  color: "red",
  option: { price: 1000 }
};
const bike1: Vehicle1<boolean> = {
  name: "bike",
  color: "black",
  option: true
};

예시3

매개변수가 2개 이상일 경우

const makeArr = <X, Y>(x: X, y: Y): [X, Y] => {
  return [x, y];
};

const array1 = makeArr<number, number>(4, 5); // X:4, Y: 5
const array2 = makeArr<string, string>("a", "b"); // X:a, Y: b

예시4

매개변수가 여러개일 때 기본 값을 지정할 수도 있음

const makeArr1 = <X, Y = string>(x: X, y: Y): [X, Y] => {
  return [x, y];
};

makeArr1("ab", "cd"); // X:ab, Y: cd
makeArr1<number, number>(1, 2); // X:1, Y: 2

예시5

제네릭과 extends 같이 사용하기

const 함수명 = <T extends 항상 가지고 있어야하는 속성&타입>(arg: T)=>{
  return ...
}

기본 속성인 firstName,lastName외에 age, extedlocation 등의 속성을 받을 수 있음

const makeFullName1 = <T extends { firstName: string; lastName: string }>(
  obj: T
) => {
  return {
    ...obj,
    fullName: obj.firstName + " " + obj.lastName
  };
};

makeFullName1({ firstName: "Hyemin", lastName: "ko", extedlocation: "Seoul" });
makeFullName1({ firstName: "Hyemin", lastName: "ko", age: 30 });