tipuri - Șablonare Interfață TypeScript


Nu sunt prea sigur de termenii corecți pentru a folosi TypeScript. Dar simt că mă repet și aș vrea să îmi șablonez mai bine interfața ca să fie mai puțin confuză.

Am un type care este practic o listă de șiruri posibile. Apoi am folosit acele șiruri ca și chei pentru interface.

Acesta este fișierul meu:

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
}

Aș dori să obțin ceva de genul acesta:

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
}

Ar fi realizabil ceva de genul acesta în TypeScript?

Mulțumesc!

Răspuns #1

Da, pentru asta sunt tipurile mapate

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

O altă modalitate de a obține același tip este să folosești o combinație de tipuri încorporate Partial și Record:

 error: Partial<Record<PRODUCT_ACTION_KEYS, IErrorResponse>>