使用 TypeScript 键入“复杂”对象

Question

我正在尝试查看在键入具有预定义类型的对象时是否可以让 VS Code 帮助我。

一个菜对象可以是这样的：

{
      "id": "dish01",
      "title": "SALMON CRUNCH",
      "price": 120,
      "ingredients": [
        "MARINERAD LAX",
        "PICKLADE GRÖNSAKER",
        "KRISPIG VITLÖK",
        "JORDÄRTSKOCKSCHIPS",
        "CHILIMAJONNÄS"
      ],
      "options": [
        {
          "option": "BAS",
          "choices": ["RIS", "GRÖNKÅL", "MIX"],
          "defaultOption": "MIX"
        }
      ]
}

我目前的尝试是这样的

enum DishOptionBaseChoices {
  Rice = 'RIS',
  Kale = 'GRÖNKÅL',
  Mix = 'MIX',
}

type DishOption<T> = {
  option: string
  choices: T[]
  defaultOption: T
}

type DishOptions = {
  options: DishOption<DishOptionBaseChoices>[]
}

type Dish = {
  id: string
  title: string
  price: number
  ingredients: string[]
  options: DishOptions
}

（不确定其中一些是否应该是interface 而不是type）

计划是为所有“类型”的选项制作枚举。自动建议适用于id，但在编写options 时却不行。

工作解决方案

type ChoiceForBase = 'RIS' | 'GRÖNKÅL' | 'MIX'

type DishOption<OptionType, ChoiceType> = {
  option: OptionType
  choices: ChoiceType[]
  defaultOption: ChoiceType
}

type Dish = {
  id: string
  title: string
  price: number
  ingredients: string[]
  options: DishOption<'BAS', ChoiceForBase>[]
}

Answer 1

在Dish 类型上定义了options: DishOptions，但在DishOptions 类型上又定义了一个属性options。因此，根据您当前的类型定义，您的 options 属性如下所示：

const dish: Dish = {
    options: {
        options: [{
            choices: ...
        }]
    }
}

如果您希望 options 成为 DishOption 的数组，请更改您的 Dish 定义：

type Dish = {
    id: string
    title: string
    price: number
    ingredients: string[]
    options: DishOption<DishOptionBaseChoices>[]
}