TypeScript/TypeScript - 기초부터 실전까지

16. 제네릭의 타입 제한방법 3가지 | keyof

DEV-Front 2023. 10. 9. 00:31
반응형
// 제네릭의 타입 제한
function logTextLength<T>(text: T[]): T[]{
    
    text.forEach(function (text){
        console.log(text);
    })
    return text;
}

const text = logTextLength<string>(['안녕', '잘가']);

정의된 타입으로 타입을 제한하기

interface LengthType{
    length : number;
}

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

logTextLength({ length: 10 });
logTextLength('a'); // 문자열에는 length가 제공되기 때문에 넘겨짐
logTextLength(10); //에러. 숫자에는 length가 제공되지 않기 때문에 포함되지 않다고 에러밷음

keyof 로 제네릭의 타입 제한하기

// 제네릭의 타입 제한 3- keyof 키워드 이용해서 인터페이스의 값들중 하나만 받겠다고 제약할수 있다.
interface ShoopingItem{
    name : string;
    price : number;
    stock : number;
}
// ShoopingItem 에 있는 Key들중에 하나가 Type이 된다 (name, price, stock 중 하나)
function getShippingItemOption<T extends keyof ShoopingItem>(itemOption : T):T{
    return itemOption;
}

getShippingItemOption('name');
getShippingItemOption('price');
getShippingItemOption("stock");

 

반응형