Шаблоны интерфейса TypeScript - PullRequest
Новая
       16

Шаблоны интерфейса TypeScript

2 голосов
/ 08 апреля 2019

Я не слишком уверен, один правильный термин для использования TypeScript.Но я чувствую, что повторяюсь и хотел бы лучше шаблонизировать свой интерфейс, чтобы не было путаницы.

У меня есть type, который в основном представляет собой список потенциальных строк.Затем я использовал эти строки в ключах для моего interface.

Это мой файл: 

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 достижимо?

Спасибо!

1 Ответ

2 голосов
/ 08 апреля 2019

Да, это то, что сопоставленные типы предназначены для 

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