使用 TypeScript 键入“复杂”对象

Posted 2023-03-13

【中文标题】使用 TypeScript 键入“复杂”对象

【英文标题】：Typing a "complex" object with TypeScript

【发布时间】：2021-07-15 09:02:42

【问题描述】：

我正在尝试查看在键入具有预定义类型的对象时是否可以让 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>[]

【参考方案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>[]

【讨论】：

好收获！它现在建议密钥。输入时不应该还建议defaultOption的字符串吗？

Arhh.. 我只需要使用带有| 的类型而不是枚举

DishOptionBaseChoices 是枚举，与字符串不同。如果您尝试键入以下内容，它将建议您枚举值：defaultOption: DishOptionBaseChoices. 如果您真的希望 defaultOption 只是一个字符串，您可以像这样定义您的类型：type DishOptionBaseChoices = 'RIS' | 'GRÖNKÅL' | 'MIX'