打字稿为什么不能 return header 在函数中？

Question

我是打字稿的新手。我有一个 headers 的值，我使用它效果很好。我尝试将它分离到另一个将被调用的函数中，但它不起作用。

这是没有被调用的代码

var headers: any = "";
try {
    const token = getCookie('XSRF-TOKEN');
    headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-XSRF-TOKEN': token
    };
} catch (err) {
    console.log(err);
}
axios
    .get("https://localhost:", { getHeader })

在使用 headers 作为参数执行 .get 时，此文件有效。但是当我试图把它变成一个函数时。

export function getHeader () {
                  let headers: Record<string, string | null> = {}; // this line

                  const token = getCookie('XSRF-TOKEN');

                  headers = {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-XSRF-TOKEN': token
                  };



                  return headers
}

它抛出一个错误。

Type 'Record<string, string | null>' is not assignable to type 'AxiosRequestHeaders'.

我怎样才能让它像函数一样工作？

编辑：try catch 块不正确。已修复。

编辑：添加了带有错误消息的评论中的更新代码。

Answer 1

您正在尝试将整个函数传递给 axios 配置，而不是使用该函数的结果。

试试这个：

axios.get("https://localhost:", { headers: getHeader() })

换句话说，您的 getHeader 函数存在一些小问题 -

您可以使用 Record 代替 any
您不应将变量初始化为与预期不同的类型 - 为什么是空的 string？改为使用空对象
最好使用 const 或 let 而不是 var

export function getHeader () {
                  let headers: Record<string, string> = {}; // this line

                  const token = getCookie('XSRF-TOKEN');
                  headers = {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-XSRF-TOKEN': token
                  };
                  } catch (err) {
                   console.log(err);
                  }

                  return headers
}

打字稿为什么不能 return header 在函数中？

Typescript why can't return header in function?

frontend

header

typescript

reactjs

axios