[TypeScript] 타입스크립트 제네릭 타입 설명 및 예제

타입스크립트 제네릭 타입 설명 및 예제

타입스크립트 제네릭타입

안녕하세요. gaki 입니다.

오늘은 타입스크립트의 제네릭 타입에 대해서 알아보겠습니다.

 

<목차>

1. 제네릭의 뜻

2. 타입스크립트 제네릭타입 예제

3. 타입스크립트 제네릭타입의 응용

 

---

1. 제네릭의 뜻

제네릭(generic)이란, 일반적인 이라는 뜻을 가진 형용사입니다.

무언가가 일반적이려면, 보편적이여야하고 많은 사람들을 수용할 수 있어야합니다.

타입스크립트에서 제네릭 타입이란 많은 타입을 수용할 수 있는 타입입니다.

이게 무슨말인지 헷갈리시면 아래의 예제를 보면 이해되실겁니다.

 

---

2. 타입스크립트 제네릭타입 예제

function identity(arg: any): any {
	return arg
}

위와 같이 어떤 인자를 받고 그 인자를 반환하는 identity 라는 함수가 있다고 가정해봅시다.

이 함수의 인자는 무슨 타입이던 받을 수 있다는 의미로서 any 를 사용합니다.

하지만 타입스크립트의 가이드에서는 any 타입의 사용을 지양합니다.

타입스크립트는 변수의 타입을 지정해줌으로서, 예상치 못한 동작을 방지하기 위해서 사용하는데 any 타입을 쓰면 타입스크립트를 쓰는 이유가 없기 때문이죠.

 

우리는 그럼 위 함수를 어떻게 발전시킬 수 있을까요?

다시 곰곰이 생각해봅시다.

함수의 인자는 특정한 타입의 값을 가지며, 그 리턴값 또한 함수의 인자의 값과 동일한 타입입니다.

하지만 타입이 number 일지 string 일지 아니면 Object 일지 알 수 없습니다.

이런 경우에 타입스크립트의 제네릭타입이 사용됩니다.

function identity<T>(arg:T):T {
	return arg
    };

함수의 이름 옆에 <T> 라고 적힌 부분이 보이시나요?

저 <T> 가 제네릭 타입의 문법입니다.

이 뜻은, T 타입을 매개 변수로 받고, T 타입을 arg 의 타입으로, 함수의 리턴값 타입으로 사용하겠다는 의미입니다.

identity<string>("apple");
identity<number>(5);
identity<number[]>([1,2,3]);


// 타입의 값이 복잡하지 않다면, 타입스크립트가 자동으로 인자의 타입을 추론해서 <T> 에 넘겨줌.
identity("apple");
identity(5);

이와 같이 함수를 호출할 때, <type> 형식으로 타입을 제공해줌으로서 함수를 호출할 때, 타입을 지정해줄 수 있습니다.

이것이 제네릭 타입입니다.

---

3. 타입스크립트 제네릭타입의 응용

1) extends 사용법

extends 는 확장한다라는 의미로서, 이를 사용하면 타입에 제약을 걸 수 있습니다.

interface LineNum {
	length: number;
}

function getLen<T extends LineNum>(arg: T):T {
	console.log(arg.length);
    return arg
}

LineNum 이라는 타입 인터페이스를 선언한 뒤에 이를 확장해서 getLen 의 제네릭 타입 T 에 적용시켰습니다.

이렇게 되면 T 라는 타입은 최소한 LineNum 의 타입인터페이스를 포함하고 있어야합니다.!

즉, 타입 T 는 객체로서, length 라는 프로퍼티를 가지고 있어야 한다는 거죠.

 

2) 알아두면 좋은 우아한 사용법

function getValue<T, K extends keyof T>(obj:T, key:K) {
	return obj[key]
}

위 함수는 객체와  키를 인자로 받아 객체의 벨류를 리턴하는 함수입니다.

원래 자바스크립트의 경우에는 key 값이 객체에 존재하지 않을 경우에 대한 예외처리를 hasproperty 를 통해 해주어야하는데 타입스크립트를 사용하면 이와같은 예외처리를 할 필요가 없습니다.!

왜냐하면 K extends keyof T 가 자동으로 처리해주거든요 !

K의 타입은 T라는 객체의 key 를 확장시킨것으로서, key 에는 T 라는 객체의 key 값만 들어갈 수 있습니다.!