TypeScript 제네릭

TypeScript 제네릭

단일 타입이 아닌 다양한 타입에서 작동하는 재사용이 가능한 컴포넌트를 만들 수 있는 방법이다.

1. 제네릭 타입을 함수의 파라미터로 사용하는 걸 의미 함수 호출 시 타입을 정의할 수 있다.
2. 선언은 여유롭게 짝만 맞춰놓고 실제 사용 시 확실하게 타입을 정의한다.
3. 함수의 파라미터와 리턴값의 타입 정보를 알 수 있다.
4. <T>는 Convention이다.

 

선언

제네릭 사용은 함수 타입 인수를 포함한 모든 인수를 전달하는 방법과 타입 인수 추론을 사용하는 방법 2가지가 있다.

// 인수에 타입을 붙인다.
function print<T>(word: T): T {
	return word;
}

const result = print<string>("제네릭");

타입 인수 추론

 

제네릭 배열

- 배열의 원소 중 어떠한 타입도 올 수 있다. 

function arr<T>(r: T[]): T[] {
    return r;
}

const result = arr(["문자", 1, false, undefined, null]);

 

제네릭 인터페이스

- 객체의 속성 중 어떠한 타입이 올지 모르는 경우 사용한다.

interface User<T> {
    name: string;
    age: number;
    gender: T;
}

const user: User<boolean> = {
    name: "사용자",
    age: 29,
    gender: false,
}

const user2: User<null> = {
    name: "사용자2",
    age: 30,
    gender: null,
}

 

- 제네릭이 있는 인터페이스를 상속받을 수 있다.

interface User<T> {
	name: string;
    age: number;
    married: T;
}

interface UserInfo<K> extends User<K> {
	email: string;
    gender: K;
}

const newUser: UserInfo<string | boolean> = {
    name: "사용자",
    age: 29,
    married: false,
    email: "이메일",
    gender: "남자",
}

 

제네릭 타입 제한

- extends 키워드를 사용해 파라미터 타입을 제한할 수 있다.

// 문자만 가능하다.
function check<T extends string>(word: T): T {
    return word;
}

const result = check("문자");

// 문자로 이루어진 배열만 가능하다.
function check<T extends Array<string>>(word: T): T {
    return word;
}

const result = check(["강북구", "강남구", "강서구", "강동구"]);

 

- extends / keyof 키워드를 사용해 파라미터의 타입을 제한할 수 있다.

// 함수 파라미터로 정의된 인터페이스 속성만 받을 수 있다.
interface Countries {
    korea: "seoul";
    china: "beijing";
    japan: "tokyo";
}

function printCapital<T extends keyof Countries>(word: T): T {
    return word;
}

const result = printCapital("korea");

// 함수 파라미터로 정의된 인터페이스 속성값만 받을 수 있다.
interface Countries {
    korea: "seoul";
    china: "beijing";
    japan: "tokyo";
}

function printCapital<T extends Countries[keyof Countries]>(word: T): T {
    return word;
}

const result = printCapital("tokyo");