javascript - TypeScript 可选对象键未按预期运行

Question

我有一个带有条件键的对象。 IE。:

const headers: RequestHeaders = {};

if (...) {
  headers.foo = 'foo';
}

if (...) {
  headers.bar = 'bar';
}

我是 TS 的新手，我希望这能奏效:

type RequestHeaders = {
  foo?: string,
  bar?: string,
};

但是，我将其传递给 fetch以及 fetch 的类型定义的标题是 { [key: string]: string } .我越来越:

Type 'RequestHeaders' is not assignable to type '{ [key: string]: string; }'.
  Property 'foo' is incompatible with index signature.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.

我可以让它工作的唯一方法是 type RequestHeaders = { [key: string]: string }; .有没有办法将键限制为一组预定义的字符串？

Answer 1

fetch API 不接受具有未定义值的键的 header 对象。由于您的每个可选类型都可以是 string | undefined ，编译器拒绝它们。

这是一种过滤标题以删除具有未定义值的标题的方法。其type predicate ( is ) 让编译器满意。

const buildHeaders = (requestHeaders: RequestHeaders): HeadersInit =>
  Object.entries(requestHeaders).filter(
    (entry): entry is [string, string] => entry[1] !== undefined
  );

const headers: RequestHeaders = {};

type RequestHeaders = {
  foo?: string; // optional
  bar?: string; // optional
  baz: string; // required!
};

fetch("Some Data", {
  headers: buildHeaders(headers)
});

这种方法的优点是它允许您将键限制为一组预定义的字符串，同时还允许您指定每个键是必需的还是可选的。