[ React / Generic ] argument (Feat. unkown)

Type Generic의 작성

 

const makeFetch = <TData>(url : string) : Promise<TData> =>{
    return new Promise(( res, rej ) => {
      fetch(url).then(res => {
        if(!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .then(data => res(data as TData))
  })
}

 

Type arugment : unknow

1. JSX와의 모호성 해결

React와 TypeScript를 함께 사용할 때, JSX 문법과 제너릭 문법 사이에 모호성이 발생할 수 있다. 따라서 extend unkown을 추가함으로써 이것이 제네릭 타입임을 선언한다.

2. 타입 안전성

unknow은 TypeScript에서 모든 타입의 상위 타입이다. TData extends unkown은 실질적으로 아무런 제약을 가하지 않지만, 타입 시스템에 이 매개변수가 어떤 타입이든 될 수 있다는 것을 명시한다.

3. 가독성과 의도 표현

코드를 읽는 다른 개발자들에게 이 제네릭타입이 의도적으로 어떤 타입이든 발을 수 있도록 설계되었음을 명시한다.

실제로 <TData extends unknown>은 <TData>와 기능적으로 동일합니다. 그러나 위에서 언급한 이유들, 특히 JSX와의 모호성 해결 때문에 React와 TypeScript를 함께 사용할 때 권장되는 방식이다.

 

 

참조.

https://www.youtube.com/watch?app=desktop&v=dLPgQRbVquo