CODEWITHSUNDEEP
typescripttypesliterals
ᴘᴀɴᴀʏɪᴏᴛɪs
ᴘᴀɴᴀʏɪᴏᴛɪs

Reputation: 7529

Typescript - Why can't this string literal type be inferred?

The following snippet does not pass the type check:

type TaskType = 'SIMPLE' | 'COMPLEX'

interface TaskDefinition {
    name: string,
    task: string,
    taskType: TaskType
};

const test: TaskDefinition = { 
    name: '',
    task: '',
    taskType: 'SIMPLE' // This is fine
};

const tasks : TaskDefinition[] = ["apples", "pears"].map(i => {
    return {
        name: i,
        task: i,
        taskType: 'SIMPLE' // This one is not
    };
})

{ name: string; task: string; taskType: string; }[] is not assignable to type TaskDefinition[].

Try it

It seems that taskType gets inferred as string instead of TaskType despite the target type being TaskDefinition

What's causing this and how can I fix it?

Upvotes: 7

Views: 9499

Answers (3)

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 250326

Typescript will infer string literal types only when you assign it to a const. When you are creating object literals, the compiler will infer string for string constants not string literal types. If you assign the object literal directly to something that requires a string literal type, that is ok, as in this case the compiler just checks that the string constant is assignable to the string literal type.

The simple solution here is to specify the type argument to map, this will still preserve compiler checks on the return value from map : 

const tasks = ["apples", "pears"].map<TaskDefinition>(i => {
    return {
        name: i,
        task: i,
        taskType: 'SIMPLE'
    };
})

Or to use a type assertion on the string to the expected string literal type:

const tasks:TaskDefinition[] = ["apples", "pears"].map(i => {
    return {
        name: i,
        task: i,
        taskType: 'SIMPLE' as 'SIMPLE'
    };
})

Edit Since typescript 3.4 (PR) you can also use an as const assertion to get the string literal type:

const tasks:TaskDefinition[] = ["apples", "pears"].map(i => {
    return {
        name: i,
        task: i,
        taskType: 'SIMPLE' as const
    };
})

End Edit

You could also type assert directly on the return value, but this will disable some checks on the return value: 

const tasks:TaskDefinition[] = ["apples", "pears"].map(i => {
    return <TaskDefinition>{
        wrongValue: "", // no error since we are asserting
        name: i,
        task: i,
        taskType: 'SIMPLE'
    };
})

Upvotes: 18

MustSeeMelons
MustSeeMelons

Reputation: 756

I see three ways of fixing this:

return {
        name: i,
        task: i,
        taskType: 'SIMPLE'
    } as TaskDefinition;

Or:

const tasks: TaskDefinition[] = ["apples", "pears"].map(i => {
    return {
        name: i,
        task: i,
        taskType: 'SIMPLE'
    };
}) as TaskDefinition[];

Or:

const tasks: TaskDefinition[] = ["apples", "pears"].map(i => {
    return {
        name: i,
        task: i,
        taskType: 'SIMPLE' as TaskType
    };
});

As to why, I'm not completely sure. Why not use string enums in place of the custom string type?

Upvotes: 2

Fenton
Fenton

Reputation: 251242

Reason

The compiler isn't narrowing 'SIMPLE' from string to TaskType, so you'll need to help it with a type assertion. There are two options for that.

Type Assertion at Object

const tasks: TaskDefinition[] = ["apples", "pears"].map(i => {
    return <TaskDefinition> {
        name: i,
        task: i,
        taskType: 'SIMPLE' // This one is not
    };
});

Type Assertion at Value

const tasks: TaskDefinition[] = ["apples", "pears"].map(i => {
    return {
        name: i,
        task: i,
        taskType: <TaskType>'SIMPLE' // This one is not
    };
});

Upvotes: 3

Related Questions