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

The functionality of PHP in relation to the jQuery post feature seems to be malfunction

Go back to the pop-up window if an error occurs

The issue arises when React child props fail to update after a change in the parent state

What could be the issue with my interactive dropdown menu?

Retrieve the data stored in a selection of checkbox fields on a form

Troubleshooting issue with Bootstrap's responsive scrollspy functionality

Determining the data type of a generic variable within an Angular component

Bring in properties from a separate file in Vue3

Ways to retrieve the ID attribute value of the third ancestor above

Another option instead of using useCallback

Creating tube-like geometry in intervals using three.js

Display all elements on a webpage using Javascript without the need for scrolling

Finding out which side of a cube has been clicked---Let's identify the side

Prevent secret select fields from being submitted within a form

I'm curious about the Next.js type that corresponds to the Redirect object

Using AngularJS and ServiceStack webservice, perform the "get('url')" operation

Is it feasible to incorporate a multi-level navigation menu into the "NavItem" component using MaterialUI with TypeScript?

Creating vibrant squares using HTML and CSS

How come props do not get updated along with state changes?

Angular: Understanding the intricacies of HTTP calls in ngOnInit versus click events (potentially related to caching mechanisms)