解决我希望参数成为另一种类型的值之一的打字稿问题

Question

我正在使用 React 和带有 Typescript 的存储库。这里我有一个应用程序类型：

type ApplicationState = {
  loading: boolean;
  data: string[];
  colors: number[];
  alerts: Alerts;
  error: string;
}

这里我有一个“setter”，它可以单独更改状态中每个键的值：

const mySetter = (key: keyof ApplicationState, value: Partial<ApplicationState>) => {
  return {
    ...state,
    [key]: value,
  }
}

当然，上面的代码会抛出 value 参数的类型错误。 key很简单，我希望keys是ApplicationState类型的key。我如何告诉打字稿我希望该值是 ApplicationState 类型之一（而不是联合类型）？我尝试了 Partial 和 Pick，但打字稿仍然向我抛出错误。

非常感谢任何帮助。

Answer 1

通过使用泛型和索引访问类型，可以在 mySetter 的类型签名中强制执行此约束，如下所示：

<K extends keyof ApplicationState>(key: K, value: ApplicationState[K]) => ApplicationState

这里我们添加一个泛型K，约束到ApplicationState的keys。
key 只是类型 K。在此处阅读有关泛型的更多信息：https://www.typescriptlang.org/docs/handbook/2/generics.html
value 查找键 K 的类型 ApplicationState 通过 索引访问类型 。在这里阅读更多： https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html

下面的完整代码，展示了您所追求的行为：

type ApplicationState = {
  loading: boolean;
  data: string[];
  colors: number[];
  alerts: any;
  error: string;
}

const state: ApplicationState = {
  loading: false,
  data: [],
  colors: [],
  alerts: {},
  error: "some error"
}

const mySetter: <K extends keyof ApplicationState>(key: K, value: ApplicationState[K]) => ApplicationState = (key, value) => {
  return {
    ...state,
    [key]: value,
  }
}

// The following are happy, value is typed to whatever the type of the key is in ApplicationState type
mySetter("loading", false)
mySetter("data", [])
mySetter("colors", [1, 2])

// The following are unhappy, and will not compile, as desired.
mySetter("loading", "not-a-boolean-value")
mySetter("data", "not-an-array-of-strings")
mySetter("colors", { some: "object" })

解决我希望参数成为另一种类型的值之一的打字稿问题

Solving typescript issue where I want a parameter to be one of the values of another type

typescript

typescript-typings

react-typescript