Embracing Typescript version 2.7 and above allows for utilizing multiple types within a parameter, enabling developers to efficiently handle specific properties

Imagine a scenario where a ChildClass is extending the ParentClass. You can view the code on Stackblitz here.

The ChildClass simply adds a public property called "brainPower":

class ParentClass{

  _me: string;

  constructor() {
    this._me = "I'm a parent";
  }

  whoAmI(): string {
    return this._me;
  }
}

class ChildClass extends ParentClass {

  public readonly brainPower = 42;

  constructor() {
    super();
    this._me = "I'm a child";
  }
}

In the code, there is a method named "doStuff" that takes a parameter which could be of either type:

class Program {

  static main() {
    Program.doStuff(new ParentClass());
    Program.doStuff(new ChildClass());
  }

  static doStuff(anInstance: ParentClass | ChildClass){

    console.log('[Program] > Processing > ', anInstance.whoAmI());

    if(anInstance.brainPower){
      console.log('[Processing] > ', anInstance.whoAmI(), ' > I can brain as much as ', anInstance.brainPower);
    }
  }
}

The issue arises when the Typescript compiler shows the error message:

Property 'brainPower' does not exist on type 'ParentClass | ChildClass'.

So the real Question here is how to define multiple possible types for a parameter and make sure that TypeScript can correctly understand it, allowing properties specific to one type only to be accepted?

Answer №1

To allow for flexibility, you can specify that the function parameter accepts any instance of the ParentClass.

Rather than verifying the existence of a property, consider checking if the provided object is an instance of the ChildClass.

if (anInstance instanceof ChildClass) ...

When this condition is met, the TypeScript compiler will recognize the object as an instance of ChildClass within the scope of the if statement.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alias for the computed column is not correctly connected to the TypeORM Entity

I am currently working on extracting data from a table in a MySQL database using TypeORM for my Express.js project. In order to retrieve the data, I am utilizing the QueryBuilder. This is the implementation I have: const result = await this.repository.cr ...

Changing a "boolean bit array" to a numerical value using Typescript

Asking for help with converting a "boolean bit array" to a number: const array: boolean[] = [false, true, false, true]; // 0101 Any ideas on how to achieve the number 5 from this? Appreciate any suggestions. Thanks! ...

Having trouble with filtering an array using the some() method of another array?

When utilizing the code below, my goal is to filter the first array by checking if the item's id exists in the second array. However, I am encountering an issue where the result is coming back empty. dialogRef.afterClosed().subscribe((airlines: Airli ...

Some challenges encountered in Typescript/tslint

Just starting out with Typescript and trying basic annotations. First, having trouble with one of the imports. Second, unable to recognize type inside object destructuring. Third, facing issues with JSX implementation. Here is my code: import * as React ...

What is the method for adjusting the spacing between binding tags within HTML code formatting specifically for TypeScript elements in IntelliJ?

My Angular binding currently defaults to <h1>{{typeScriptVar}}</h1>, but I would like it to be set as <h1>{{ typeScriptVar }}</h1> when I use the format code shortcut in InteliJ. Can anyone assist me with this issue? I have resear ...

Guide for setting up filtering and sorting on a multi-value array column with MUI's data grid

I've encountered an issue with the MUI Data Grid component's free version, specifically regarding filtering and sorting on a column that displays multiple values in an array. The problematic column in this case is 'tags', which showcase ...

Understanding Scope in TypeScript

Recently, I developed a sample application in Node.js which utilizes pg-promise to execute queries on a Postgres database. I encapsulated this functionality within a class named PostgresDataAccess. However, I encountered an issue while trying to access t ...

retrieving information from an array nested within a JSON object in an Angular application

I am struggling to retrieve two specific values from a JSON object. The content of the JSON is as follows: [ { "type":"session_start", "properties":[ { "property":"activity&q ...

Checking to see if the prop 'isChecked' has been modified

I'm currently facing a challenge with testing whether a class's prop value changes after clicking the switcher. Below is the component class I am working with: import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core&a ...

What could be causing the code to not wait for the listener to finish its execution?

I've been attempting to make sure that the listener has processed all messages before proceeding with console.log("Done") using await, but it doesn't seem to be working. What could I possibly be overlooking? const f = async (leftPaneRow ...

When using the TypeScript && operator, the resulting type is not determined by the second operand

Several past discussions on SO have touched upon the concept that the inferred type from && is based on the last expression. TypeScript’s failure to detect union type with an && operator Uncovering the reason behind the && opera ...

How can I customize a currency directive in AngularJS using filters?

My goal is to enhance user experience by allowing input in custom currency values like '1.5M' instead of 1500000, and '1B' instead of 1000000000 on an input form dealing with large numbers. To achieve this, I've created a FormatSer ...

A guide to incorporating border radius to images within a composite image with sharp.js in Node.js

In my Node.js project, I am using the sharp library to combine a collection of images into a single image. Although I have successfully created the composite image, I now need to add a border radius to each of the images in the grid. Here is the code snip ...

Prettier seems to be producing varied outcomes across various machines

My teammate and I are collaborating on the same project, but we're facing an issue where our Prettier configurations conflict. Each time we push our code to Github, his Prettier format overrides mine. Here's an example of his formatting: const in ...

Dividing component files using TypeScript

Our team has embarked on a new project using Vue 3 for the front end. We have opted to incorporate TypeScript and are interested in implementing a file-separation approach. While researching, we came across this article in the documentation which provides ...

When trying to access a string value for an ID, I encountered an error stating "Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)"

Currently, I am working on a project using React and Typescript. My goal is to retrieve a specific string with the key name id from an array of ten objects that contain the id. The screenshot displaying the code produces the desired output in the console; ...

Rendering a child component in the DOM tree with Aurelia StageComponent

Imagine having an app.html template structured like this: <template> <require from="./MyComponent"></require> <h1>${message}</h1> <my-component>test</my-component> </template> Accompanied by MyCompone ...

What is the best way to set up an endpoint in Angular for image uploading?

Using the Kolkov Angular editor in my Angular application, I have successfully created a rich text editor. Currently, I am looking to upload images from the editor to the server. I already have a function in place that takes a file as an argument and send ...

What is the process for importing a map from an external JSON file?

I have a JSON file with the following configuration data: { "config1": { //this is like a map "a": [ "string1", "string2"], "b": [ "string1", "string2"] } } Previously, before transitioning to TypeScript, the code below worked: import ...

How can I retrieve the SID received in a different tab using MSAL.js?

I have successfully integrated MSAL into a client-side library, and things are going smoothly so far. My next goal is to enable Single Sign-On (SSO) by following the instructions provided in the documentation at https://learn.microsoft.com/en-us/azure/act ...