Advanced TypeScript Types - The issue of Unreachable errors within generic functions

Question

Advanced TypeScript Types - The issue of Unreachable errors within generic functions

I'm struggling to understand why the switch statement in my generic function isn't able to cast my types within its branches.

This is my code:

interface Id { id: number; }
enum Kind { square = "square", circle = "circle" }
interface Circle { kind: Kind.circle; radius: number; }
interface Square { kind: Kind.square; size: number; }
type Data = Circle | Square;
type ShapeModel<TData> = Id & TData;
class UnreachableError extends Error { public constructor(guard: never) { super(`Unsupported kind: ${JSON.stringify(guard)}`); } }

function myFunctionGeneric<TData extends Data>(data: TData): ShapeModel<TData> {
    switch (data.kind) {
        case Kind.circle:
            return { ...data, id: 1 };
        case Kind.square:
            return { ...data, id: 2 };
        default:
            throw new UnreachableError(data); // <-- UNEXPECTED
        // Argument of type 'TData' is not assignable to parameter of type 'never'.
        // Type 'Data' is not assignable to type 'never'.
        // Type 'Circle' is not assignable to type 'never'.
        // ts(2345)
    }
}

const myCircleData: Circle = { kind: Kind.circle, radius: 42 };
const mySquareData: Square = { kind: Kind.square, size: 42 };

// I expect this. Passing Circle and expecting to receive ShapeModel<Circle>
const myCircleModel: ShapeModel<Circle> = myFunctionGeneric(myCircleData);

// I expect this. Passing Square and wanting to receive ShapeModel<Square>
const mySquareModel: ShapeModel<Square> = myFunctionGeneric(mySquareData);

This logic works flawlessly without using a generic TData.

Can someone shed light on why TypeScript struggles to determine the type within the switch branch?

typescript

Answer 1

Answer №1

In order for a type to undergo narrowing, it must be a union type. However, in this case, the type is the generic parameter TData, which does not fall into that category. While TData may extend a union, TypeScript will not attempt to narrow it. This would pose a challenge as TData could potentially be a subtype of Circle, making it impossible to directly narrow down to Circle within switch cases without some conditional logic.

A straightforward solution would be to use a public signature with generics and a private signature with simpler unions that TypeScript can effectively narrow down.


function myFunctionGeneric<TData extends Data>(data: TData): ShapeModel<TData>
function myFunctionGeneric(data: Data): ShapeModel<Data> {
    switch (data.kind) {
        case Kind.circle:
            return { ...data, id: 1 };
        case Kind.square:
            return { ...data, id: 2 };
        default:
            throw new UnreachableError(data); 
    }
}

Playground Link

Answer 2

In order for a type to undergo narrowing, it must be a union type. However, in this case, the type is the generic parameter TData, which does not fall into that category. While TData may extend a union, TypeScript will not attempt to narrow it. This would pose a challenge as TData could potentially be a subtype of Circle, making it impossible to directly narrow down to Circle within switch cases without some conditional logic.

A straightforward solution would be to use a public signature with generics and a private signature with simpler unions that TypeScript can effectively narrow down.


function myFunctionGeneric<TData extends Data>(data: TData): ShapeModel<TData>
function myFunctionGeneric(data: Data): ShapeModel<Data> {
    switch (data.kind) {
        case Kind.circle:
            return { ...data, id: 1 };
        case Kind.square:
            return { ...data, id: 2 };
        default:
            throw new UnreachableError(data); 
    }
}

Playground Link

Answer 3

Answer №2

In order for Typescript to perform a discriminated union, the variable must be recognized as a union, correct? You can achieve this by enforcing it with the argument type TData & Data. This allows Typescript to statically determine that your variable can specifically be narrowed down to either TData & Circle or TData & Square, just as anticipated, while preserving generic behavior. (Playground Link)

function myFunctionGeneric<TData extends Data>(data: Data & TData): ShapeModel<TData>
                                                  //  ^ this fixes it.

Answer 4

In order for Typescript to perform a discriminated union, the variable must be recognized as a union, correct? You can achieve this by enforcing it with the argument type TData & Data. This allows Typescript to statically determine that your variable can specifically be narrowed down to either TData & Circle or TData & Square, just as anticipated, while preserving generic behavior. (Playground Link)

function myFunctionGeneric<TData extends Data>(data: Data & TData): ShapeModel<TData>
                                                  //  ^ this fixes it.

Answer 5

Answer №3

For enhanced clarity, it is important to focus on the updated signature for UnreachableError. Additionally, an unsupported type has been included in the union type as a demonstration. The code now successfully compiles and will throw an error if a value of the same type as the illegal one added to the union type is passed to your function:

interface Id { id: number; }
enum Kind { triangle = "triangle", pentagon = "pentagon" , anyShape = 'anyShape'}
interface Triangle { kind: Kind.triangle; height: number; base: number; }
interface Pentagon { kind: Kind.pentagon; sideLength: number; }
interface AnyShape { kind: Kind.anyShape; description: string; }

type Shape = Triangle | Pentagon | AnyShape;
type GeometricModel<TShape> = Id & TShape;
class UnreachableError extends Error { public constructor(guard: any) { super(`Unsupported shape: ${JSON.stringify(guard)}`); } }

function calculateGeometricModel<TShape extends Shape>(shape: TShape): GeometricModel<TShape> {
    switch (shape.kind) {
        case Kind.triangle:
            return { ...shape, id: 1 };
        case Kind.pentagon:
            return { ...shape, id: 2 };
        default:
            throw new UnreachableError(shape); 
    }
}
const myTriangleData: Triangle = { kind: Kind.triangle, height: 10, base: 6 };
const myPentagonData: Pentagon = { kind: Kind.pentagon, sideLength: 8 };
const myAnyShapeData : AnyShape = {kind: Kind.anyShape , description: 'aDescription'}
// Obtain GeometricModel<Triangle> by passing Triangle
const myTriangleModel: GeometricModel<Triangle> = calculateGeometricModel(myTriangleData);

// Obtain GeometricModel<Pentagon> by passing Pentagon
const myPentagonModel: GeometricModel<Pentagon> = calculateGeometricModel(myPentagonData);

If you attempt this:

const myAnyShapeModel: GeometricModel<AnyShape> = calculateGeometricModel(myAnyShapeData)

You will encounter the anticipated error message:

Error: Unsupported shape: {"kind":"anyShape","description":"aDescription"}
    at calculateGeometricModel

Answer 6

For enhanced clarity, it is important to focus on the updated signature for UnreachableError. Additionally, an unsupported type has been included in the union type as a demonstration. The code now successfully compiles and will throw an error if a value of the same type as the illegal one added to the union type is passed to your function:

interface Id { id: number; }
enum Kind { triangle = "triangle", pentagon = "pentagon" , anyShape = 'anyShape'}
interface Triangle { kind: Kind.triangle; height: number; base: number; }
interface Pentagon { kind: Kind.pentagon; sideLength: number; }
interface AnyShape { kind: Kind.anyShape; description: string; }

type Shape = Triangle | Pentagon | AnyShape;
type GeometricModel<TShape> = Id & TShape;
class UnreachableError extends Error { public constructor(guard: any) { super(`Unsupported shape: ${JSON.stringify(guard)}`); } }

function calculateGeometricModel<TShape extends Shape>(shape: TShape): GeometricModel<TShape> {
    switch (shape.kind) {
        case Kind.triangle:
            return { ...shape, id: 1 };
        case Kind.pentagon:
            return { ...shape, id: 2 };
        default:
            throw new UnreachableError(shape); 
    }
}
const myTriangleData: Triangle = { kind: Kind.triangle, height: 10, base: 6 };
const myPentagonData: Pentagon = { kind: Kind.pentagon, sideLength: 8 };
const myAnyShapeData : AnyShape = {kind: Kind.anyShape , description: 'aDescription'}
// Obtain GeometricModel<Triangle> by passing Triangle
const myTriangleModel: GeometricModel<Triangle> = calculateGeometricModel(myTriangleData);

// Obtain GeometricModel<Pentagon> by passing Pentagon
const myPentagonModel: GeometricModel<Pentagon> = calculateGeometricModel(myPentagonData);

If you attempt this:

const myAnyShapeModel: GeometricModel<AnyShape> = calculateGeometricModel(myAnyShapeData)

You will encounter the anticipated error message:

Error: Unsupported shape: {"kind":"anyShape","description":"aDescription"}
    at calculateGeometricModel

Answer 7

Answer №4

In JavaScript, the never type signifies a value that can never occur. Your code editor, like vscode for example, will immediately alert you to this. To update the definition for UnreachableError, replace never with any:

class UnreachableError extends Error { public constructor(guard: any) { super(`Unsupported kind: ${JSON.stringify(guard)}`); } }

Answer 8

In JavaScript, the never type signifies a value that can never occur. Your code editor, like vscode for example, will immediately alert you to this. To update the definition for UnreachableError, replace never with any:

class UnreachableError extends Error { public constructor(guard: any) { super(`Unsupported kind: ${JSON.stringify(guard)}`); } }

Advanced TypeScript Types - The issue of Unreachable errors within generic functions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The error message "./components/Avatar.tsx Error: Module '@babel/preset-stage-0' not found" appeared on the screen

Take action once the Promise outside of the then block has been successfully completed

The ng-model-options in Angular 2 is set to "updateOn: 'change blur'"

Retrieving object information in the constructor using Angular and Typescript

Can someone provide guidance on utilizing the map function to iterate through intricate components in TypeScript?

Does the JavaScript Amazon Cognito Identity SDK offer support for the Authorization Code Grant flow?

Using TypeScript to specify a limited set of required fields

Is Typescript compatible with the AWS Amplify Express API?

Enable the generation of scss.d.ts files with Next.js

Leveraging editor.action.insertSnippet from a different plugin

Error in Typescript: Property 'timeLog' is not recognized on type 'Console'

The function `pickupStatus.emit` is not defined

Guide on creating a Typescript Conditional type structure for Array elements that rely on each other

The TypeScript algorithm for inferring types in conditional statements

Mastering the art of leveraging generics in conjunction with ngrx actions

Troubleshooting issues with importing modules in Typescript

Angular Material input field with disabled state and a tooltip

Utilizing the backtick operator for string interpolation allows for dynamic value insertion

What is the best way to identify a particular subtype of HTMLElement based on its tag name and then save that element within another one?

Integrate Angular 2 into the current layout of Express framework