How can TypeScript leverage types to build values?

Question

How can TypeScript leverage types to build values?

I am dealing with the code snippet provided below:

type Chocolate = {
    'flavour': 'Chocolate',
    'calories': 120
}
type Vanilla = {
    'flavour': 'Vanilla',
    'calories': 90
}
type Mango = {
    'flavour': 'Mango',
    'calories': 110
}
type Mint = {
    'flavour': 'Mint',
    'calories': 100
}


type UseCase = Chocolate | Vanilla | Mango | Mint;


export const chocolate: Chocolate = {
    'flavour': 'Chocolate',
    'calories': 120
}
export const vanilla: Vanilla = {
    'flavour': 'Vanilla',
    'calories': 90
}
export const mint: Mint = {
    'flavour': 'Mint',
    'calories': 100
}
export const mango: Mango = {
    'flavour': 'Mango',
    'calories': 110
}

The structure of the code seems quite verbose. Is there a way to efficiently use types as values (or vice versa) since they're essentially similar?

Note that all calorie values are fixed within predefined ranges (i.e., 90/100/110/120), so it's not just a generic number.

typescript

Answer 1

Answer №1

If you want to specify string and number literals as literal types, you can utilize a const assertion like this:

export const vanilla = {
    flavour: "Vanilla",
    calories: 90,
} as const;

To determine the type, use the typeof operator:

export type Vanilla = typeof vanilla;

For a more efficient approach, group all flavors in one object and apply as const to that single object:

const flavors = {
    chocolate: {
        flavour: "Chocolate",
        calories: 120,
    },
    vanilla: {
        flavour: "Vanilla",
        calories: 90,
    },
    mint: {
        flavour: "Mint",
        calories: 100,
    },
    mango: {
        flavour: "Mango",
        calories: 110,
    },
} as const;

You can extract the flavor types using typeof:

type Chocolate = typeof flavors.chocolate;
type Vanilla = typeof flavors.vanilla;
type Mango = typeof flavors.mango;
type Mint = typeof flavors.mint;
type UseCase = Chocolate | Vanilla | Mango | Mint;

To access all flavors regardless of key:

type UseCase = typeof flavors[keyof typeof flavors]; // same result as above

To retrieve the initial exports, destructure the flavors object:

export const { chocolate, vanilla, mint, mango } = flavors;

Playground

Answer 2

If you want to specify string and number literals as literal types, you can utilize a const assertion like this:

export const vanilla = {
    flavour: "Vanilla",
    calories: 90,
} as const;

To determine the type, use the typeof operator:

export type Vanilla = typeof vanilla;

For a more efficient approach, group all flavors in one object and apply as const to that single object:

const flavors = {
    chocolate: {
        flavour: "Chocolate",
        calories: 120,
    },
    vanilla: {
        flavour: "Vanilla",
        calories: 90,
    },
    mint: {
        flavour: "Mint",
        calories: 100,
    },
    mango: {
        flavour: "Mango",
        calories: 110,
    },
} as const;

You can extract the flavor types using typeof:

type Chocolate = typeof flavors.chocolate;
type Vanilla = typeof flavors.vanilla;
type Mango = typeof flavors.mango;
type Mint = typeof flavors.mint;
type UseCase = Chocolate | Vanilla | Mango | Mint;

To access all flavors regardless of key:

type UseCase = typeof flavors[keyof typeof flavors]; // same result as above

To retrieve the initial exports, destructure the flavors object:

export const { chocolate, vanilla, mint, mango } = flavors;

Playground

Answer 3

Answer №2

If you're searching for a solution similar to this

const FlavorList = {
    Strawberry: 100,
    Mint: 80
}

type FlavorType = keyof FlavorList;

type Recipe<T extends FlavorType> = {
    flavor: T,
    calories: FlavorList[T],
}

const prepareRecipe = <T extends FlavorType>(ingredient: Recipe<T>) => {}

prepareRecipe({flavor: 'Strawberry', calories: 100})

Answer 4

If you're searching for a solution similar to this

const FlavorList = {
    Strawberry: 100,
    Mint: 80
}

type FlavorType = keyof FlavorList;

type Recipe<T extends FlavorType> = {
    flavor: T,
    calories: FlavorList[T],
}

const prepareRecipe = <T extends FlavorType>(ingredient: Recipe<T>) => {}

prepareRecipe({flavor: 'Strawberry', calories: 100})

How can TypeScript leverage types to build values?

Answer №1

Answer №2

Similar questions

Warning: An alert has been triggered while generating files using create-react-app

Error message: TypeScript throwing an error stating that the method is undefined while trying to implement

Having trouble establishing a connection with SignalR on my backend, it just doesn't seem to work properly

Error: Unable to use import statement outside of a module when deploying Firebase with TypeScript

Searching for films directed or produced by Michael Bay using Typegoose

Issue 1068: Attribute not found within angular 2 (Ahead of Time Compilation)

Angular Service singleton constructor being invoked multiple times

How can I clear the cache for GetStaticPaths in NextJs and remove a dynamic route?

The incorrect initial state is causing issues in the Zustand state management on the Next.js server side

I am facing an issue with my useFetch hook causing excessive re-renders

Typescript: Maximizing efficiency and accuracy

Tips for creating a unit test case for a specialized validator in angular reactive forms

How to use attributes in Angular 2 when initializing a class constructor

The NodeJS application experiences a crash if incorrect parameters are provided to the API

Ways to incorporate debounce time into an input search field in typescript

NestJS encountered an error while running the test suite: module 'src/article/article.entity' could not be located from 'comment/comment.entity.ts'

I'm currently working on building a fresh window with Tauri 1.2, combining the powers of Rust, React, and Typescript. However, I've encountered a few

display angular filter for mat radio option selected from mat-radio group

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

What could be causing the issue: Unable to locate or read the file: ./styles-variables?