What is the reason for the variance in the inferred generic type parameter between an extended interface and a type alias representing an intersection of interfaces?

Question

What is the reason for the variance in the inferred generic type parameter between an extended interface and a type alias representing an intersection of interfaces?

Why is the generic type parameter inferred differently in the following toy experiment, depending on whether the template is instantiated with an extended type or with an intersected type? This experiment has been simplified from a real-world example.

interface Base { b: number }
interface Extra { a: string }
interface Ext1 extends Extra { b: number }
type Ext2  = Base & Extra

// f returns a function that takes a T as input
const f = <T extends Base>(inp: T & Extra): ((arg: T) => void) => {
    return (arg: T) => console.log(inp.a + arg.b) 
}

const x1: Ext1 = { a: "x1", b: 1 }
const x2: Ext2 = { a: "y1", b: 2 } 

const f1 = f(x1) // T inferred to Ext1
const f2 = f(x2) // T inferred to Base, NOT Ext2 (why?)

const inp = { b: 3 }

// error Argument of type '{ b: number; }' is not assignable to parameter of type 'Ext1'. Property 'a' is missing in type '{ b: number; }' but required in type 'Ext1'.
const out1 = f1(inp) 

// ok since inp is of type Base
const out2 = f2(inp)

Playground Link

typescript types intersection extends

Answer 1

Answer №1

The issue encountered here is not related to inference but rather stems from removing redundant intersection members. Note the presence of & Extra in the type inp. When a variable of type Ext2 is passed to function f, the type of inp becomes Base & Extra & Extra.

Due to elimination of identical types within intersections, the resulting type of inp is actually Base & Extra, causing the type parameter T to be inferred as Base since it satisfies the condition of extends Base. Removing the intersection with Extra results in correct inference:

interface Base { b: number }
interface Extra { a: string }
interface Ext1 extends Extra { b: number }
type Ext2  = Base & Extra

// f returns a function that takes a T as input
const f = <T extends Base>(inp: T): ((arg: T) => void) => {
    return (arg: T) => console.log(inp.a + arg.b)
}

const x1: Ext1 = { a: "x1", b: 1 }
const x2: Ext2 = { a: "y1", b: 2 } 

const f1 = f(x1) // T inferred to Ext1
const f2 = f(x2) // T inferred to Ext2

const inp = { b: 3 }

const out1 = f1(inp) // error
const out2 = f2(inp) // error

To clarify, extending an interface differs from intersecting two interfaces despite similar functionalities. The use of extends signifies that the left-hand side type is a subtype, while the right-hand side type is a supertype.

In contrast, intersections combine types without the concept of subtypes and supertypes. Refer to the below example to understand the distinction between extends and &:

interface A { a: string, b: boolean }
interface B { a: number, b: boolean }
interface C extends A, B {} // error, cannot extend

type a = { a:string, b: boolean }
type b = { a:number, b: boolean }
type c = a & b; // no error, but 'a' is never

Hence, when intersecting Ext1 with Extra, no changes occur due to absence of identical types for elimination, resulting in only Ext1 (subtype) and Extra (supertype).

Playground

Answer 2

The issue encountered here is not related to inference but rather stems from removing redundant intersection members. Note the presence of & Extra in the type inp. When a variable of type Ext2 is passed to function f, the type of inp becomes Base & Extra & Extra.

Due to elimination of identical types within intersections, the resulting type of inp is actually Base & Extra, causing the type parameter T to be inferred as Base since it satisfies the condition of extends Base. Removing the intersection with Extra results in correct inference:

interface Base { b: number }
interface Extra { a: string }
interface Ext1 extends Extra { b: number }
type Ext2  = Base & Extra

// f returns a function that takes a T as input
const f = <T extends Base>(inp: T): ((arg: T) => void) => {
    return (arg: T) => console.log(inp.a + arg.b)
}

const x1: Ext1 = { a: "x1", b: 1 }
const x2: Ext2 = { a: "y1", b: 2 } 

const f1 = f(x1) // T inferred to Ext1
const f2 = f(x2) // T inferred to Ext2

const inp = { b: 3 }

const out1 = f1(inp) // error
const out2 = f2(inp) // error

To clarify, extending an interface differs from intersecting two interfaces despite similar functionalities. The use of extends signifies that the left-hand side type is a subtype, while the right-hand side type is a supertype.

In contrast, intersections combine types without the concept of subtypes and supertypes. Refer to the below example to understand the distinction between extends and &:

interface A { a: string, b: boolean }
interface B { a: number, b: boolean }
interface C extends A, B {} // error, cannot extend

type a = { a:string, b: boolean }
type b = { a:number, b: boolean }
type c = a & b; // no error, but 'a' is never

Hence, when intersecting Ext1 with Extra, no changes occur due to absence of identical types for elimination, resulting in only Ext1 (subtype) and Extra (supertype).

Playground

What is the reason for the variance in the inferred generic type parameter between an extended interface and a type alias representing an intersection of interfaces?

Answer №1

Similar questions

"Utilize a callback function that includes the choice of an additional second

The data is not being displayed in the table

How can you define a function type for a rest parameter in Typescript?

Using Javascript or ES6, you can compare a nested array object with another array of elements and generate a new array based on

What is the best way to retrieve Express app configuration asynchronously?

What is the best way to wait for the state to be set before mapping the array

The style fails to load correctly upon the page's initial loading

Example of real life situations where C data types are used

Storing a reference globally in React and Typescript: Best practices

Add a hyperlink within a button element

The mapStateToProps function in a Higher Order Component is receiving an OwnProps argument with a property that is not defined

Struggling to configure Sass with @snowpack/app-template-react-typescript

Delete an essential attribute from an entity

Craft a unique typings file tailored to your needs

Cannot upload the same file to both Spring and Angular twice

How can I access other properties of the createMuiTheme function within the theme.ts file in Material UI?

Struggling with setting up the onChange function in a Next.js application

Building a Vuetify Form using a custom template design

Warning: Google Map API alert for outdated Marker Class

Is there a way to find the recursive key types in TypeScript?