타입스크립트 다형성

타입스크립트가 어떻게 다형성을 줄까?

자바스크립트처럼 여러 타입을 받을수 있다.

하지만 자바스크립트는 any타입이 설정되어 해당 변수가 number타입인 경우에 touppercase같이 스트링에만 사용되는 function을 사용할 경우 컴파일 과정에서 문제없이 진행되고 런타임 과정에서 에러가 뜨는 상황이 발생한다.

하지만 타입스크립트에서 제네릭을 사용하게되면 일반 자바스크립트처럼 자동 타입 할당이 되고 소스 작성 과정중에 타입스크립이 해당 변수가 number타입인걸 알게되고 touppercase같이 스트링 전용 function이 사용이 불가능하다. 에러가 뜨게되서 런타임 과정중에 에러가 나지 않도록 막아준다.

 

=> Polymorphism(다형성) : Generic(제네릭)

:'제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다.'

 

(1) concrete type
- number, boolean, void 등 

(2) generic type
- 타입의 placeholder

type SuperPrint = {
	(arr:number[]):void
	(arr:boolean[]):void
	(arr:string[]):void
}

const superPrint:SuperPrint = (arr) => {
	arr.forEach(i => console.log(i))

superPrint([1,2,3,4])
superPrint([true,false,true])
superPrint(["a","b","c"])

superPrint([1,2,true,false])//Error

 

Generic :

- type의 placeholder 같은 것

- call signiture를 작성할 때, 들어올 타입을 정확히 모를 때 사용하면, 타입스크립트가 상황에 맞게 유추

- 대문자로 시작, 어떤 이름이라도 가능

• 제네릭 단일/복수

// 단일
type SuperPrint = {
	<T>(arr:T[]):void
}

//복수
type SuperPrint = {
	<T,M>(arr:T[], b:M):void
}

const superPrint:SuperPrint = (arr) => {
	arr.forEach(i => console.log(i))
}

superPrint([1,2,3,4])
superPrint([true,false,true])
superPrint(["a","b","c"])
superPrint([1,2,true,false])

 

• 제네릭 확장

type Player<E> = {
	name: string
	extraInfo: E
}

type NicoPlayer = Player<{favFood:string}>

const nico:NicoPlayer = {
	name: "nico",
	extraInfo: {
		favFood: "kimchi"
	}
}

const lynn:Player<null> = {
	name: "lynn",
	extraInfo: null
}

 

=> 라이브러리를 만들거나, 다른 개발자가 사용할 기능을 개발하는 경우엔 제너릭이 유용

nextjs, nestjs,reactjs를 사용한다면 제너릭을 사용하게 될 거고 타입스크립트에게 제네릭을 보내게 될 것이다.

• 다양한 제네릭의 활용 : 타입스크립트의 타입들은 대부분 제네릭으로 선언되어있다. ex) Array<T>, useState<T> number[] == Array<number> useState<number>()

 

https://s0ojin.tistory.com/52