Type / Generic

Type

any/unknown

TS를 사용하게 되면 타입을 모를경우 any 라는 type를 자주 사용하게 된다.
하지만 TS의 목적은 타입을 명시해줌에 있기 때문에 any를 가급적 사용하지 않는게 좋다.

그렇기 때문에 any 보다는 unknown이 사용 되는데 아래의 코드를 봐보자

// 1. any 타입 (그냥 자바스크립트랑 같음)
const getAny = (args: any) =>{
    return args +2
}
const reuslt = getAny("철수")


// 2. unknown 타입 ()
const getUnknown = (args: unknown) =>{
    if(typeof args === "number"){
        return args+2
    } else{
        return "숫자를 넣어주세요!!!"
    }
    
}

const result2 = getUnknown("철수")

2번 unknown 타입을 보면 함수 안쪽에 타입에 대한 명시를 한번 더 해줬다.
위처럼 타입을 모를때는 any 보단 unknown을 사용하여 원하는 결과에 해당하는 type을 유추해 명시해주어 사용해주는게 좋다

generic

generic 타입은 어떤 타입인지 모르지만 들어온 타입을 그대로 사용한다.
문자/숫자/bool가 들어오면 선언된 함수 전체가 문자/숫자/bool 사용
즉 들어온 타입을 그대로 사용하는 타입이며, any와 다르게 return할 값의 타입이 예측이 가능하다.

function getGeneric<MyType>(arg: MyType): MyType {
  return arg;
}

const aaa: string = "철수";
const bbb: number = 8;
const ccc: boolean = true;

const reuslt4_1 = getGeneric(aaa);
const reuslt4_2 = getGeneric(bbb);
const reuslt4_3 = getGeneric(ccc);

위 코드의 경우 arg의 type은 MyType이며, return arg;에 대한 타입은 (arg: MyType): MyType 맨 앞의 <MyType>는 적용된 모든 <MyType>에 들어온 타입(string, number, boolean....)으로 명시해준다는 의미를 가진다.

function getGenerics<MyType1, MyType2, MyType3>(
  arg1: MyType1, 
  arg2: MyType2,
  arg3: MyType3
): [MyType3, MyType2, MyType1] {
  return [arg3, arg2, arg1];
}

const result6 = getGenerics("철수", "다람쥐초등학교", 8);

배열로 return을 가져올 경우 위처럼 사용이 가능하다.

추가로

// 8.gereric 타입2 - 축약1
function getGenerics<T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] {
  return [arg3, arg2, arg1];
}

const result8 = getGenerics("철수", "다람쥐초등학교", 8);

사용자정의 타입이기에 이렇게 축약또한 가능하며

const result8 = getGenerics<string, string, number>("철수", "다람쥐초등학교", 8);

위의 코드의 <string, string, number>처럼 입력값을 기다린 후 입력값으로 통일시키는게 아닌
미리 명시또한 가능하다.