타입을 파라미터로

타입스크립트를 쓸 때 파라미터로 타입을 입력할수 있다.
바로 <> 를 쓰는것인데, 그 안에 집어넣으면 된다.

예를들어
1. 아무렇게나 생긴 array자료 입력
2. 그 array의 처음껄 뱉어주기
의 함수를 만들었다고 쳐보자

function 함수(x:unknown[]){
  return x[0];
}
let a = 함수([4,2])
console.log(a)

어떤게 출력이 될까? 예상대로 4가 출력될 것이다.
근데 a의 타입을 확인해보면 number가 아닌 unknown타입일 것이다.
그 이유는 array의 타입도 unknwon 타입이라서 그렇다.
고로

console.log(a+1)

를 하면 에러가 뜰 것이다. number타입이 아니기 때문.

이 문제의 해결방법이 있는데 generic을 사용하는 것이다.

Generic 적용한 함수 만들기

function 함수<MyType>(x:MyType[]):MyTpye{
  return x[0];
}
let a = 함수<number>([4,2])
let b = 함수<string>(['kim','park'])

그럼 이제 함수를 사용할 때도 <> 안에 파라미터처럼 타입을 입력할 수 있다.
a의 변수를 보면 이제 함수에는 number타입이 들어간다고 보면 된다.

함수(x:number[]):number{} 랑 독같이 동작한다는 말

Generic 타입 제한하기

extends문법을 쓰면 넣을 수 있는 타입을 제한할 수 있는데
interface문법에 쓰는 extends와는 다른 느낌이다.
interface문법에 쓰는 extends는 복사라면
이번 extends는 비슷한 속성을 가지고 있는지 if문으로 체크하는 문법이라고 보면 쉽다.

function 함수<MyType extends number>(x: MyType){
  return x -1
}
let a =함수<number>(100)

요렇게 하면 에러없이 잘 될 것이다.

function 함수<MyType>(x:MyType){
  return x.length
}
let a = 함수<string>('hello')

이런 코드는 왜 에러가 뜰까?
바로 지금은 MyType에 string이 들어가있지만, 나중에 number를 넣으면 이상해지기 때문에
일단 .length같은 기능을 못하게 납두는 것이다.
그래서 MyType을 extends로 정확히 제한해주면 된다.

interface lengthCheck {
  length : number
}
function 함수<MyType extends legngthCheck>(x:MyType){
  return x.length
}
let a = 함수<string>('hello') // 정상
let a = 함수<number>(1234) //에러

이렇게 해준다면 위의 a만 extends를 통과해 에러를 안나게 할 수 있을 것이다.