자바스크립트 - 제네릭

1. 제네릭의 장점

아래와 같이 유연하게 대처할 수 있다.

function logText(text: string){
    console.log(text);
    return text;
}

logText('하이');

function logNumber(num: number){
    console.log(num);
    return num;
}

logNumber(10);

function logAll<T>(text: T): T {
    console.log(text);
    return text;
}

const str1 = logAll<string>('abc');
str.split('');
const login = logAll<boolean>(true);

제네릭 추가

 

// function logText(text){
//     console.log(text);
//     return text;
// }

// logText("hello");


function logText(text: string){
    console.log(text);
    return text;
}

logText('하이');

function logNumber(num: number){
    console.log(num);
    return num;
}

logNumber(10);

function logAll<T>(text: T): T {
    console.log(text);
    return text;
}

const str1 = logAll<string>('abc');
str.split('');
const login = logAll<boolean>(true);

interface Dropdown<T>{
    value: T;
    selected: boolean;
}

const a: Dropdown<number> = {
    value: 10,
    selected: true
};

//제네릭의 타입 제한
// function logTextLength<T>(text: T[]): T[] {
//     console.log(text.length);
//     return text;
// }

// logTextLength<string>(['hi','ab']);

//정의된 타입 이용하기
interface LengthType {
    length: number;
}

function logTextLength<T extends LengthType>(text: T): T {
    console.log(text.length);
    return text;
}

logTextLength('a');

//key of
interface ShoppingItem {
    name: string;
    price: number;
    stock: number;
}

function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T{
    return itemOption;
}

getShoppingItemOption("stock");

 

 

 

참고

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의