What causes a typed string literal to be recognized as a pure string in TypeScript?

Question

What causes a typed string literal to be recognized as a pure string in TypeScript?

Consider the TypeScript code below:

type example = 'BOOLEAN' | 'MULITSELECT' | '';

interface IObjectExample {
    a: string,
    readonly b: example
}

const handleObj = (obj: IObjectExample) :void => {
    console.log('have obj', obj);
}

const actualExample = {
    a: 'hello',
    b: 'BOOLEAN'
};

handleObj(actualExample); // error pops up here

An error is being shown as:

Argument of type '{ a: string; b: string; }' is not assignable to parameter
of type 'IObjectExample'. Types of property 'b' are incompatible.
Type 'string' is not assignable to type 'example'.

Refer to playground.

This could be due to the 'widened literal type of the expression' for 'BOOLEAN'. Is this caused by not using let, but having a readonly property?

The main question is how to ensure a specific string literal as a property value, perhaps using an Enum?

typescript types string-literals

Answer 1

Answer №1

To specify the type of a variable in TypeScript, simply declare it:

const myVariable: IObjectType = {
  property1: 'value1',
  property2: 'BOOLEAN'
};

Try it out on TypeScript Playground

Answer 2

To specify the type of a variable in TypeScript, simply declare it:

const myVariable: IObjectType = {
  property1: 'value1',
  property2: 'BOOLEAN'
};

Try it out on TypeScript Playground

Answer 3

Answer №2

This issue arises because the b property in actualExample is marked as readonly b: example. To resolve this, you must inform the TypeScript compiler that actualExample.b should also be treated as readonly.

const actualExample = {
  a: 'hello',
  b: 'BOOLEAN' as 'BOOLEAN' // <-- clever workaround
};

After making this adjustment, the error will no longer occur:

type example = 'BOOLEAN' | 'MULITSELECT' | '';

interface IObjectExample {
  a: string,
  readonly b: example
}

const handleObj = (obj: IObjectExample) :void => {
    console.log('received object', obj);
}

const actualExample = {
  a: 'hello',
  b: 'BOOLEAN' as 'BOOLEAN'
};

// Another way to ensure type safety is by adding `as const` to the variable
const actualExample2 = {
  a: 'hello',
  b: 'BOOLEAN'
} as const; // <-- this method also works

handleObj(actualExample);

UPDATE To guarantee that a specific string is a property of an object, employ the keyof operator. Here's an example to illustrate this concept:

const obj = {
  a: 1,
  b: 2
}

type Obj = typeof obj;

const ensureStringIsObjectProperty = (arg: keyof Obj) => arg
const result = ensureStringIsObjectProperty('a') // only 'a' or 'b' are valid arguments

Answer 4

This issue arises because the b property in actualExample is marked as readonly b: example. To resolve this, you must inform the TypeScript compiler that actualExample.b should also be treated as readonly.

const actualExample = {
  a: 'hello',
  b: 'BOOLEAN' as 'BOOLEAN' // <-- clever workaround
};

After making this adjustment, the error will no longer occur:

type example = 'BOOLEAN' | 'MULITSELECT' | '';

interface IObjectExample {
  a: string,
  readonly b: example
}

const handleObj = (obj: IObjectExample) :void => {
    console.log('received object', obj);
}

const actualExample = {
  a: 'hello',
  b: 'BOOLEAN' as 'BOOLEAN'
};

// Another way to ensure type safety is by adding `as const` to the variable
const actualExample2 = {
  a: 'hello',
  b: 'BOOLEAN'
} as const; // <-- this method also works

handleObj(actualExample);

UPDATE To guarantee that a specific string is a property of an object, employ the keyof operator. Here's an example to illustrate this concept:

const obj = {
  a: 1,
  b: 2
}

type Obj = typeof obj;

const ensureStringIsObjectProperty = (arg: keyof Obj) => arg
const result = ensureStringIsObjectProperty('a') // only 'a' or 'b' are valid arguments

What causes a typed string literal to be recognized as a pure string in TypeScript?

Answer №1

Answer №2

Similar questions

How to Animate the Deletion of an Angular Component in Motion?

Using Angular, create mat-checkbox components that are dynamically generated and bound using

Ways to retrieve data from an Observable and save it in an Array categorized by a specific identifier

Angular application triggering multiple subscribe method calls upon a link click event

Determining the type of an overloaded method within a generic function

What is the best way to revert a screen's state back to its original state while utilizing react navigation?

Error encountered while compiling an Asp.Net Core project due to exceeding the maximum allowable path length in the

After integrating session store into my application, nestjs-sequelize is not synchronizing with any models

Can someone guide me on creating a slideshow using Ionic?

I make a commitment to continue working until the issue is resolved and the page is successfully changed in the Protractor

Migrating image information from Angular version 14 to Asp.Net Core 6.0 Rest Api

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

The JSX component cannot be 'FieldArray' at this time

Calculate the variance in days between two dates and assign the result to a separate field

I'm trying to resolve the "Uncaught TypeError: Cannot read property '0' of null" error that keeps popping up in my Mobx action within a Firebase and React application. Can anyone offer some guidance on

You must use the 'new' keyword in order to invoke the class constructor

Why doesn't Typescript 5.0.3 throw an error for incompatible generic parameters in these types?

A versatile generic type infused with dynamic typing and optional parameter flexibility

Access an array to filter by specific key-value pairs

React: Content has not been refreshed