[타입스크립트] 제네릭 - 2 (타입 제한)

제네릭 타입 제한 

1. 배열

• 함수 호출 시 타입을 명시하지 않을 경우, 아래처럼 에러가 날 수 있음

  function logTextLength<T>(text: T): T {
    console.log(text.length); // error! T에 length 프로퍼티가 없다
    return text;
  } 
  logTextLength('hi');

 

• T → T[] 배열로 바꾸면 length 프로퍼티를 사용할 수 있음

  function logTextLength<T>(text: T[]): T[] {
    console.log(text.length); 
    return text;
  } 
  logTextLength(['hi', 'abc']);

2. 정의된 타입

• extends를 이용해 LengthType을 상속하면 length 프로퍼티를 기본으로 갖고, 더 추가할 수 있다

  interface LengthType {
    length: number;
  }
  function logTextLength<T extends LengthType>(text: T): T {
    console.log(text.length);
    return text;
  }
  logTextLength('a'); // ok
  logTextLength(10); // Error! number는 내부에 length 속성이 없음
  logtextLength({ length: 10 }); // ok
  logtextLength({ test: 10 }); // Error! test라는 속성이 없음

3. keyof

• 파라미터가 ShoppingItem의 키만 받을 수 있도록 제한하기 (’name’ || ‘price’ || ‘stock’)

  interface ShoppingItem {
    name: string;
    price: number;
    stock: number;
  }
  function getShoppingItemOption<T extends keyof ShoppingItem>(itemOption: T): T {
    return itemOption;
  }
  getShoppingItemOption(10); // Error!
  getShoppingItemOption<string>('a'); // Error!
  getShoppingItemOption('name'); // ok 

 

출처 : 인프런 '타입스크립트 입문 - 기초부터 실전까지' 강의를 듣고 정리한 글입니다.