How to deduce a string literal using a ternary conditional in TypeScript

Question

How to deduce a string literal using a ternary conditional in TypeScript

Here is a simple illustration:

function doSomething(animal: 'bird' | 'fish'){ }

let flies=true;

const animal = flies ? 'bird' : 'fish'

doSomething(animal);

In the assignment to `animal` from the ternary conditional, TypeScript infers type `'bird' | 'fish'`. (If `animal` were not constant, it would give an error since it would infer type string which is not assignable to 'bird' or 'fish')

However,

const parms = {
    animal: flies ? 'bird' : 'fish'
}
doSomething(parms); /* Argument of type '{ animal: string; }' is not    
                        assignable to parameter of type '{ animal: "bird" | "fish"; } */

Here, it infers string from the ternary conditional. Is there a way to maintain this style without defining a type and declaring the field `animal` as that type?

typescript type-inference conditional-operator

Answer 1

Answer №1

String literal types are not always inferred by Typescript, except in specific situations. Typically, a property does not automatically imply a literal type unless there are additional factors that indicate a literal type for the property (this is unrelated to the ternary operator).

In an upcoming release of Typescript 3.4 (currently available as typescript@next on npm), it will be possible to indicate to the compiler that you want object literals to be inferred according to this issue:

let flies=true;
// infers type as { readonly animal: "bird" | "fish"; }
const parms ={
    animal: flies ? 'bird' : 'fish'
} as const

Prior to version 3.4, a workaround in Typescript 3.3 and earlier involved using a function to specify the desired literal type inference:

let flies=true;
function withLiteralTypes<T extends Record<string, P>, P extends string | number | null | boolean | Record<string, P>> (o: T) {
    return o;
}
// infers type as { animal: "bird" | "fish"; }
const parms =withLiteralTypes({
    animal: flies ? 'bird' : 'fish',
})

Answer 2

String literal types are not always inferred by Typescript, except in specific situations. Typically, a property does not automatically imply a literal type unless there are additional factors that indicate a literal type for the property (this is unrelated to the ternary operator).

In an upcoming release of Typescript 3.4 (currently available as typescript@next on npm), it will be possible to indicate to the compiler that you want object literals to be inferred according to this issue:

let flies=true;
// infers type as { readonly animal: "bird" | "fish"; }
const parms ={
    animal: flies ? 'bird' : 'fish'
} as const

Prior to version 3.4, a workaround in Typescript 3.3 and earlier involved using a function to specify the desired literal type inference:

let flies=true;
function withLiteralTypes<T extends Record<string, P>, P extends string | number | null | boolean | Record<string, P>> (o: T) {
    return o;
}
// infers type as { animal: "bird" | "fish"; }
const parms =withLiteralTypes({
    animal: flies ? 'bird' : 'fish',
})

How to deduce a string literal using a ternary conditional in TypeScript

Answer №1

Similar questions

How can you apply an active class using React-Router?

Angular and Node version discrepancies causing problems

Clearly defining the data types for static dictionary values, while also deducing the precise structure or at least the keys

Tips for enlarging the font size of a number as the number increases

Efficient Typescript ambient modules using shorthand notation

I want to search through an array of tuples to find a specific value in the first index, and if there is a match, I need to return the value in the second index of the matching tuple

Convert a JavaScript variable to a TypeScript interface

Tips for effectively utilizing the drag and drop feature with the Table Component in Ant Design

The identifier "id" is not a valid index for this type

A guide to setting properties using a Proxy object

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

What is the best way to access a web.config key using Typescript?

What is the best way to transfer information from one column to another column with Office Scripts?

Typescript decorator specifically designed for abstract generic Container class's child elements

Callbacks are never fired in SQL Server because of the tedious connection

What is the best way to implement a nested fetch call?

What is the best way to handle various sections with changing structures within a complex form using react-hook-form?

Encountering an error with Mongoose's .pre('save') method in Typescript

Exploring the potential of utilizing dynamic types in a TypeScript React application alongside React Hook Form

Unlock the Power of Typography in React with Material UI Styled Components