TypeScript - 제네릭 인터페이스

interface KeyPair<K,V> {
	key:K;
    value:V;
}

let keyPair:KeyPair<string,number> = {
	key:"key",
    value:0
}

let keyPair2:KeyPair<boolean,string[]> = {
	key:true,
    value:["1"]
}

하나의 인터페이스로 다양한 타입의 객체를 만들고싶다면 위와같이 제네릭 인터페이스를 만들면된다. 

 

// 인덱스 시그니처

interface NumberMap {
	[key:string]:number;
}

let numberMap1 : NumberMap = {
	key:1,
    	awdawd:2  
}

-------------------------------------------------
// 제네릭 인덱스 시그니처 

interface Map<V> {
	[key:string]:V;
}

let stirngMap:Map<string> = {
	key:"hello"
}

let booleanMap:Map<booelan> = {
	key=true
}

인덱스 시그니처로 제네릭으로 유연하게 만들어서 사용할 수 있다.

 

다음은 제네릭 인터페이스의 실제 사용 예시입니다.

// 한 게임에서 전사,마법사,궁수,초보자 총 3개의 클래스를 가지고있다고 가정하겠습니다.

interface Gladiator {
	type:"gladiator";
    skill:{
    	slash:string;
	}
}

interface Wizard {
	type:"wizard";
    skill:{
        hill:string;
    }
}

interface Archer{
	type:"archer"
    skill:{
        shoot:string;
    }
}

interface Beginner {
	type:"beginner";
}

interface User {
	name:string;
    class: Gladiator|Wizard|Archer|Beginner
}

function handleClassChange(user:User){
	if(user.class.type !== "beginner"){
    	console.log("이미 전직한사람은 입장이 불가능합니다.")
        return
    }
    const name = user.name
    console.log(`초보자 ${name}님 환영합니다.`)
}

const archerUser:User = {
	name:"나는 궁수"
    class:{
    	type:"archer",
    	skill:{
			shoot:"화살로 적을 공격합니다."
		}
    }
}
const gladiatorUser:User = {
	name:"나는 전사"
    class:{
    	type:"gladiator",
    	skill:{
			slash:"대검으로 적을 공격합니다."
		}
    }
}

User 인터페이스에서 class속성의 타입을 유니온타입으로 명시해주고있습니다. 현재 직업이 4개라서 이방법도 어찌저찌하면 쓸순있겠지만 만약 게임이 확장되고 직업이 수십개가된다면 관리가 엄청 어려울것입니다. 이럴때 제네릭이 유용하게 사용됩니다.

 

// 한 게임에서 전사,마법사,궁수,초보자 총 3개의 클래스를 가지고있다고 가정하겠습니다.

interface Gladiator {
	type:"gladiator";
    skill:{
    	slash:string;
	}
}

interface Wizard {
	type:"wizard";
    skill:{
        hill:string;
    }
}

interface Archer{
	type:"archer"
    skill:{
        shoot:string;
    }
}

interface Beginner {
	type:"beginner";
}

interface User<T> {
	name:string;
    class: T
}

function handleClassChange(user:User<Beginner>){
    const name = user.name
    console.log(`초보자 ${name}님 환영합니다.`)
}

const archerUser:User<Archer> = {
	name:"나는 궁수"
    class:{
    	type:"archer",
    	skill:{
			shoot:"화살로 적을 공격합니다."
		}
    }
}
const gladiatorUser:User<Gladiator> = {
	name:"나는 전사"
    class:{
    	type:"gladiator",
    	skill:{
			slash:"대검으로 적을 공격합니다."
		}
    }
}

위와같이 User타입에 제네릭을 주었습니다. 이제 handleClassChange라는 함수는 Beginner 인터페이스의 형식을 충족하는 타입의 파라미터만 사용할 수 있게되었습니다.