TypeScript - Generic 이해하기

bigbrothershin·2020년 1월 26일
0

상황

숫자는 숫자끼리만 연산을 하고, 문자는 문자끼리만 연산을 하려고 할 때

1. Generic이 없을 경우

interface obj {
  add: (a: number | string, b: number | string) => number | string
}

const a: obj = {
  add: (a, b) => a + b
};
const b: obj = {
  add: (a, b) => a + b
}

a.add(1, 2);
a.add(1, 'abc'); // 도 허용하여 의도하고자 하는 연산이 되지 않음
a.add('a', 'b') // 모두 type 오류 X 

b.add(1, 2);
b.add(1, 'abc'); // 도 허용하여 의도하고자 하는 연산이 되지 않음
b.add('a', 'b') // 모두 type 오류 X 

2. Generic 사용 시

interface obj<T> {
  add: (a: T, b: T) => T
} // 결론은 짝 맞추기

const a: obj<number> = {
  add: (a, b) => a + b
};
const b: obj<string> = {
  add: (a, b) => a + b
}

a.add(1, 2);
a.add('a', 'b') // type 오류!

b.add('c', 'd');
b.add(3, 4); // type 오류!

숫자는 숫자끼리, 문자는 문자끼리 연산을 수행하여 의도한 연산 수행 보장 가능

결론: 매개변수, return 등을 하나의 타입으로 맞춰야 할 때
generic은 interface 선언은 느슨하게 하고, 그 후 interface를 사용(적용)할 때 타입의 짝을 맞춰주는 것!

참조: 타입스크립트 강좌 4-3. 제네릭(generic) | ZeroCho TV

profile
JavaScript, Node.js 그리고 React를 배우는

0개의 댓글