The best approach to structuring a type hierarchy in TypeScript for maximum practicality

Question

The best approach to structuring a type hierarchy in TypeScript for maximum practicality

I am dealing with an abstract base type and multiple subtypes of it, some of which are abstract on their own and have further subtypes.

My goal is to define polymorphic functions in TypeScript, where some may be abstract while others have default implementations that can be overloaded by specific instances.

How can I best represent this model in TypeScript?

In JavaScript, I typically use classes. Below is a simple example to illustrate what my code might look like. Please focus on the data structure rather than the semantics.

 // Code example

However, translating this code directly into TypeScript poses challenges:

The field name cannot serve as a discriminant for Polygon. A proper discriminant would require introducing a new type PolygonType = Triangle | Square; and using PolygonType instead of Polygon for unknown subtypes.
Using classes limits expressiveness, hindering possibilities such as type level metaprogramming to define precise types.

An alternative approach in TypeScript could involve modeling types using types but sacrificing prototype inheritance polymorphism.

I am curious about other solutions to this common problem and whether one is generally preferred over others.

javascript typescript inheritance polymorphism subtyping

Answer 1

Answer №1

In this scenario, opting for interfaces over types appears to be the preferable choice.

One key advantage is that interfaces define types, aligning with the desired outcome.

Moreover, an interface serves as an abstract class historically devoid of any implemented methods.

Hence, if treated as a class, it enables polymorphic extensions much like regular classes:

interface Shape {
  area(): number
}
interface Polygon extends Shape {
  toString(): string
}


class Triangle implements Shape {}
class Square implements Polygon {}

Additionally, leveraging a base interface facilitates dependency inversion.

class ShapeDrawer {
  draw(shape: Shape) {} // This method can accept any Shape type, including Polygon or Square.
}

Answer 2

In this scenario, opting for interfaces over types appears to be the preferable choice.

One key advantage is that interfaces define types, aligning with the desired outcome.

Moreover, an interface serves as an abstract class historically devoid of any implemented methods.

Hence, if treated as a class, it enables polymorphic extensions much like regular classes:

interface Shape {
  area(): number
}
interface Polygon extends Shape {
  toString(): string
}


class Triangle implements Shape {}
class Square implements Polygon {}

Additionally, leveraging a base interface facilitates dependency inversion.

class ShapeDrawer {
  draw(shape: Shape) {} // This method can accept any Shape type, including Polygon or Square.
}

The best approach to structuring a type hierarchy in TypeScript for maximum practicality

Answer №1

Similar questions

Utilizing highcharts to visualize non-linear time data pulled from a CSV file

Is the TypeScript Callable interface unable to be called?

Is there a way to input atypical day and time text into an XDate object?

I am working on an Angular application that includes a dynamic form for an attendance system for employees. I am currently trying to figure out how to generate the JSON data

Is there a way to showcase the contents of the angular "tags" object seamlessly?

Express cannot find routes other than "/" in the request

Checking the token's validity using the API within the AuthGuard canActivate method in Angular8

Designing Checkboxes and Radio Buttons

Steps for locating and relocating an item to the top of a collection in an observable array

When the size of the mat stepper circle in Angular Material is increased, the position of the line is also adjusting accordingly

Creating a highly innovative server infrastructure tailored for Dojo applications with exceptional features

Is it possible to apply a formatting filter or pipe dynamically within an *ngFor loop in Angular (versions 2 and 4

Validation data not being transmitted in AJAX request

Challenge encountered when setting new values to an object depending on its existing values

Trouble with the JavaScript split function

`The Importance of Validating Enum Arrays in Typescript Using Class-Validator`

Ensure that the context is used to effectively clear any existing data from the previous bar chart

Consistently receiving the identical result even when the checkbox remains unselected

Creating a tooltip for a specific cell within an AG grid react component is a useful customization feature

In Angular JS, you can seamlessly apply the addClass function to another element by simply hovering over one