Can a Typescript class type be defined without explicitly creating a JavaScript class?

Question

Can a Typescript class type be defined without explicitly creating a JavaScript class?

I am exploring the idea of creating a specific class type for classes that possess certain properties. For example:

class Cat {
  name = 'cat';
}

class Dog {
  name = 'dog';
}

type Animal = ???;

function foo(AnimalClass: Animal) {
  console.log((new AnimalClass()).name);
}

I am looking to have doSomething be able to accept any class that includes a string property named name. The approach I have taken so far involves:

class _Animal {
  name: string;
}

type Animal = typeof _Animal;

I am wondering if there is a way to achieve this without having to define a new JavaScript class and simply focus on specifying the type.

javascript typescript

Answer 1

Answer №1

One way to explain a constructor is by using the new expression:

type AnimalContructor = new () => { name: string };

function foo(AnimalClass: AnimalContructor) {
  console.log((new AnimalClass()).name);
}

Interactive example here

Another approach is creating a union of constructors:

type AnimalContructor = typeof Cat | typeof Dog;

Test it out here

Answer 2

One way to explain a constructor is by using the new expression:

type AnimalContructor = new () => { name: string };

function foo(AnimalClass: AnimalContructor) {
  console.log((new AnimalClass()).name);
}

Interactive example here

Another approach is creating a union of constructors:

type AnimalContructor = typeof Cat | typeof Dog;

Test it out here

Answer 3

Answer №2

To handle this scenario, you can utilize generics. Define a type that is only allowed to be assigned to an object with a name property as a string. Then, introduce a generic type that extends the Animal type. This approach eliminates the need to create a new class for Animal.

class Cat {
  name = "cat";
  age = 2;
}

class Dog {
  name = 'dog';
}

class Car {
  brand = "Audi";
}

type Animal = {name: string};

function doSomething<T extends Animal>(animal: T) {
}

doSomething(new Dog());
doSomething(new Cat());
doSomething(new Car()); // TypeScript error - car is missing name

If you want to extend the Animal type with another class, you can use intersection

class Cat {
  name = "cat";
  age = 2;
}

class Information {
  year = 2020;
}
class Dog extends Information {
  name = 'dog';
}

type Animal = { name: string } & Information;

function doSomething<T extends Animal>(animal: T) {
}

doSomething(new Dog());
doSomething(new Cat()); // TypeScript error - cat is missing year

Answer 4

To handle this scenario, you can utilize generics. Define a type that is only allowed to be assigned to an object with a name property as a string. Then, introduce a generic type that extends the Animal type. This approach eliminates the need to create a new class for Animal.

class Cat {
  name = "cat";
  age = 2;
}

class Dog {
  name = 'dog';
}

class Car {
  brand = "Audi";
}

type Animal = {name: string};

function doSomething<T extends Animal>(animal: T) {
}

doSomething(new Dog());
doSomething(new Cat());
doSomething(new Car()); // TypeScript error - car is missing name

If you want to extend the Animal type with another class, you can use intersection

class Cat {
  name = "cat";
  age = 2;
}

class Information {
  year = 2020;
}
class Dog extends Information {
  name = 'dog';
}

type Animal = { name: string } & Information;

function doSomething<T extends Animal>(animal: T) {
}

doSomething(new Dog());
doSomething(new Cat()); // TypeScript error - cat is missing year

Can a Typescript class type be defined without explicitly creating a JavaScript class?

Answer №1

Answer №2

Similar questions

Utilizing Dynamic Class Names in Angular 7 with Typescript

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

Attempting to utilize a for loop in JavaScript to condense code, however encountering a "not defined" error

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

Limit the usage of typescript to ensure that references to properties of 'any' object are verified

"Customize your map pins on Google Maps by updating the marker location through a

Differences between ES6 class static method and regular function

Performance problem with 'Point-along-path' d3 visualization

Navigating without the need for a mouse click

Unusual "visual" phenomenon with autocomplete feature in VUE.js

Implementing efficient loading and dynamic updates in web applications with Angular.js and php through

What is the best way to link labels with input fields located separately in Angular?

Check if the provided user email is already in use using the express validator

Does PHP/AJAX only function when an output is generated?

Tips for Saving process.argv in a .js File for Future Reference

Is there a way to adjust the size of the canvas element in HTML without compromising quality or resorting to zooming?

Specify touch event regions with the ngTouch directive

Invoke the ng-click function within the ng-change function

Issue with displaying jqplot in a jQuery page

Experiencing difficulties in installing opensea-js using NPM