타입스크립트에서 비동기 함수 리턴값을 정의하려고 하는데 undefined 라서 타입 오류가 발생합니다.

일단 1번에서 response가 undefined가 온다고 생각하고, response.data.foo 는 FooType, response.data.bar 는 BarType이라고 하면, (그리고, 되도록 props도 type 이 있는게 좋을 듯 하군요.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
type Props = FetchRequestType;
type DataType = {
	a: FooType;
	b: BarType;
} | undefined;

function MyComponent(props: Props) {
	const [data, setData] = useState<DataType>();
	const onFetchData = useCallback(async () => {
		const response = await fetchData(props); // 1.
		if (response) {
			const data = { a: response.data.foo, b: response.data.bar }; // 2.
			setData(data);
		} else {
			setData(undefined);	
		}
	}, [props]);

	useEffect(() => {
		onFetchData();
	}, [onFetchData]);
}

안녕하세요! 타입스크립트에서 비동기 함수의 반환 타입을 정의하는 방법에 대해 답변해드리겠습니다. 먼저, undefined가 반환될 가능성이 있는 경우에는 해당 타입을 Optional하게 정의해야 합니다. 이를 위해서는 반환 타입 끝에 "?"를 붙이면 됩니다. 1. 예를 들어, Promise를 반환하는 함수의 반환 타입을 정의하려면 다음과 같이 작성할 수 있습니다. 2. 여기서 MyDataType는 반환될 데이터의 타입을 나타내는 인터페이스 혹은 타입 별칭입니다. 만약 반환되는 데이터의 타입이 없다면 undefined를 포함한 유니언 타입으로 정의하면 됩니다. 그리고, 아래 코드에서 setState(data) 부분에서 타입 관련 에러가 발생하는 경우에는 useState의 제네릭 타입으로 데이터 타입을 명시해주면 됩니다. 예를 들어, MyDataType이라는 인터페이스가 있다면 다음과 같이 작성할 수 있습니다. 3. 이렇게 하면 data 변수는 MyDataType 혹은 undefined 중 하나의 값만 가질 수 있습니다. 따라서 setState(data) 부분에서 타입 관련 에러가 발생하지 않게 됩니다. 마지막으로, useCallback 함수에서 onFetchData 함수를 정의할 때, 반환 타입도 함께 명시해주면 더욱 타입 안정성을 높일 수 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다. 이렇게 하면 onFetchData 함수가 Promise<void>를 반환하는 것으로 정의되며, 반환 타입이 명시되어 있으므로 타입 관련 에러를 미리 방지할 수 있습니다. 이상으로, 비동기 함수의 반환 타입을 정의하는 방법과 useState 제네릭 타입을 활용하여 타입 안정성을 높이는 방법에 대해 설명해드렸습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#1
async function myAsyncFunction(): Promise<MyDataType | undefined> {
  // 비동기 작업 수행 후 MyDataType 혹은 undefined 반환
}


#2
const [data, setData] = useState<MyDataType | undefined>();

#3
const onFetchData = useCallback(async (): Promise<void> => {
  const response = await fetchData(props);
  const data = { a: response.data.foo, b: response.data.bar };

  setData(data);
}, [props]);