본문 바로가기
카테고리 없음

TypeScript - 제네릭 타입

by 🔧🔨🛠 블로그 이전 준비 중입니다 🔧🔨🛠 2022. 12. 16.

01 제네릭 타입

❖ 사용하는 이유

• printArray 함수에 숫자 타입의 배열을 전달

• printArray 함수에 문자열 타입의 배열을 전달

 

❖ 사용하는 이유

• printArray 함수에 불리언 타입의 배열을 전달

• printArray 함수가 다양한 타입을 전달 받아 처리하기 위 해서는 함수 선언부에 해당 타입을 모두 명시해야 함

• 이런 경우, 제네릭 타입으로 선언하면 함수 선언부를 간단하게 작성 가능

 

❖ 제네릭 프로그래밍

  • 작성된 코드를 다양한 타입의 객체에 대해 재사용 하는 객체 지향 기법
    • 예) 하나의 코드로 숫자, 문자열 등 처리 가능

❖ 사용 방법

❖ 예시

[실습] 제네릭 타입

❖ Generic.tsx

❖ 실행 결과

[10, 20, 30]
['a', 'b', 'c']
[true, false, true]

인터페이스와 제네릭

❖ InterfaceGeneric.tsx

이렇게 바꾸기 가능

❖ ClassGeneric.tsx


const ClassGeneric = () => {
  class User<T> {
    constructor(public name: string, public age: number, public phone: T) {}
  }


  const user1:User<number> = new User("soo", 20, 821012345678)
  const user2:User<string> = new User("soo", 20, '82-10-1234-5678')
  return <div></div>;
};

export default ClassGeneric;