打字稿：限制可以通过特定功能的泛型和索引访问类型传递的键的数量

Question

抱歉这个标题，可能有点混乱？让我解释一下我的问题。

我正在使用 React 状态管理库，其中我的应用程序状态如下所示：

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

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

然后我有一个setter，它确保键是ApplicationState的键，值是Application状态的值类型之一。

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

所以我的问题是，如何将键 (K) 限制为仅属于某些类型的状态（例如，我只希望它更改加载、警报和错误）？它当前的设置方式允许使用 ApplicationState 的任何键 (K)。

感谢您的帮助！

Answer 1

只需使用像'loading' | 'error'这样的联合类型，例如：

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

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

type SomeApplicationStates = 'loading' | 'error';

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

您也可以为类型参数写 <K extends ('loading' | 'error')>。

打字稿：限制可以通过特定功能的泛型和索引访问类型传递的键的数量

Typescript: Limit the number of keys that can be passed via generics and indexed access types for a particular function

typescript

typescript-generics

typescript-typings

react-typescript