Typing a "complex" object with TypeScript

Question

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.

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

lbsn · Accepted Answer · 2021-04-21 07:46:36Z

2

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

answered Apr 21, 2021 at 7:46

lbsn

2,4221 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Norfeldt Over a year ago

Good catch! It now suggest the keys. Shouldn't it also suggest the string for defaultOption when typing?

Norfeldt Over a year ago

Arhh.. I just have to use a type with | instead of enum

lbsn Over a year ago

DishOptionBaseChoices is enum, that's not the same as string. It will suggest you the enum values if you try typing this: defaultOption: DishOptionBaseChoices. If you really want defaultOption to be just a string you can define your type like this: type DishOptionBaseChoices = 'RIS' | 'GRÖNKÅL' | 'MIX'

Collectives™ on Stack Overflow

Typing a "complex" object with TypeScript

Working solution

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Working solution

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related