타입스크립트 기초 문법 - 제네릭 인터페이스 / 타입 별칭 / 클래스

제네릭 인터페이스

interface Test<T,V> {
    name:T;
    age:V;
}

let testValue:Test<string,number> = {
    name: "이름",
    age:20
}

 

제네릭 인터페이스를 사용 할 경우 꼭 사용할 타입을 명시해줘야한다.

함수는 전달하는 매개변수의 타입으로 자동추론하지만 인터페이스는 자동추론 할 방법이 없기때문이다.

 

인덱스 시그니처 활용

인터페이스보다 훨씬 유연하게 프로퍼티와 값 정의 가능

 

interface Test<T> {
    [key:string] : T;
}


let test:Test<number[]> = {
    numberlist: [100,10,20]
}

 

제네릭 타입 별칭

type Test<T> = {
    [key:string] : T
}

let test:Test<string> = {
    name: "username1"
}

 

타입별칭도 인터페이스 활용과 마찬가지로 사용하려하는 타입을 명시해야한다.

 

제네릭 클래스

클래스 역시 마찬가지로 타입이 달라서 생기는 중복 코드의 문제점을 해결하기 위해 타입 변수를 활용할 수 있다.

아래와 같은 class가 있고, list라는 변수를 넘버타입의 배열로 타입 정의 하는 경우

나중에 스트링 타입 배열이나, 여러 타입이 혼합된 배열을 인수로 넣고싶을 때 

같은 모양의 클래스를 또 만들어야 하는 경우가 생긴다.

class NumberList {
	constructor(private list:number[]){}

	push(data: number){
		this.list.push(data)
	}
	pop(){
		return this.list.pop();
	}
	print(){
		console.log(this.list)
	}
}

let numberlist = new NumberList([1,2,3]);

 

중복코드를 피하기 위해 타입변수를 만들어 list에 들어가는 매개변수를 기준으로 타입추론이 가능하게 만들 수 있다.

 

class List<T> {
	constructor(private list:T[]){}

	push(data: T){
		this.list.push(data)
	}
	pop(){
		return this.list.pop();
	}
	print(){
		console.log(this.list)
	}
}

let numberlist = new List([1,2,3]);