Error in TypeScript: Unable to assign type 'string' to type 'number | ""'

Question

Error in TypeScript: Unable to assign type 'string' to type 'number | ""'

I am new to TypeScript and struggling to comprehend the error message below.

Type '{ order: string; }[]' is not compatible with type 'TestType[]'.
  Type '{ order: string; }' is not assignable to type 'TestType'.
    Types of property 'order' are conflicting.
      String type cannot be assigned to number or ''.

This is the test code I have:

export enum ACTION_TYPES {
    TEST_ACTION = 'TEST_ACTION',
}

export type TestType = {
    order: number | '';
};

export function TestAction(
    testTypes: TestType[]
): {
    type: ACTION_TYPES.TEST_ACTION;
    testTypes: TestType[];
} {
    return {
        type: ACTION_TYPES.TEST_ACTION,
        testTypes,
    };
}

export type PluginsState = {
    testTypes: TestType[];
};

export type Actions =
    | ReturnType<typeof TestAction >;



const reducer = (
    state: PluginsState = {
        testTypes: [],
    },
    payload?: Actions
): PluginsState => {
    if ( payload && 'type' in payload ) {
        switch ( payload.type ) {
            case ACTION_TYPES.TEST_ACTION:
                return {
                    ...state,
                    testTypes: payload.testTypes,
                };
        }
    }
    return state;
};

export const stub = [
    {
		order: '',
    }
];


const defaultState: PluginsState = {
	testTypes: [],

};


reducer( defaultState, {
	type: ACTION_TYPES.TEST_ACTION,
	testTypes: stub,
} );

And here's the TypeScript playground link

The error originates from the last line testTypes: stub

I believe there may be a mistake on my end, but I'm unsure why '' cannot be utilized alongside number | ''

Is there a solution to this issue?

typescript

Answer 1

Answer №1

What you've written aligns with the author's perspective on the code, and it should function correctly. However, let's see how Typescript interprets it:

export const stub = [
    {
        order: '',
    }
];

In essence, this is of type: {order:string}[], which is generally suitable in most scenarios. Nevertheless, since this is a more generalized version of your specific {order:''}[], Typescript cannot ensure that any value passed will adhere to {order: number|''}. Even if you manipulate it, Typescript will have to permit it, hence the warning.

To prevent this inference, there are two options available:

Explicitly specify the type for stub as TestType so TypeScript can prompt an error when it deviates from that type, like so:
```
export const stub: TestType[] = [
  {
    order: "",
  },
] ;
```
Alternatively, apply a const assertion to the mutable array elements to signify they remain unchanged, such as:
```
export const stub = [
  {
    order: "",
  } as const,
] ;
```

You can view a functional example here: https://tsplay.dev/WvpdYN

Answer 2

What you've written aligns with the author's perspective on the code, and it should function correctly. However, let's see how Typescript interprets it:

export const stub = [
    {
        order: '',
    }
];

In essence, this is of type: {order:string}[], which is generally suitable in most scenarios. Nevertheless, since this is a more generalized version of your specific {order:''}[], Typescript cannot ensure that any value passed will adhere to {order: number|''}. Even if you manipulate it, Typescript will have to permit it, hence the warning.

To prevent this inference, there are two options available:

Explicitly specify the type for stub as TestType so TypeScript can prompt an error when it deviates from that type, like so:
```
export const stub: TestType[] = [
  {
    order: "",
  },
] ;
```
Alternatively, apply a const assertion to the mutable array elements to signify they remain unchanged, such as:
```
export const stub = [
  {
    order: "",
  } as const,
] ;
```

You can view a functional example here: https://tsplay.dev/WvpdYN

Answer 3

Answer №2

When crafting the following code snippet:

export const stub = [
    {
        order: ''
    }
];

The compiler must determine the type of the variable stub. There are several possible types it could be inferred as (such as unknown, any, or Array<object>, and so on). So, the compiler employs heuristic rules to determine what it believes is most appropriate. In this instance, the inferred type is:

/* const stub: Array<{order: string}> */

This specifies an array of objects in no particular order, each of which must contain an order property with a value of type string. It's important to note that this is the type string, not the string literal type "". The selection of string over "" is often preferred since string values can be modified later on:

stub[0].order = "somethingElse"; // valid

However, if this is not the desired type, issues may arise when attempting to use it as an argument passed to the reducer() function, resulting in a compilation error.

To address this problem, you have two options: either explicitly provide a type annotation for the variable stub to specify the intended type:

export const stub: Array<TestType> = [ // annotated
    { order: '' }
]; 

reducer(defaultState, {
    type: ACTION_TYPES.TEST_ACTION,
    testTypes: stub, // valid
});

or alter how the value is inferred by the compiler, potentially by leveraging a const assertion to preserve "" as a string literal:

export const stub = [
    {
        order: '' as const, // assertion
    }
];
/* const stub: Array<{ order: ""; } */

reducer(defaultState, {
    type: ACTION_TYPES.TEST_ACTION,
    testTypes: stub,
});

Playground link to code

Answer 4

When crafting the following code snippet:

export const stub = [
    {
        order: ''
    }
];

The compiler must determine the type of the variable stub. There are several possible types it could be inferred as (such as unknown, any, or Array<object>, and so on). So, the compiler employs heuristic rules to determine what it believes is most appropriate. In this instance, the inferred type is:

/* const stub: Array<{order: string}> */

This specifies an array of objects in no particular order, each of which must contain an order property with a value of type string. It's important to note that this is the type string, not the string literal type "". The selection of string over "" is often preferred since string values can be modified later on:

stub[0].order = "somethingElse"; // valid

However, if this is not the desired type, issues may arise when attempting to use it as an argument passed to the reducer() function, resulting in a compilation error.

To address this problem, you have two options: either explicitly provide a type annotation for the variable stub to specify the intended type:

export const stub: Array<TestType> = [ // annotated
    { order: '' }
]; 

reducer(defaultState, {
    type: ACTION_TYPES.TEST_ACTION,
    testTypes: stub, // valid
});

or alter how the value is inferred by the compiler, potentially by leveraging a const assertion to preserve "" as a string literal:

export const stub = [
    {
        order: '' as const, // assertion
    }
];
/* const stub: Array<{ order: ""; } */

reducer(defaultState, {
    type: ACTION_TYPES.TEST_ACTION,
    testTypes: stub,
});

Playground link to code

Error in TypeScript: Unable to assign type 'string' to type 'number | ""'

Answer №1

Answer №2

Similar questions

Establish HTTP headers for accessing the Oxford API in an Angular 6 application

Ways to enhance focus on childNodes using Javascript

What happens when arithmetic operators are applied to infinity values in JavaScript?

What is the proper way to set up @Input?

What is the best way to restrict the key of an object type to only be within a specific union in TypeScript?

Exporting Typescript to Javascript files

Can Nest.js providers be intercepted?

Issue: Pipe 'AsyncPipe' received an invalid argument '[object Object]'

Comparing the functions of useMemo and the combination of useEffect with useState

how can I retrieve an array of nested objects from two interrelated tables that have a one-to-many relationship using

A critical error has occurred: RangeError - The maximum call stack size has been exceeded while trying to

Guide to creating the shared section of two wheels with CanvasRenderingContext2D

Having trouble handling responses in nodejs when using inversifyjs

Issues with Typescript function overloads when dealing with union types

Mastering the art of Promises and handling errors

Use the useEffect hook to pass newly updated data to a FlatList component

Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

Angular Bootstrap Datepicker provides us with a date object, but I need it in the Date format

Dependency Injection: The constructor of the injectable class is called multiple times

Using TypeScript to Trigger Events in Three.js