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> .