// Generic
// 함수
// function getSize(arr:number[] | string[] | boolean[] | object[]):number {
// return arr.length;
// }
function getSize<T>(arr: T[]) {
// <T> 타입파라미터 어떤 타입이든 전달받아서 사용
return arr.length;
}
const arr1 = [1, 2, 3];
getSize<number>(arr1); // 3
const arr2 = ['a', 'b', 'c'];
getSize<string>(arr2); // 3
const arr3 = [true, false, true];
getSize<boolean>(arr3); // 3
const arr4 = [{}, {}, { name: 'Tim' }];
getSize(arr4); // 3
// 클래스
interface Service<T> {
name: string;
price: number;
option: T;
}
const s1: Service<object> = {
// 객체 내 속성이 정해져 있다면
// <{color:string, coupon: boolean}>
name: 's1',
price: 10000,
option: {
color: 'red',
coupon: false,
},
};
const s2: Service<string> = {
name: 's2',
price: 10000,
option: 'good',
};
interface Book {
price: number;
}
const book: Book = { price: 4000 };
function showName<T extends { name: string }>(data: T): string {
return data.name;
}
showName(s1);
showName(s2);
// showName(book);
// name이 없는 매개변수가 오면 error
https://www.youtube.com/watch?v=pReXmUBjU3E&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=7
728x90
'Frontend > typescript' 카테고리의 다른 글
리액트에 타입스크립트 적용 (0) | 2022.06.09 |
---|---|
Typescript 배우기 8 (유틸리티 타입) (0) | 2022.06.05 |
Typescript 배우기 6 (클래스) (0) | 2022.06.05 |
Typescript 배우기 5 (리터럴, 유니온/교차 타입) (0) | 2022.06.05 |
Typescript 배우기 4 ( 함수) (0) | 2022.05.19 |