[typescript] Generic Type #2 사용예제

dev stefanCho·2021년 10월 23일

목록 보기

12/16

Generic Type의 사용방법에 대한 예시

아래 예시는 codesandbox에서 테스트할 수 있습니다.

Example

기본적인 Generic Type

// basic generic type
type MyProfile<T> = {
  hobby: Array<T>;
};

가장 base한 방법으로 generic type인 Array<T>는 T[]와 동일하다.

Multiple Generic Type

// multiple generic type
type XYCoordinateAxisName<X, Y> = {
  xAxisName: X;
  yAxisName: Y;
};

2가지 이상의 generic을 정의할 수도 있다.

Object에서의 Generic Type

// reuse type
type DefaultScheme = {
  id: string;
  modifiedDate: string;
};

type AsyncValue<T> = {
  data: T & DefaultScheme;
  loading?: boolean;
  error?: string;
};

type User = {
  name: string;
  age: number | null;
};

type Item = {
  name: string;
};

type AsyncUser = AsyncValue<User>;
type AsyncItem = AsyncValue<Item>;

const fetchedUser: AsyncUser = {
  data: {
    id: "1",
    modifiedDate: "20211010",
    name: "admin",
    age: null
  }
};

const fetchedItem: AsyncItem = {
  data: {
    id: "1",
    modifiedDate: "20211011",
    name: "iphone"
  }
};

generic을 object에 적용하면, 반복적인 정의를 하지 않아도 된다.
(위 예제에서는 id, modifiedDate는 모든 database의 unique한 값이기 때문에, &로 intersection type을 만들었다.)

function에서의 Generic Type

// basic function usage (inferred return value)
const studentNameList = ["bob", "json", "stefan"];
const numberList = [1, null, 3, 4];

const getCount = <T>(list: T[]) => {
  return log(list.length);
};

getCount(studentNameList);
getCount<number | null>(numberList); // define explicitly generic type

function에서 generic을 사용하는데, function을 invoke할 때, <>로 explict하게 type을 정의할 수 있다. React에서는 useState에서 explict하게 정의할 수 있다. (ex useState<number | null>(0))

// explicit return value
const getList = <T>(list: T[]): T[] => {
  return list;
};

return에 generic을 표시해 줄 수도 있다. (return type이 infer 될 수 있기 때문에, 필수는 아니다.)

Generic Type의 extends

// extends generic type
type StudentDetail = {
  firstName: string;
  lastName: string;
};

const getStudentDetail = <T extends StudentDetail>(detail: T) => {
  log(detail);
};

getStudentDetail({
  firstName: "stephen",
  lastName: "cho",
  age: 30
});