What could be causing TS to throw an error with conditional types?

Question

What could be causing TS to throw an error with conditional types?

I'm encountering an issue with conditional typing in Typescript where tsc is throwing an error.

interface Player {
    name: string;
    position: string;
    leg: string;
}

interface Coach {
    name: string;
    licence: string;
}

type Role = 'coach' | 'player';


function getPerson<T extends Role>(role: T): T extends 'coach' ? Coach : Player {
    if (role === 'coach') {
        return {} as Coach; // Type 'Coach' is not assignable to type 'T extends "coach" ? Coach : Player'
    } else {
        return {} as Player; // Type 'Player' is not assignable to type 'T extends "coach" ? Coach : Player'
    }
}

const person = getPerson('coach'); // const person: Coach
const person2 = getPerson('player'); // const person2: Player

Can someone help me understand why this isn't working? How should I refactor my code to assign the proper types?

typescript

Answer 1

Answer №1

Conditional types in TypeScript do not function as expected.

Consider the following example:


interface Coach {
    name: string;
    licence: string;
}

type Role = 'coach' | 'player';


function getPerson<T extends string>(role: Role): T extends 'coach' ? Coach : Player {
    if (role === 'coach') {
        const x = role;
        return {} as T extends 'coach' ? Coach : Player; // no error
    } else {
        return {} as T extends 'coach' ? Coach : Player; // no error
    }
}

const person = getPerson('coach'); // const person: Coach
const person2 = getPerson('player'); // const person2: Player

The example above may not be very helpful, but it demonstrates how TypeScript handles Return type.

Using overloading is recommended:

interface Player {
    name: string;
    position: string;
    leg: string;
}

interface Coach {
    name: string;
    licence: string;
}

type Role = 'coach' | 'player';

function getPerson<T extends 'player'>(role: T): Player
function getPerson<T extends 'coach'>(role: T): Coach
function getPerson<T extends Role>(role: T) {
    if (role === 'coach') {
        const x = role;
        return {} as Coach;
    } else {
        return {} as Player
    }
}

const person = getPerson('coach'); // const person: Coach
const person2 = getPerson('player'); // const person2: Player

Answer 2

Conditional types in TypeScript do not function as expected.

Consider the following example:


interface Coach {
    name: string;
    licence: string;
}

type Role = 'coach' | 'player';


function getPerson<T extends string>(role: Role): T extends 'coach' ? Coach : Player {
    if (role === 'coach') {
        const x = role;
        return {} as T extends 'coach' ? Coach : Player; // no error
    } else {
        return {} as T extends 'coach' ? Coach : Player; // no error
    }
}

const person = getPerson('coach'); // const person: Coach
const person2 = getPerson('player'); // const person2: Player

The example above may not be very helpful, but it demonstrates how TypeScript handles Return type.

Using overloading is recommended:

interface Player {
    name: string;
    position: string;
    leg: string;
}

interface Coach {
    name: string;
    licence: string;
}

type Role = 'coach' | 'player';

function getPerson<T extends 'player'>(role: T): Player
function getPerson<T extends 'coach'>(role: T): Coach
function getPerson<T extends Role>(role: T) {
    if (role === 'coach') {
        const x = role;
        return {} as Coach;
    } else {
        return {} as Player
    }
}

const person = getPerson('coach'); // const person: Coach
const person2 = getPerson('player'); // const person2: Player

What could be causing TS to throw an error with conditional types?

Answer №1

Similar questions

I am unable to show a variable on the screen

When you type a letter in the middle of a string, the cursor is automatically moved back to the end - Material UI

`Is it more effective to define an array outside of a component or inside of a component in React?`

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

What is the best way to determine the type of a static property in a TypeScript class?

Discovering the dimensions of a video in Angular 2 using TypeScript

Encountering issues with npm installation as npm ERR! code EACCES is appearing during the process

Create a function that will always output an array with the same number of elements as the input

Does the routing in Angular 2 get disrupted by parameter breaks in sub-modules?

JavaScript heap exhausted while running Docker container

When working with Material-UI and TypeScript, the type '{ children: never[]; }' does not share any properties with the type 'IntrinsicAttributes'. This can lead to incompatible types error messages in your code

Bringing in a ReactJS component to a TypeScript component

The implementation of the data source in ag grid is not functioning

TypeORM ensures that sensitive information, such as passwords, is never returned from the database when retrieving a user

How can I retrieve the specific element of *ngFor loop within the component.ts

Detecting the language of a browser

Ways to Obtain Device Identification in Ionic 2 Utilizing TypeScript

Using TypeScript in Node.js to iterate through an asynchronous forEach loop

Using EventEmitter for Component Communication in Angular 2

Is there a way for me to retrieve the text generated by OpenAI in the completion response?