TypeScript严格模式下useSWR传递token出现类型错误如何解决？

触发类型报错的核心有2点：

• fetchWithToken 未指定返回类型，axios.get 默认返回的 data 字段类型为 unknown，和 useSWR 声明的 ProductInfo 泛型不匹配
• TypeScript 严格模式下会强校验 useSWR 传入的 fetcher 函数返回值是否和声明的泛型一致，因此抛出类型不兼容错误

方法1：给fetcher函数增加泛型声明（推荐，可复用） #

将 fetchWithToken 改造为泛型函数，调用时传入对应返回类型即可匹配：

// 改造后的通用请求函数
const fetchWithToken = <T = unknown>(url: string, token: string): Promise<T> => 
axios.get<T>(url, {
        headers: {
            Authorization: `Bearer ${token}`,
        },
        withCredentials: true 
    })
    .then(result => result.data);

// useSWR调用时指定泛型即可
const { data: ProductDetail } = useSWR<ProductInfo>([`/goods?lim=8`, token], fetchWithToken<ProductInfo>, {
    dedupingInterval: 1000000,
}) 

方法2：直接指定单场景的返回类型（无需复用请求函数时可用） #

如果fetchWithToken仅用于这个接口，也可以直接固定返回类型：

const fetchWithToken = (url: string, token: string): Promise<ProductInfo> => 
axios.get<ProductInfo>(url, {
        headers: {
            Authorization: `Bearer ${token}`,
        },
        withCredentials: true 
    })
    .then(result => result.data);

修改后原useSWR调用代码无需改动即可通过类型校验。

内容的提问来源于stack exchange，提问作者ssksksks