Photo by Matheus Cenali on Unsplash
type SuperPrint = <T>(a: T[]) => T
const superPrint: SuperPrint = (a) => a[0]
const a = superPrint([1,2,3,4]);
const b = superPrint([true, false, true]);
const c = superPrint(["a", "b", "c"]);
const d = superPrint([1,2,"a",true,false,"b"]);
```ts
type SuperPrint = <T>(a: T[]) => T
const superPrint: SuperPrint = (a) => a[0]
function superPrint<V>(a: V[]){
return a[0]
}
function superPrint<V>(a: V[]) {
return a[0]
}
const a = superPrint<boolean>([1,2,3,4])
const b = superPrint([true,true,false])
const c = superPrint(["a","b","c"])
const d = superPrint([1,"ab",true,"123"])
<number>
대신 <boolean>
을 직접 넘겨준다면const a = superPrint<boolean>([1,2,3,4])
<- 에러type Player= {
name:string
extraInfo:
}
extraInfo를 가진 Player type을 만들때
type Player=<E>{
name:string
extraInfo:E
}
any를 사용하면 보호장치가 없기 때문에 E라는 제네릭을 받게 할 수 있음 (꼭 E라고 할 필요 없음)
bob이라는 플레이어를 만들고 extraInfo엔 object가 들어가게 설정
const bob: Player<{}>
object 내부에는 favFood:string을 넣어줌
const bob: Player<{favFood:string}>
ExtraInfo 에 favfood를 작성하기
type Player=<E>{
name:string
extraInfo:E
}
const bob: Player<{favFood:string}> = {
name:"bob",
extraInfo: {
favFood:"krabby patty"
}
}
Player를 따로 빼서 줄여보기
type Player=<E>{
name:string
extraInfo:E
}
type bobPlayer = Player<{favFood:stirng}>
const bob: bobPlayer = {
name:"bob",
extraInfo: {
favFood:"krabby patty"
}
}
bobExtra 타입을 만들고 Plyaer타입의 제네릭 안에 넣어주기
넣어준 값을 bobPlyaer라는 새로운 타입으로 만듦
bob의 타입을 bobPlayer로 지정
type Player<E> = {
name:string
extraInfo:E
}
type bobExtra = {
favFood:string
}
type bobPlayer = Player<bobExtra>
const bob: bobPlayer = {
name:"bob",
extraInfo: {
favFood:"krabby patty"
}
}
이런식으로 타입을 생성하고 그 타입에 또다른 타입을 넣어서 사용할 수 있음
type Player<E> = {
name:string
extraInfo:E
}
type bobExtra = {
favFood:string
}
type bobPlayer = Player<bobExtra>
const bob: bobPlayer = {
name:"bob",
extraInfo: {
favFood:"krabby patty"
}
}
const dungEater: Player<null> = {
name: "Dung Eater",
extraInfo:null
}
이런식으로 재사용도 가능함
많은 타입중에 바뀔 수 있는 값이 있다면 거기에 제네릭을 넣으면 됨
type Player<E> = {
name:string
extraInfo:E
}
이처럼 제네릭은 함수 뿐만 아니라 다른곳에서도 쓰임
타입스크립트의 기본적인 타입은 제네릭으로 만들어져 있음
Array타입의 arrNumbers 타입
type arrNumbers
타입스크립트의 표준 라이브러리를 보면 Array가 Interface로 되있는걸 볼 수 있고
interface Array<t>var Array: Array...
<T>
를 제네릭으로 받는 것을 볼 수 있음
제네릭에 number를 넣어 number로 된 array로 지정
type arrNumbers = Array<number>
let a:arrNumbers = [1, 2, 3, 4]
이런 구조를 자주 보게 됨
제네릭을 사용하는 또다른 방법임
function printAllNumbers(arr: number[])
요렇게 제네릭을 사용할수도 있음
function printAllNumbers(arr: Array<number>)
다른 패키지,라이브러리에도 제네릭을 사용한 타입이 지정된 함수를 볼 수 있음.
거기에 무슨 타입을 사용할건지만 넘겨주면 됨
useState는 제네릭을 받음
그렇기 떄문에 useState() 이렇게 사용하면 타입스크립트는 state 타입을 알 수 없음
대신 이렇게 사용해야함
useState<number>()
사용자가 제네릭를 보내면 useState의 콜 시그니처가 number 타입의 useState가 됨.