반응형
📝Generic
/** ---- Generic ---- **/
// function getSize(arr: number[] | string[])
// ---- same as above ----
function getSize<T>(arr: T[]): number{
return arr.length;
}
const arr1 = [1,2,3];
console.log(getSize<number>(arr1)); // 3
const arr2 = ["a", "b", "c"];
console.log(getSize<string>(arr2)); // 3
const arr3 = [false, true, true]
console.log(getSize<boolean>(arr3)); // 3
const arr4 = [{}, {}, {"name" : "team"}]
console.log(getSize<object>(arr4)); // 3
interface User2 {
nm: string;
age: number;
}
interface Book {
price: number
}
/** ---- Generic extends ---- **/
const user2: User2 = {nm : "lee", age : 20};
const book: Book = {price : 3000};
// Generic을 확장해 nm : string을 반드시 포함시키는 타입만 받는다는 의미
function showMyName<T extends {nm : string}>(data: T): string {
return data.nm;
}
showMyName(user2); // lee
showMyName(book); // 에러 발생 (semantic)
/** Generic 추가 예시 **/
// 사용 예시
class Container<T> {
private data: T[];
addItem(item: T): void {
this.data.push(item);
}
getItem(index: number): T {
return this.data[index];
}
}
/** -------------------------------------- **/
// 사용 예시
let numberContainer = new Container<number>();
numberContainer.addItem(1);
numberContainer.addItem(2);
let firstItem = numberContainer.getItem(0); // firstItem의 타입은 number
interface Pair<T, U> {
first: T;
second: U;
}
let pair1: Pair<number, string> = { first: 1, second: "two" };
let pair2: Pair<string, boolean> = { first: "three", second: true };
/** -------------------------------------- **/
// 제네릭 인터페이스
interface Mobile<T> {
name: string;
price: number;
option: T; // 제네릭 타입 - option 속성에는 다양한 데이터 자료가 들어온다고 가정
}
// 제네릭 자체에 리터럴 객테 타입도 할당 할 수 있다.
const m1: Mobile<{ color: string; coupon: boolean }> = {
name: 's21',
price: 1000,
option: { color: 'read', coupon: false }, // 제네릭 타입의 의해서 option 속성이 유연하게 타입이 할당됨
};
const m2: Mobile<string> = {
name: 's20',
price: 900,
option: 'good', // 제네릭 타입의 의해서 option 속성이 유연하게 타입이 할당됨
};
/** -------------------------------------- **/
function identity<T extends numOrStr>(p1: T): T {
return p1;
}
/** -------------------------------------- **/
function translate<T extends (a: string) => number, K extends string>(x: T, y: K): number {
return x(y);
}
// 문자숫자를 넣으면 정수로 변환해주는 함수
const num = translate((a) => { return +a; }, '10');
console.log('num: ', num); // num : 10
/** -------------------------------------- **/
// 사용 예시
const toArray2 = <T>(a: T, b: T): T[] => { ... }
// 출처: https://inpa.tistory.com/entry/TS-📘-타입스크립트-Generic-타입-정복하기 [Inpa Dev 👨💻:티스토리]
📝Keyof, as
/** ------ keyof ------ **/
interface Rabbit {
name: string;
age: number;
place: string;
move: () => void;
}
type KeyofRabbit = keyof Rabbit
// "name" | "age" | "place" | "move"
const rabbit1: KeyofRabbit = "age"; // 🆗 OK!
const rabbit2: KeyofRabbit = "food"; // ⚠️ Error!
/** ------ as ------ **/
const someValue: any = "This Is As Test";
const strLength: number = (someValue as string).length;
console.log(strLength);
/** ------ as keyof ------ **/
week[checkbox.code] → checkbox.code가 어떤 타입인지 몰라서 에러 발생
week[checkbox.code as keyof Week] → as keyof로 명시가능keyof은 인터페이스에 정의된 “키”를 literal type으로 변경한다
as의 경우 any따위로 두루뭉실하게 잡힌 타입을 “어떠한 타입이다”라고 임시로 정해준다
📝typeof
const person = { name: "Alice", age: 25 };
type Person = typeof person; // { name: string; age: number; } 타입typeof에 변수를 넣을 경우 변수의 타입을 유추해서 type을 만든다
반응형
