TypeScript 接口(interface)模板

Question

我不太确定使用 TypeScript 的正确术语。但我觉得我在重复自己，并且希望更好地模板化我的界面，这样就不那么困惑了。

我有一个type，它基本上是一个潜在字符串的列表。然后我在我的界面的键中使用了这些字符串。

这是我的文件:

import { IErrorResponse } from '~/interfaces'

export type PRODUCT_ACTION_KEYS =
  | 'creatingProducts'
  | 'fetchingCategories'
  | 'fetchingProduct'
  | 'fetchingProducts'

export interface IProductsReducer {
  categories: any[]
  error: {
    creatingProduct?: IErrorResponse
    fetchingCategories?: IErrorResponse
    fetchingProduct?: IErrorResponse
    fetchingProducts?: IErrorResponse
  }
  is: {
    creatingProduct: boolean
    fetchingCategories: boolean
    fetchingProduct: boolean
    fetchingProducts: boolean
  }
  products: any[]
  selectedProduct?: any
}

我想要得到这样的东西:

import { IErrorResponse } from '~/interfaces'

export type PRODUCT_ACTION_KEYS =
  | 'creatingProducts'
  | 'fetchingCategories'
  | 'fetchingProduct'
  | 'fetchingProducts'

export interface IProductsReducer {
  categories: any[]
  error: {
    [PRODUCT_ACTION_KEYS]?: IErrorResponse
  }
  is: {
    [PRODUCT_ACTION_KEYS]: boolean
  }
  products: any[]
  selectedProduct?: any
}

这样的事情可以在 TypeScript 中实现吗？

谢谢!

Answer 1

是的，就是这样mapped types是为了

export interface IProductsReducer {
  categories: any[]
  error: {
    [key in PRODUCT_ACTION_KEYS]?: IErrorResponse
  }
  is: {
    [key in PRODUCT_ACTION_KEYS]: boolean
  }
  products: any[]
  selectedProduct?: any
}

获得相同类型的另一种方法是使用内置 Partial 和 Record 类型的组合:

 error: Partial<Record<PRODUCT_ACTION_KEYS, IErrorResponse>>