如何缩小 TS2339 的类型范围'data'：类型"错误 |TypeWithData'？

Question

我有一个箭头函数:

const getCsrfToken = async () => {
const csrfTokenResponse = await axios.get<any, AxiosResponse<CSRFToken>>(csrfUrl);
if (csrfTokenResponse?.data) {
return csrfTokenResponse.data;
}
return Error('Failed to fetch CSRF token.');
};

TypeScript给出如下警告:

TS2339: Property 'data' does not exist on type 'Error | CSRFToken'.
Property 'data' does not exist on type 'Error'.

如果axios返回一个响应，它的类型将是CSRFToken，它肯定具有data属性。

所以，我认为在csrfTokenResponse?.data中使用?足以保证axios返回CSRFToken而不是Error，但TypeScript仍然给我这个消息。

如何修复TypeScript警告?

4.4打印稿

Answer 1

有多种方法可以修复此错误。

铸造

如果您确定返回值已经定义，则可以强制转换返回值。

(csrfTokenResponse as CSRFToken).data

访问

前的类型检查您可以使用以下实用程序类型来断言返回值是否为错误

const isError = (err: unknown): err is Error => err instanceof Error;

抛出错误，而不是返回错误。

您可以通过使用throw Error而不是返回它来保持一致的返回类型。

更好的返回格式

下面的返回格式的灵感来自于go处理返回值的方式。

const getCsrfToken = async () => {
const csrfTokenResponse = await axios.get<any, AxiosResponse<CSRFToken>>(csrfUrl);
if (csrfTokenResponse?.data) {
return [data, null] as const;
}
return [null, Error('Failed to fetch CSRF token.')] ;
};

并像这样使用

const [data, error] = await csrfTokenResponse()