반응형
클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 것으로, 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능하게 해주는 타입입니다. 즉, 어떠한 타입이든 받으면서 받은 해당 타입을 그대로 리턴하게 하는 것 입니다.
제네릭 타입은 다양한 타입을 받을 수 있다는 유연성이란 점에서 타입의 정보가 동적으로 결정됩니다.
클래스 상속을 사용하면 별도의 자료 타입을 받고자 하는 클래스를 추가해야 하고 중복되는 코드를 양산하기에 불편합니다. 바로 이런 경우에 유용하게 사용할 수 있는 것이 제네릭 입니다.
함수
function checkNull<T>(arg: T | null): T {
if (arg == null) {
throw new Error()
}
return arg;
}
function generics<T>(arg: T[] | null): T[] {
console.log(arg.length);
return arg;
}
function loggingIdentity<T>(arg: Array<T>): Array<T> {
console.log(arg.length);
return arg;
}
클래스
interface Direction<L, R> {
left: () => L;
right: () => R;
}
class DirectionLeftRigth<L, R> implements Direction<L, R> {
constructor(private valueL: L, private valueR: R) {}
left(): L {
return this.valueL;
}
right(): R {
return this.valueR;
}
}
const either: Direction<number, number> = new DirectionLeftRigth(1, 2);
const best = new DirectionLeftRigth(3, {hour: 5});
// 사용자에 의해 타입 결정
either.left();
best.right();
제네릭의 조건 제약
제한적인 범위 내에서 허용하도록 타입에 extends를 사용하도록 하는 것 입니다.
클래스에서의 상속 interface가 아닌, 타입에서의 상속으로 interface를 사용한다고 생각하면 쉽습니다.
interface Car {
taxi(): void;
}
function transportation<T extends Car>(choice: T): T {
choice.taxi()
return choice
}
제네릭 제약조건에서 타입 매개변수 사용
어떠한 오브젝트에 타입을 받아서 해당 K(key)가 존재해야 리턴 됩니다.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
let x = { a: 1, b: 2, c: 3, d: 4 };
getProperty(x, "a"); // 성공
getProperty(x, "m"); // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음.
728x90
반응형
'JavaScript & TypeScript' 카테고리의 다른 글
[TS] type alias, interface 차이 (0) | 2022.03.20 |
---|---|
[JS] ProtoType (0) | 2022.03.15 |
[TS] OOP (0) | 2022.03.14 |
[TS] Type (0) | 2022.03.07 |
[TS] Type Script (0) | 2022.03.06 |