- Generic
class, function, interface를 다양한 type으로 재사용 가능
변수 type의 변수
다른 인자가 들어가도 상관없지만 보통 T를 사용
- 기본 예제
1. function
function getSize<T>(arr: T[]): number {
return arr.length;
}
const numArr = [1, 2, 3];
getSize<number>(numArr); // 3
const strArr = ['A', 'B', 'C', 'D'];
getSize<string>(strArr); // 4
// generic으로 선언하면 굳이 타입 지정해주지 않아도 알아서 판단하긴 함
const boolArr = [false, true, false];
getSize(boolArr); // 3
2. interface
interface Item<T> {
name: string;
price: number;
option: T;
}
// object 대신 실제 object로 선언해도 된다. object => { color: string; navi: boolean } 가능
const A: Item<object> = {
name: "car",
price: 2000,
option: {
color: "blue",
navi: true,
},
};
const B: Item<string> = {
name: "car",
price: 1000,
option: "normal"
};
- 응용
interface A {
name: string;
age: number;
}
interface B {
name: number;
color: string;
}
interface C {
price: numberl
}
const a: A = { name: 'a', age: 31 };
const b: B = { name: 3000, color: "purple" };
const c: C = { price: 5000 };
// data는 T의 type인데 T는 string type의 name을 가지고 있는 T
function showName<T extends { name: string }>(data: T): string{
return data.name;
}
showName(a);
showName(b); // name type이 number라서 error
showName(c); // name이 없기 때문에 error
'개발에 도움이 되는 > TypeScript' 카테고리의 다른 글
TypeScript 기본 (Utility Type) (0) | 2022.05.02 |
---|---|
TypeScript 기본 (Literal, Union / Intersection Type) (0) | 2022.04.26 |
TypeScript 기본 (Function) (0) | 2022.04.13 |
TypeScript 기본 (Type, Interface) (0) | 2022.04.12 |
TypeScript 개념 및 설치 방법 (React) (0) | 2022.04.06 |