(TypeScript) - 타입 변수 응용하기

■ 타입 변수 응용하기

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

const [a, b] = swap('string', 2);

 

다음과 같이 a: T, b; U 와 같이 타입 변수를 여러 개 선언해서 사용하는 것도 가능하다.

 

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

 

이렇게 제네릭을 사용해서 받게 되면 unknown 형식에서 사용할 수 없다는 오류가 뜬다.

왜냐하면 아직 해당 함수 호출 전까지는 해당 인수의 값이 추론 되지 않기 때문이다.

 

즉, 데이터가 배열이라는 확신도 없을 뿐더라 호출이 되지 않았기 때문에 unknown 인 것이다. 

 

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

 

그럴 경우 data 의 값을 T[] 로 바꿔주면 된다.

T의 값은 어떤 것인지는 모르지만 unknown 배열 타입이기 때문에 오류가 사라진다.

 

let str = returnFirstValue([1, 'hello', 'mynameis']);

 

다음과 같이 지정을 하게 되면 str 는 number | string 유니온 타입으로 나온다.

 

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

 

그런데 여기서 만약 data[0] 가 number 값이 나오기를 원한다면 튜플 타입으로 지정해주면 된다.

우선 [] 로 튜플로 만들어주고, 첫 번째 요소를 타입 변수로 넣어준다.

다음 요소는 우리가 알 필요가 없기 때문에 rest 파라미터 쓰듯이 ...unknown[] 배열로 넣어주면 된다.

 

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

let var1 = getLength([1, 2, 3]);
let var2 = getLength('12345');
let var3 = getLength({ length: 10 }); //10
let var4 = getLength(10); //불가능!

 

아래 예시처럼 여러 개의 타입에서 길이를 구하고 싶다고 해보자.

 

우선은 data: T 를 통해 DATA 가 어떤 타입이 오든지 다 받는다.

그러면 data.length 에 오류가 생기는데, 숫자 타입이 아닌 경우 length 함수를 쓰지 못해서 그렇다.

그럴 경우 우리가 반환 타입을 length:number 로 extends(확장) 해서 받으면 된다.

 

interface InterfaceA {
    length: number;
}

interface InterfaceB extends InterfaceA {}

 

이해를 돕기 위해 말하자면, 이전에 인터페이스를 했을 때도 InterfaceB 는

InterfaceA 확장 받아서 반드시 length: number 를 포함해야 했다.

 

마찬가지로 위의 코드도 length가 number 인 것으로 타입을 확장해서 받으면 길이가 숫자에 해당하는 것만 구하게 되는 것이다.

 

따라서 배열도 length 를 가지고 있기 때문에 허용이 되고, 문자도 , 객체는 length 프로퍼티가 있기 때문에 가능하다.

getLength(10)은 number 타입으로 length 프로퍼티가 없기 때문에 정상적으로 오류 처리가 된다.