The extend keyword in TypeScript causing issues with type inference

Question

The extend keyword in TypeScript causing issues with type inference

Why is TypeScript showing an error in the code below?

type A = { kind: "a" }
type B = { kind: "b" }

const a = (a: A): void => undefined
const b = (b: B): void => undefined

const c = <C extends A | B>(c: C): void => (c.kind == "a" ? a(c) : b(c))

It appears that TypeScript is having trouble determining the type of c after checking c.kind == "a". Why is this happening?

The following variation seems to resolve the issue.

type A = { kind: "a" }
type B = { kind: "b" }
type C = A | B

const a = (a: A): void => undefined
const b = (b: B): void => undefined

const c = (c: C): void => (c.kind == "a" ? a(c) : b(c))

typescript

Answer 1

Answer №1

An interesting thing to note is that a typeguard will function properly on a parameter of a union type, but it will not work on a generic type parameter that extends a union. This limitation has been documented in an open issue, which may be addressed in the future.

To work around this issue, one approach is to utilize the non-generic version, which should suffice for simple scenarios like the example provided.

However, if your signature is more complex and involves using generic types in other contexts (such as conditional types or establishing relationships between parameters and return types), you can employ a function with multiple signatures – a public generic signature and a non-generic implementation signature:

function c<C extends A | B>(c: C): void
function c(c: A | B): void {
    return c.kind == "a" ? a(c) : b(c);
}

For further exploration and experimentation, check out this TypeScript Playground link.

Answer 2

An interesting thing to note is that a typeguard will function properly on a parameter of a union type, but it will not work on a generic type parameter that extends a union. This limitation has been documented in an open issue, which may be addressed in the future.

To work around this issue, one approach is to utilize the non-generic version, which should suffice for simple scenarios like the example provided.

However, if your signature is more complex and involves using generic types in other contexts (such as conditional types or establishing relationships between parameters and return types), you can employ a function with multiple signatures – a public generic signature and a non-generic implementation signature:

function c<C extends A | B>(c: C): void
function c(c: A | B): void {
    return c.kind == "a" ? a(c) : b(c);
}

For further exploration and experimentation, check out this TypeScript Playground link.

The extend keyword in TypeScript causing issues with type inference

Answer №1

Similar questions

Creating a tsconfig.json file that aligns perfectly with your package.json and tsc command: a step-by-step

Troubleshooting: Vue.js component events not being detected in TypeScript

When using `type B = A`, B is represented as A. However, if `type B = A | A` is utilized, B appears as 'any'. What causes this change in representation?

The properties are not found in the type 'Observable<Todo[]>'

Proper method for typing the generics of DatePickerProps belonging to the DatePicker component in mui-x library

How is it possible that this is not causing a syntax or compile-time error?

How to disable the onChange event in PrimeNG p-dropdown?

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

When working with Typescript and Vue.js, it's important to ensure that properties are initialized before

Angular checkboxes not updating with current values when submitted

Next.js TypeScript throws an error stating that the object 'window' is not defined

Error TS2694 is being caused by Electron Typescript Material-UI withStyles because the namespace "".../node_modules/csstype/index"" does not have an exported member called 'FontFace'

The Validation Library known as 'Yup' encounters compilation issues with TypeScript

Is there a way to make Typescript accept dot notation?

Using Vue-router and Typescript with beforeEnter guard - utilizing validated data techniques

Utilizing vue-property-decorator: Customizing the attributes of @Emit

Error in Cordova integration with Razorpay [RazorPayCheckout not found]

Custom Joi middleware in Express v4 is failing to pass the Request, Response, and Next objects

What is the best way to reset the testing subject between test cases using Jest and TypeScript?

What is the reason for the manual update of a view when copying an object's attributes into another object, as opposed to using Object.assign()?