[TypeScript] Generics

언제나 코드를 작성해야 할 때 고려해야 되는 것은 재사용성이다. Java와 같이 아주 강한 객체지향 언어와 같이 재사용이 가능한 컴포넌트를 만들게 도와주는 것은 TypeScript에도 존재한다. 이름은 제네릭(Generic)이다.

 

먼저 들어온 인수를 무조건 반환하는 함수를 만들어보자.

function fun(num : number):number {
	return num;
}

이는 "any" 타입으로도 작성이 가능하다.

function fun(num : any):any {
	return num;
}

"any" 타입을 사용한다는 것은 num이 어떤 타입이든 받고 반환한다는 의미에서 제네릭이라 할 수 있다. 하지만 이는 반환을 할 때 본질적인 타입을 잃게 된다. 만약 number타입의 값이 들어온다면 반환은 number가 아닌 any로 반환을 하게 된다.

 

그럴 땐 이렇게 작성하면 된다. 참고로 "T"자리에는 아무것으로 작성해도 되나 일반적으로 "T"를 사용한다고 한다.

function fun<T>(num : T):T {
	return num;
}

마치 매개변수로 어떤 타입을 쓰는지 전달해주면 이는 그대로 함수에서 사용하게 된다. 만약 number 타입의 값을 넘겨도 any를 사용했을 때랑 다르게 반환할 때까지 number 타입이라는 것을 알고 있게 된다.

아래는 위 함수를 사용했을 때의 결과다.

let output = fun<string>("myString"); // 출력 타입은 'string'

아래와 같이 사용도 가능하다. 타입 추론이 가능하다는 것인데, 우리가 전달하는 인수에 따라 컴파일러가 타입의 값을 자동으로 정하게 한다는 것이다.

let output = fun("myString"); // 출력 타입은 'string'

배열이 들어와야 될 때는 배열이라는 것을 명시해주어야 한다.

function fun<T>(num : T[]):T[] {
	console.log(num.lenght)
    	return num;
}

 

제네릭 클래스, 인터페이스

제네릭 클래스와 인터페이스도 작성이 가능하다.

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}
 
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
  return x + y;
};

아래와 같은 경우는 하나의 인터페이스를 정의하고 각기 다른 객체들을 정의 가능하다.

interface car<T>{
	name: string;
    	madeBy : string;
    	option: T;
}

const gogo: car<object> = {
	name : "sdf2",
    	madeBy : "home",
    	option : {
    		color : "blue",
        	size: 200
    	}
}

const gaga: car<string> = {
	name : "fasdf",
    	madeBy : "comp",
    	option : "yello"
}