이 연습에서는 방금 본 것과 비슷한 상황을 가정합니다.

id: 1 이고 name: john 인 데이터를 가져오는 함수가 있습니다.

const fetchData = () => {
  return Promise.resolve({ id: 1, name: "John" });
};

이 컴포넌트 내부에서는 useEffect 를 사용하여 데이터를 가져와서 새 상태로 설정합니다.

export const Component = () => {
  const [data, setData] = useState();

  useEffect(() => {
    fetchData().then((val) => {
      setData(val);
    });
  }, []);

  type test = [Expect<Equal<typeof data, Data | undefined>>];
};

그러나 지난번에 보았던 것처럼 데이터가 never[] 로 추론되는 것이 아니라 undefined 로 추론되고 있습니다.

// hovering over `data`
const [data, setData] = useState();

// shows
const data: undefined

Challenge

여러분의 임무는 테스트를 통과할 수 있도록 data를 Data 또는 undefined 타입으로 만드는 방법을 알아내는 것입니다.

Specifying types for useState

useState를 위한 타입 지정

지난 연습에서 살펴본 것처럼 Data 타입을 useState에 전달할 수 있습니다.

export const Component = () => {
  const [data, setData] = useState<Data>();

초기 값을 전달하지 않는 경우 타입 인수를 전달하면 됩니다.

즉, data가 Data 또는 undefined 로 추론되므로 테스트가 통가됩니다.

null 과 같은 다른 것을 useState에 전달하려고 하면 허용되지 않습니다.