CODEWITHSUNDEEP
javascriptjsontypescriptobject
Norfeldt
Norfeldt

Reputation: 9708

Typing a "complex" object with TypeScript

I'm trying to see if I can get VS Code to assist me when typing an object with predefined types.

A dish object can look like this:

{
      "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"
        }
      ]
}

My current attempt looks like this

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
}

(not sure if some of them should be interface instead of type)

the plan is to make enums for all "types" of options. The auto-suggestion works fine with the id but not when writing the options.

vscode example

Working solution

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>[]
}

Upvotes: 1

Views: 725

Answers (1)

lbsn
lbsn

Reputation: 2412

On type Dish you defined options: DishOptions, but then on type DishOptions you again defined a property options. So with you current types definition your options property looks like this:

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

If you want options to be an array of DishOption change your Dish definition:

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

Upvotes: 2

Related Questions