The Child/Parent arguments in Typescript methods cannot be assigned

Question

The Child/Parent arguments in Typescript methods cannot be assigned

Why is this not working in TypeScript?

class Parent {
    id: string = ''
}

class Child extends Parent{
    name: string = ''
}



const fails: (created: Parent) => void = (created: Child) => { return };
const failsToo: ({ created }: { created: Parent }) => void = ({ created }: { created: Child }) => { return };

The error I'm encountering seems quite strange:

Type '(created: Child) => void' is not assignable to type '(created: Parent) => void'.
  Types of parameters 'created' and 'created' are incompatible.
    Property 'name' is missing in type 'Parent' but required in type 'Child'

It appears that it's trying to assign a Parent to a Child, however, in the actual code it's the opposite (attempting to assign a method parameter that is a Child to a Parent. This makes sense because Child is a superset of Parent)

Am I overlooking something?

You can test this out here: https://www.typescriptlang.org/play?#code/MYGwhgzhAEAKYCcCmA7ALtA3gKGn6AlgCYBc0EaCBKA5tALzQDkT2AvttqJDAMIAWBEEWhIAHmlREY8ZOhz5oKMAFskZClVoNmrDpy4B7FBWgAzMEIhkAFMGRhJpOIlRoAlAwB80AG6HiHTsHJzIBISJPeh9MaGQ0AFcEFGg2AG4jEwwLKwAVQ0NbWPskRyQRNjJikPKyWTdUqJ9-QMYbatKnVKroErLncOFG7yw4pETk1LSgA

javascript typescript

Answer 1

Answer №1

Contravariant function types involve parameter types that vary in the opposite direction from each other. This concept is a natural consequence of type theory and can be understood by considering passing narrower or wider types to functions than they expect.

const fails: (created: Parent) => void =
    (created: Child) => { created.name.toUpperCase() };

In the above example, assigning a function expecting a Parent to a variable of type

(created: Child) => { created.name.toUpperCase() }

results in a runtime error when trying to access properties of incompatible objects.

TypeScript helps prevent such errors through strict control over parameter widening with the --strictFunctionTypes compiler option enabled.

While widening parameters is not allowed, narrowing them is permissible within contravariant function types. For instance:

class GrandChild extends Child {
    age: number = 1;
}
const okay: (created: GrandChild) => void =
    (created: Child) => { created.name.toUpperCase() };

okay(new GrandChild()); // no issues

The key principle is that input positions like function parameters exhibit a different type variance direction compared to output positions.

Playground link to code

Answer 2

Contravariant function types involve parameter types that vary in the opposite direction from each other. This concept is a natural consequence of type theory and can be understood by considering passing narrower or wider types to functions than they expect.

const fails: (created: Parent) => void =
    (created: Child) => { created.name.toUpperCase() };

In the above example, assigning a function expecting a Parent to a variable of type

(created: Child) => { created.name.toUpperCase() }

results in a runtime error when trying to access properties of incompatible objects.

TypeScript helps prevent such errors through strict control over parameter widening with the --strictFunctionTypes compiler option enabled.

While widening parameters is not allowed, narrowing them is permissible within contravariant function types. For instance:

class GrandChild extends Child {
    age: number = 1;
}
const okay: (created: GrandChild) => void =
    (created: Child) => { created.name.toUpperCase() };

okay(new GrandChild()); // no issues

The key principle is that input positions like function parameters exhibit a different type variance direction compared to output positions.

Playground link to code

Answer 3

Answer №2

When examining the type definition of fails, it is essential to provide a parent input parameter. This requirement implies that the function's implementation may lead to a runtime error, as shown below:

const fails: (created: Parent) => void = (created: Child) => {
   console.log(created.name)
   return
}

fails({ id: 'foo' })

The code snippet above would result in a runtime failure due to the absence of the "name" field on the passed argument.

Answer 4

When examining the type definition of fails, it is essential to provide a parent input parameter. This requirement implies that the function's implementation may lead to a runtime error, as shown below:

const fails: (created: Parent) => void = (created: Child) => {
   console.log(created.name)
   return
}

fails({ id: 'foo' })

The code snippet above would result in a runtime failure due to the absence of the "name" field on the passed argument.

The Child/Parent arguments in Typescript methods cannot be assigned

Answer №1

Answer №2

Similar questions

Bringing PNGs and SVGs into React - Error TS2307: Module not found

Instructions for utilizing ObjectId with a string _id on the client side

Alternative way to search for child elements within an element without the use of jQuery

Node.js exec command encountering an uninformative error message and not executing properly

Mapping the preselected values of multiple input fields into an array in Angular 6: A step-by-step guide

Complete and automatically submit a form in a view using AngularJS

Observing changes to attributes in AngularJS is a useful feature that allows for

Is there a radio button that can dynamically update and modify the current view?

Is it possible to achieve seamless image transitions in Firefox like it does in Chrome?

Type arguments cannot be accepted in untyped function calls.ts(2347)

Arrange the JSON object according to the date value

How to access vue.js 3 single file component functions from within a script tag

Error loading Azure Active Directory web form: Server returned a 401 status code for the requested resource

Sometimes jQuery may require multiple executions with just one click

Initiate an Ajax request solely for the elements currently visible on the screen

`Automatic toggling between two inputs with adjustable settings`

Error message when using Vue Global Filter: Value undefined is not defined

The content security policy is preventing a connection to the signalr hub

Is it feasible to obtain the userId or userInfo from the Firebase authentication API without requiring a login?

Tips for emphasizing a searched item in V-data-table using VueJS