[TypeScript] 타입 변수 응용

🎯 타입 변수 여러 사례로 응용하기

1️⃣

function swap<T>(a: T, b: T ) {
  return [b, a];
}

const [] = swap("1", 2);

• 위 코드는 제네릭함수를 사용하여 타입을 할당하였음
• 이 때 T는 number타입을 가리키고 있지만 현재 1은 string 타입을 가리키려 해서 아래 사진과 같은 오류가 발생
  
• 매개변수로 받은 a와 b는 같은 타입일 수도 있지만 다른 타입일 수도 있다.
• 이 때 해결 방법은 아래 코드와 같이 T와 U로 따로 타입 선언을 해주면 됨

function swap<T, U>(a: T, b: U )

• 그럼 a는 string 타입이 되며 b는 number 타입이 된다.

2️⃣

function returnFirstValue<T>(data: T) {
  return data[0];
}

• 위 코드에서는 return 부분에 오류가 발생
• 이유는 아직 함수를 호출하기 전이라 어떤 타입이 올지 모르기 때문에 unknown을 가리키고 있는데 return에서는 data[0]을 반환하려고 하기 때문
  
• 이럴 때는 data[0]의 타입을 바꾸면 된다.

function returnFirstValue<T>(data: T[])

• 이렇게 하면 data의 타입은 stirng과 number 타입을 합친 union타입이 된다.
• 하지만 조금 더 확실한 타입 선언을 위해선 아래 코드와 같은 방법으로 작성

function returnFirstValue<T>(data: [T, ...unknown[]]) {
  return data[0];
}

• 이렇게 작성하면 data 타입은 튜플이다.
• 첫 번째 타입은 T 이다. 그 다음 ...unknown을 적어주면 처음 T를 제외한 그 이후에는 어떤 타입이 들어올지 모르기 때문에 ...unknown으로 작성해주면 됨

3️⃣

function getLength<T extends { length: number }>(data: T) {
  return data.length;
}

let var1 = getLength([1, 2, 3]);

let var2 = getLength("hello");

let var3 = getLength({ length: 10 });

• extends를 사용하여number타입 프로퍼티 length를 가지고 있는 객체를 확장하는 T로 제한
• 이렇게 하면 함수 호출에 있는 여러 값들이 모두 정상적으로 작동

---

출처

한 입 크기로 잘라먹는 타입스크립트
https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard