In Typescript, it mandates that a string value must be one of the values within the object

Question

In Typescript, it mandates that a string value must be one of the values within the object

There is a constant declaration mentioned below:

export const Actions = {
    VIEW: 'view',
    EDIT: 'edit',
};

Imagine there's a function like this:

// Ensuring that the action variable below is always a string with value either view or edit
function insertAction(action: string): void {
  console.log('I have inserted the action successfully');
}

The objective is to restrict the action parameter to only have values of view | edit, and this restriction should be dynamic. Please refrain from suggesting a union solution, as it does not serve the purpose.

I attempted using a signature like this:

function insertAction(action: typeof Actions[keyof typeof Actions]

However, it did not work as expected.

Even after defining the signature, I am able to call the function insertAction('whatever') without any compilation errors or linter warnings.

I am using TypeScript version 4.4.2 in my package.json, along with PHPStorm Editor and Next.js

    "typescript": "^4.4.2"

typescript

Answer 1

Answer №1

why not utilize an enum and assign action:EAction?

This method would appear as follows:

export enum EActions {
    VIEW = 'view',
    EDIT = 'edit',
}

Regarding your function,

function insertAction(action: EAction): void {
  console.log('trust me i inserted the action');
}

You will encounter a type error like this:

insertAction('whatever'); // will show you error

The argument of type '"whatever"' cannot be assigned to a parameter of type 'EAction'.

Utilize your EActions like so:

insertAction(EAction.VIEW);

In my opinion, it makes the code easier to read.

For example: JS Playground

Answer 2

why not utilize an enum and assign action:EAction?

This method would appear as follows:

export enum EActions {
    VIEW = 'view',
    EDIT = 'edit',
}

Regarding your function,

function insertAction(action: EAction): void {
  console.log('trust me i inserted the action');
}

You will encounter a type error like this:

insertAction('whatever'); // will show you error

The argument of type '"whatever"' cannot be assigned to a parameter of type 'EAction'.

Utilize your EActions like so:

insertAction(EAction.VIEW);

In my opinion, it makes the code easier to read.

For example: JS Playground

Answer 3

Answer №2

Here is an improved solution for your code:

function insertAction(action: typeof Actions[keyof typeof Actions])

To ensure the correct type inference, declare the Actions object using the as const modifier:

export const Actions = {
    VIEW: 'view',
    EDIT: 'edit',
} as const; // <-- assertion here.

This approach works because when you define an object without specifying a type explicitly, TypeScript understands that the variable is constant and cannot be changed. However, if the object holds mutable values, TypeScript will infer the broader type:

{
  VIEW: string;
  EDIT: string;
}

The goal is to have the exact literal strings "view" and "edit" as value types, not just string. By using as const, you notify TypeScript that the object values are immutable, prompting it to infer the precise literal string type.

Therefore, with the values being the specific strings "view" and "edit", the expression

typeof Actions[keyof typeof Actions]

will yield the union type

"view" | "edit"

, matching the required parameter type.

Answer 4

Here is an improved solution for your code:

function insertAction(action: typeof Actions[keyof typeof Actions])

To ensure the correct type inference, declare the Actions object using the as const modifier:

export const Actions = {
    VIEW: 'view',
    EDIT: 'edit',
} as const; // <-- assertion here.

This approach works because when you define an object without specifying a type explicitly, TypeScript understands that the variable is constant and cannot be changed. However, if the object holds mutable values, TypeScript will infer the broader type:

{
  VIEW: string;
  EDIT: string;
}

The goal is to have the exact literal strings "view" and "edit" as value types, not just string. By using as const, you notify TypeScript that the object values are immutable, prompting it to infer the precise literal string type.

Therefore, with the values being the specific strings "view" and "edit", the expression

typeof Actions[keyof typeof Actions]

will yield the union type

"view" | "edit"

, matching the required parameter type.

In Typescript, it mandates that a string value must be one of the values within the object

Answer №1

Answer №2

Similar questions

Incorporate a personalized Material UI checkbox within a column of the Material React table

The variable 'key' is declared in the Google Chrome extension V3 local storage, but it appears that its assigned value is never actually accessed

Steps for displaying detailed information about a single product on an Ecommerce page

Combining and grouping objects by their IDs in a JavaScript array

Troubleshooting path alias resolution issue in NextJS when using Typescript with index.ts files

Strategies for Obtaining a Response Following a Function Execution in React JS

Sharing the label element as a prop in React component

Utilizing Angular and TypeScript: The best approach for managing this situation

Verify if an object property is called with the toHaveBeenCalledWith() function in Jasmine

Utilizing AWS CDK to Define StackProps Input Variables

What is the best approach to integrate react-hooks, redux, and typescript seamlessly?

Using React JS to Sort an Array Based on a Specific String

Error: The file named '/accounts.ts' cannot be recognized as a module within a Node.js API

Simplified Method for Verifying Null and Undefined in Typescript

Angular 14 introduces a new feature that automatically joins open SVG paths when dynamically rendered from a data object

How to extract and compare elements from an array using Typescript in Angular 6

How can you line up various form elements, like pickers, in a row using Material UI?

The TypeScript error code TS2345 indicates that the argument type 'JQueryXHR' cannot be assigned to the parameter type 'Promise<any>'

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

Angular2: Promise Rejection: Quotes cannot be used for evaluation in this component