20220218_TIL : Generic Type

데이터를 props로 넘겨주거나 HOC나 HOF를 활용하면서 타입스크립트로 타입을 지정해줄 때 정해진 타입 외에는 검색이 쉽지않아서 any로 일단 처리하고 넘어간 경우가 꽤 있었는데 오늘 배운 걸로 어느 정도 해결이 될 것 같다.

💡 any VS unknown

• any : TypeScript에서 사용하는 프로그램의 모든 부분에 대한 타입 검증을 비활성화( => 어떤 타입이든 받을 수 있지만 그래서 데이터가 어떤 타입인지에 대한 정보가 없음. 만약 number 타입을 넘긴다고 해도 any 타입이 반환된다. )

• unknown : 확정되지 않은 데이터 타입에 대해 조금 더 안전한 코드로 구성하도록 유도. 들어온 데이터 값에 따라 타입이 추론된다.

const getUnknown = (args: unknown) => {
  if (typeof args === "number") {
    const answer = args + 2;
    return answer;
  } else {
    return "숫자를 넣어주세요";
  }
};

//타입 설정은 unknown으로 했지만
//myResult2 타입은 number | "숫자를 넣어주세요" 로 설정된다.
const myResult2 = getUnknown("철수");
console.log(myResult2);

💡 Generic Type : 어떤 값이 들어올 지 확정되지 않았지만 값이 들어갔을 때 타입을 지정하고 (예 - number), 이 정보를 나중에 반영한다.

// <T>,<U>라는 타입을 지정해준 뒤,
export function firstFunc3<T>(args1: T) {
  return function secondFunc3<U>(args2: U): [T, U] {
    return [args1, args2];
  };
}

const resultFunc3 = firstFunc3("영희")(10);
//결과적으로 인수로 데이터를 넣으면 해당 데이터에 대한 타입 정보가 반영됨.
// -> const resultFunc3: [string, number]
console.log(resultFunc3);

HOC / HOF를 사용할 때 화살표 함수로 generic type을 주면 withAuth.tsx 에서 타입을 지정해줄 수 있겠다. 아직 빈 객체를 왜 사용할 수 없는지 더 확인이 필요하지만..

👩🏻‍💻 오늘의 TIL ...

배운지 며칠 안됐지만 어쨌든 아직 함수 안에 함수 형식으로 컴포넌트 연결하는 부분이 부족하다. 컴포넌트 연결에 대해 좀 더 신경 쓸 필요가 있겠다.
오늘 또 한가지. 오늘 브라우저 저장소에 대해 더 자세히 배웠다. 이 부분 추가적으로 정리하고 다시 코드를 적어보면서 응용해보자.

타입스크립트 공식 문서 참고 docs -any/ unknown, docs - generic, playground