Typescript 재네릭

재네릭

 

• 재네릭은 함수 이름 오른쪽에 <>을 이용해서 작성할 수 있으며 <>안에 이름은 원하는 이름을 정하면 된다. <> 안의 이름은 동적으로 타입이 정해질 것이며 매개변수 쪽 및 함수 안의 구현하는 쪽에서 사용할 수 있다.
• 함수를 호출할때 <>을 이용하여 <>안에 타입 정보를 입력해주면 동적으로 타입이 이때 정해지는 것이다.
• 타입스크립트는 더 편리성을 위하여 함수 호출시 <>을 입력하지 않아도 매개변수로 넣어준 값의 타입을 분석 후 재네릭 타입 설정이 자동으로 되는 이점도 있다.

 

function makeArray<T>(defaultValue: T, size: number): T[]{ //T로 함수 호출시 정해준 타입이 들어온다.
    const arr: T[] = [];
    for( let i = 0; i < size; i++){
        arr.push(defaultValue);
    }
    return arr;
}

const arr1 = makeArray<number>(1, 10); //number 재네릭 타입 적용
const arr2 = makeArray<string>('empty', 10); //string 재네릭 타입 적용
const arr2 = makeArray<string | number>(1, 10); //string 재네릭 타입 적용

const arr1 = makeArray(1, 10); //재네릭 타입을 정해주지 않아도 자동으로 타입 지정 가능
const arr2 = makeArray('empty', 10); // string 타입 자동 지정
const arr2 = makeArray(true, 10); // boolean 타입 자동 지정

 

 

 

타입 입력 가능 범위 extends 사용

 

 

• 원래는 아무 타입이나 입력이 가능하였지만 리액트와 같은 라이브러리에서는 입력 타입에 제한을 두고 있다. 그래서 타입 입력 가능 범위를 조절해야 한다.
• 특히 리액트의 속성값 전체는 객체타입만을 허용한다.
• 이때 재네릭은 타입 종류를 제한 할 수 있는 기능을 제공한다.

 

function identity<T extends number | string>(p1: T): T {
    return p1;
}
identity(1)
identity('a')
identity([]); //타입 제한으로 인한 오류 등장
identity(true); //타입 제한으로 인한 오류 등장

• extends 라는 키워드를 이용하면 타입 제한을 줄 수 있는 기능을 사용할 수 있다.
• A extends B 가 있으면 A가 B에 할당 가능해야한다 라고 이해하면 된다.
• 즉 위의 코드의 함수는 T는 number 또는 string에 할당 가능해야한다고 볼 수 있다.

 

 

 

extends 응용 실습

interface Person {
    name: string;
    age: number;
}

interface Product {
    name: string;
    price: number;
}

interface korean extends Person { //Person에 korean 할당
    liveInSeoul: boolean;
}
				//keyof는 K가 Person 타입의 키 값과 일치해야 한다는 의미다.
function swapProperty<T extends Person, K extends keyof Person>(
    p1: T,
    p2: T,
    key: K,
) : void {
    const temp = p1[key];
    p1[key] = p2[key];
    p2[key] = temp;
}
const p1: korean = {
    name: '김진석',
    age: 26,
    liveInSeoul: true
}

const p2: korean = {
    name: '진석김',
    age: 62,
    liveInSeoul: false
}

const p3: Product = {
    name: '진석군',
    price: 65,
}

swapProperty(p1, p2, 'age');
swapProperty(p1, p2, 'age1'); //오류. keyof로 age1이 정한 Person의 타입 키 값에 존재하지 않기 때문
swapProperty(p1, p3, 'age'); //오류. p3의 타입 Product는 T에 할당 받지 않았기 때문