TypeScript 中的通用索引类型值

Question

目标

将以下类型定义中的any替换为适当的泛型：

export type GraphQL_OperationSpecification = {
  variables: GraphQL_OperationVariablesSpecification;
  // off-topic omit
};


export type GraphQL_OperationVariablesSpecification = { 
  [parameterName: string]: GraphQL_OperationVariableSpecification; 
};


export type GraphQL_OperationVariableSpecification = {
  //                                      Here ↓    Here ↓
  transformationFunction?: (requestParameter: any) => any;
  //                                      Here ↓
  mustSubmitIf?: (normalizedRequestParameter: any) => boolean;
    //                                         Here ↓
  transformToNullIf?: (normalizedRequestParameter: any) => boolean;
  // off-topic omit
};

例如下面的代码将被编译而没有错误：

export const graphQL_OperationSpecification: GraphQL_OperationSpecification = {
  variables: {
    targetPaginationPageNumber__numerationFrom0: {
      // Assume that API wants page number from 0, not from 1.
      // However here both parameter and return value are number
      transformationFunction(pageNumber__numerationFrom1: number): number { return pageNumber__numerationFrom1 - 1; }
    },
    itemsCountPerPaginationPage: 
      // Assume that we are accepting string from UI but API needs number
      transformationFunction(stringifiedItemsCountPerPaginationPage: string): number { return String(stringifiedItemsCountPerPaginationPage); }
    }
  }
};

问题

对于GraphQL_OperationVariableSpecification ，一切都很简单：

export type GraphQL_OperationVariableSpecification<RequestParameterForUI, RequestParameterForAPI> = {
  transformationFunction?: (requestParameter: RequestParameterForUI) => RequestParameterForAPI;
  mustSubmitIf?: (normalizedRequestParameter: RequestParameterForUI) => boolean;
  transformToNullIf?: (normalizedRequestParameter: RequestParameterForUI) => boolean;
};

问题从这里开始：

export type GraphQL_OperationVariablesSpecification = { 
  [parameterName: string]: GraphQL_OperationVariableSpecification<RequestParameterForUI, RequestParameterForAPI>; 
};

现在GraphQL_OperationVariablesSpecification需要 2 个泛型参数，但我们事先不知道RequestParameterForUI和RequestParameterForAPI是哪个具体类型。

如果我们向GraphQL_OperationVariablesSpecification添加两个参数， GraphQL_OperationSpecification也将需要它们。 但即使我在需要的地方添加泛型参数：

export type GraphQL_OperationSpecification<RequestParameterForUI, RequestParameterForAPI> = {
  variables: GraphQL_OperationVariablesSpecification<RequestParameterForUI, RequestParameterForAPI>;
};


export type GraphQL_OperationVariablesSpecification<RequestParameterForUI, RequestParameterForAPI> = {
  [parameterName: string]: GraphQL_OperationVariableSpecification<RequestParameterForUI, RequestParameterForAPI>;
};

export const graphQL_OperationSpecification: GraphQL_OperationSpecification<number | string, number> = {
  variables: {
    targetPaginationPageNumber__numerationFrom0: {
      transformationFunction(pageNumber__numerationFrom1: number): number { return pageNumber__numerationFrom1 - 1; }
    },
    itemsCountPerPaginationPage: 
        transformationFunction(stringifiedItemsCountPerPaginationPage: string): number { return String(stringifiedItemsCountPerPaginationPage); }
    }
  }
};

它不会解决问题：

TS2322: Type '(pageNumber__numerationFrom1: number) => number' is not assignable to
 type '(requestParameter: string | number) => number'.
  Types of parameters 'pageNumber__numerationFrom1' and 'requestParameter' are inco
mpatible.
    Type 'string | number' is not assignable to type 'number'.
      Type 'string' is not assignable to type 'number'.
  > 38 |         transformationFunction(pageNumber__numerationFrom1: number): numbe
r { return pageNumber__numerationFrom1 - 1; }
       |         ^^^^^^^^^^^^^^^^^^^^^^

在pageNumber__numerationFrom1的情况下，它是数字，仅此而已。 stringifiedItemsCountPerPaginationPage是字符串，仅此而已。 但是如何向TypeScript解释呢？

Answer 1

我修改了你的最后一个片段，所以它类型检查： TS Playground link 。

但基本上，而不是GraphQL_OperationSpecification<number | string, number> GraphQL_OperationSpecification<number | string, number> ，你想要GraphQL_OperationSpecification<number, string | number> GraphQL_OperationSpecification<number, string | number> .