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

Distributing JWT to the recipient using Express

Different approaches for expanding object.prototype while utilizing jQuery

Utilizing Vuex to manage the state of modal components within a list of child components

I am struggling to display the data fetched by Next.js on the page

Only if there is an update in the SQL database, I wish to refresh the div

What could be causing the RTCPeerConnection icegatheringstatechange to not function properly?

Typescript having issues compiling to commonjs/es2015 accurately

Is it possible to import multiple versions of a JavaScript file using HTML and JavaScript?

Submit data via POST method on the modified URL

Utilizing Typeahead for Autocomplete in Durandal: A Step-by-Step Guide

A handy tip for sending a response once a for each loop has finished executing

What distinguishes between the methods of detecting falsy and truthy values?

Node.js data transmission: Sending information from server to client

The breakpoint was overlooked due to the absence of generated code for TypeScript on a Windows operating system

Why does everything seem to move in sync with the table's scrolling?

Using Angular.JS to iterate over a nested JSON array using ng-repeat

Having trouble with selecting JS dropdown options in Python Selenium

What is the best way to increase a count in MongoDB?

What are the steps for transforming my 2D array to fit a specific schema using RxJS?

Preventing Express.JS HTTP requests from being blocked by npm cron