TypeScript (5)

Generic 함수

함수 만들때 () 안에 파라미터를 입력하는데 타입스크립트를 사용하면 파라미터로 타입을 입력할 수도 있다

<> 안에 집어 넣으면 된다
무슨 의미인지 바로 알아보자

---

function 함수(x: unknown[]) {
  return x[0];
}

let a = 함수([4,2])
console.log(a) 

이런 array의 첫 자료를 그대로 출력해주는 함수를 만들었다고 합시다.
a를 출력해보면 타입이 unknown 타입이다

타입스크립트는 타입을 알아서 변경해주지 않습니다.

따라서

console.log(a+1)

을 출력해도 a는 분명이 숫자가 맞지만 아직 타입은 unknown 타입이기 때문에
이 연산도 에러가 발생한다

• 함수에 불확실한 unknown, any, union 타입을 입력하면
  나오는 값도 unknown, any, union 타입이고, 이 때문에 일어나는 문제들이 많다.

해결책

1. narrowing

• 단점: 귀찮음

2. 애초에 타입을 파라미터로 함수에 미리 입력하는 방법도 있습니다. 그럼 원하는 곳에 가변적으로 타입지정 가능

• 이 방식을 Generic이라고 한다

---

Generic 적용한 함수만들기

함수에 <> 이런 괄호를 열면 파라미터를 또 입력할 수 있습니다.

근데 여기 안엔 타입만 입력할 수 있습니다

function 함수<MyType>(x: MyType[]) :MyType {
  return x[0];
}

let a = 함수<number>([4,2])
let b = 함수<string>(['kim', 'park'])

함수<number> () 이렇게 쓰는 순간 MyType 라는 변수에 number가 들어간다고 보면된다

return 되는 타입이 number입니다.

---

function 함수<MyType>(x: MyType) {
  return x - 1
}

let a = 함수<number>(100)

MyType을 number로 지정했는데 이 코드를 실행하면 에러가 뜬다 왜 그럴까?

<MyType> 이라는 곳에 number 말고도 다른거 혹시 집어넣을 수 있으니까 저런 - 1 연산을 미리 방지해주는 것이다.

Generic 타입 제한하기 (constraints)

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

let a = 함수<number>(100)

여기서의 extends는 복사의 개념을 가졌던 interface의 extends와는 달리
제한한다고 생각하면 된다

함수의 리턴값인 MyType을 미리 number로 제한한다는 뜻이다

그렇게 되면 MyType에 다른 자료형을 집어넣는 것을 방지해주기 때문에
에러는 해결할 수 있게된다