Function in Typescript that accepts an extended interface as a parameter

Question

Function in Typescript that accepts an extended interface as a parameter

I am facing an issue with my interface named "Example" which has a function type called "exampleFunction". The problem arises when this function takes a super class as an input parameter because TypeScript is reporting an error. It states that I cannot use subtypes as inputs due to some properties that are not present in the superclass.

Here's an illustration:

interface SuperType {
   propertyA: string
}

interface SubTypeA extends SuperType {
   subPropertyA: number
}

interface SubTypeB extends SuperType {
   subPropertyB: number
}

interface Example {
   exampleFunction: (input: SuperType) => void
}

The issue occurs when I write:

const example: Example = {
   exampleFunction: (input: SubTypeA) => {console.log("nothing")}
}

javascript typescript

Answer 1

Answer №1

If you modify your function to utilize only the property of SubTypeA, the issue becomes more apparent.

const example: Example = {
   exampleFunction: (input: SubTypeA) => {console.log(input.subPropertyA.toFixed())}
}

The function itself is technically correct (it takes a SubTypeA argument and accesses one of its properties). However, the type definition of Example can only ensure that a SuperType will be passed in. Therefore, the additional unique properties of SubTypeA cannot be guaranteed to be present.

For instance:

const superType: SuperType = { propertyA: 'foo' }
example.exampleFunction(superType)
// This call is valid but crashes as `subPropertyA` is missing

One possible solution could be to adjust your function to handle either a SuperType or a SubTypeA:

const example: Example = {
   exampleFunction: (input: SuperType | SubTypeA) => {
       if ('subPropertyA' in input) {
            console.log(input.subPropertyA.toFixed())   
       }
    }
}

const superType: SuperType = { propertyA: 'foo' }
example.exampleFunction(superType) // works

const subTypeA: SubTypeA = { propertyA: 'foo', subPropertyA: 123 }
example.exampleFunction(subTypeA) // works

Playground

Answer 2

If you modify your function to utilize only the property of SubTypeA, the issue becomes more apparent.

const example: Example = {
   exampleFunction: (input: SubTypeA) => {console.log(input.subPropertyA.toFixed())}
}

The function itself is technically correct (it takes a SubTypeA argument and accesses one of its properties). However, the type definition of Example can only ensure that a SuperType will be passed in. Therefore, the additional unique properties of SubTypeA cannot be guaranteed to be present.

For instance:

const superType: SuperType = { propertyA: 'foo' }
example.exampleFunction(superType)
// This call is valid but crashes as `subPropertyA` is missing

One possible solution could be to adjust your function to handle either a SuperType or a SubTypeA:

const example: Example = {
   exampleFunction: (input: SuperType | SubTypeA) => {
       if ('subPropertyA' in input) {
            console.log(input.subPropertyA.toFixed())   
       }
    }
}

const superType: SuperType = { propertyA: 'foo' }
example.exampleFunction(superType) // works

const subTypeA: SubTypeA = { propertyA: 'foo', subPropertyA: 123 }
example.exampleFunction(subTypeA) // works

Playground

Function in Typescript that accepts an extended interface as a parameter

Answer №1

Similar questions

How to convert typescript path aliases into relative paths for NPM deployment?

Express.js - Monitoring for server closure

Updating the content within the main body of the page rather than the sidebar in react-router v5

The Jasmine test is having trouble locating the imported variable

Positioning Avatar component at the center of Card component

Displaying data on the user interface in Angular by populating it with information from the form inputs

Firefox has various problems, but it functions flawlessly in Chrome without any problems

The Firefox tab continues to load endlessly due to an embedded iframe

Tips for stopping TypeScript code blocks from being compiled by the Angular AOT Webpack plugin

Adding a custom class to a select2 dropdown: How can it be done?

Animating number counters in Ionic 3 with Angular

Activate CSS element with a click

Obtain JSON data through an HTTP POST call

Is it beneficial to vary the time between function calls when utilizing setInterval in JavaScript?

Is the Vue "Unchecking" feature not properly deleting data from the array?

I am utilizing Python Django to display a message from a Python file in HTML. While the current code is functional, I would like the message to be showcased as a pop-up or alert notification

In JavaScript, the "this" keyword points to a different object

How do I customize the appearance of console.log messages stored in a string variable?

The feature of scrolling to a specific element within a bootstrap modal is not functioning as expected

Angular 2: Implementing a Class Addition with a Delay