Discovering the class type in TypeScript

Question

Discovering the class type in TypeScript

In my TypeScript coding journey, I encountered a challenge in detecting a specific Class type. Despite its seeming simplicity, I found a lack of straightforward documentation on how to accomplish this task. Here is an example that illustrates the issue:

Class Car {}

Class Ford extends Car {}

Class Audi extends Car {}

let mustang = new Ford();
let a6 = new Audi();

// Given instances of Ford and Audi, how can I determine their types dynamically??
console.log(a6.getType()); // <--- looking for 'Audi' here
console.log(mustang.getType()); // <--- expecting 'Ford' as the output

I am exploring possibilities to identify the most specific version of Car (either Audi or Ford) in a generic manner. While acknowledging that "getType()" is not a built-in function, I am curious to know if there exist any simple solutions or alternative perspectives on tackling this problem.

typescript typescript-generics

Answer 1

Answer №1

At runtime, Typescript does not grant access to types. To achieve this, the traditional JavaScript method using class.constructor.name is necessary.

For example:

class Car {}

class Ford extends Car {}

class Audi extends Car {}

let mustang = new Ford();
let a6 = new Audi();

console.log(mustang.constructor.name)
console.log(a6.constructor.name)

JulienD's answer suggests an update..
To account for cases where the name and class name may differ, it is advisable to enhance the approach. Creating a getter function makes it more convenient than directly using this.constructor.name. For instance:

    class Car {
       carType: string = '';
       public get name(): string {
          return this.carType || this.constructor.name;
       }
    }

    class Ford extends Car {
        carType: string = 'Shelby';
    }

    class Audi extends Car {}

    let mustang = new Ford();
    let a6 = new Audi();

    console.log(mustang.name)
    console.log(a6.name)

Answer 2

At runtime, Typescript does not grant access to types. To achieve this, the traditional JavaScript method using class.constructor.name is necessary.

For example:

class Car {}

class Ford extends Car {}

class Audi extends Car {}

let mustang = new Ford();
let a6 = new Audi();

console.log(mustang.constructor.name)
console.log(a6.constructor.name)

JulienD's answer suggests an update..
To account for cases where the name and class name may differ, it is advisable to enhance the approach. Creating a getter function makes it more convenient than directly using this.constructor.name. For instance:

    class Car {
       carType: string = '';
       public get name(): string {
          return this.carType || this.constructor.name;
       }
    }

    class Ford extends Car {
        carType: string = 'Shelby';
    }

    class Audi extends Car {}

    let mustang = new Ford();
    let a6 = new Audi();

    console.log(mustang.name)
    console.log(a6.name)

Answer 3

Answer №2

By making changes to the classes, you can introduce a new property that is specifically defined in subclasses. Take this example:

class Vehicle {
  type: string = 'vehicle';
}

class Bike extends Vehicle {
  type = 'bike';
}

class Truck extends Vehicle {
  type = 'truck';
}

let mountainBike = new Bike();
let semiTruck = new Truck();

console.log(semiTruck.type); // <--- returns truck
console.log(mountainBike.type); // <--- returns bike

Answer 4

By making changes to the classes, you can introduce a new property that is specifically defined in subclasses. Take this example:

class Vehicle {
  type: string = 'vehicle';
}

class Bike extends Vehicle {
  type = 'bike';
}

class Truck extends Vehicle {
  type = 'truck';
}

let mountainBike = new Bike();
let semiTruck = new Truck();

console.log(semiTruck.type); // <--- returns truck
console.log(mountainBike.type); // <--- returns bike

Discovering the class type in TypeScript

Answer №1

Answer №2

Similar questions

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

The efficiency of React Context API's setters is remarkably sluggish

Navigating Angular QueryList through loops

Creating subclass mappings and defining subclasses dynamically using Typescript at runtime

I'm looking to learn how to implement the delete method in an API using TypeScript. Can anyone help me out

Choosing a value type within an interface or object declaration

Next.js experiencing hydration error due to dynamic component

The comparison between StrictNullChecks and Union Types in terms of syntax usage

What is the process for expanding types for a section element in Typescript?

Executing an AngularJS function using regular JavaScript code

What's the trick to aligning the label on the material-ui text field to the right side?

Developing a custom React component library using Webpack and Typescript, however encountering issues with Webpack consistently bundling React

The stacked bar chart in Apex is not displaying correctly on the x-axis

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Is it possible to display Angular Material Slider after the label?

Typescript: The original type cannot be indexed with a type-mapped type

Do type declaration files for NPM packages have to be in the .d.ts format?

Organizing objects into arrays in Node.js

What method can be used to inherit the variable type of a class through its constructor

Encounter a Typescript error when dealing with "app.ws" while using express-ws