Creating Reusable Base Classes in TypeScript with a Real-Life Example

This article delves into creating reusable base classes in TypeScript, expanding on a previous post about TypeScript conversion. While this post stands alone, the linked post offers valuable insights into codebase rewriting and unit testing.

Johnny-Five, an IoT and robotics library for Node.js, simplifies hardware interaction using a jQuery-like approach: normalizing differences across platforms and providing higher-level abstractions. It supports various platforms through IO Plugins, including Arduino, Tessel, and Raspberry Pi. Raspi IO, a plugin supporting Raspberry Pi, was rewritten in TypeScript, leading to the creation of a reusable base class.

Designing a Reusable Base Class

For those unfamiliar with class-based inheritance, a base class provides common structure and functionality that subclasses can extend. Consider this simplified TypeScript example:

abstract class Automobile {
  private _speed: number = 0;
  private _direction: number = 0;
  public drive(speed: number): void {
    this._speed = speed;
  }

  public turn(direction: number): void {
    if (direction > 90 || direction 
<p>This <code>Automobile</code> base class is extended to create a <code>Sedan</code> class.  All methods from both classes are accessible.  Similarly, an <code>AbstractIO</code> base class was created for Johnny-Five's IO Plugins.</p>
<h3 id="Implementing-AbstractIO">Implementing AbstractIO</h3>
<p><code>AbstractIO</code> is an npm package providing a base class conforming to both TypeScript and JavaScript best practices.  Let's examine the <code>MODES</code> property and <code>digitalWrite</code> method:</p>
<p>The <code>MODES</code> property is an object mapping mode names (INPUT, OUTPUT, etc.) to numerical constants.  In TypeScript, an enum is ideal, but JavaScript lacks this feature.  The solution?  A TypeScript enum is used internally, mapped to a JavaScript object externally:</p>
<pre class="brush:php;toolbar:false">export enum Mode {
  INPUT = 0,
  OUTPUT = 1,
  ANALOG = 2,
  PWM = 3,
  SERVO = 4,
  STEPPER = 5,
  UNKNOWN = 99
}

public get MODES() {
  return {
    INPUT: Mode.INPUT,
    OUTPUT: Mode.OUTPUT,
    ANALOG: Mode.ANALOG,
    PWM: Mode.PWM,
    SERVO: Mode.SERVO,
    UNKNOWN: Mode.UNKNOWN
  };
}

For methods requiring subclass overrides (like digitalWrite), a JavaScript approach was adopted: throwing an error in the base class:

public digitalWrite(pin: string | number, value: number): void {
  throw new Error(`digitalWrite is not supported by ${this.name}`);
}

This works in both TypeScript and JavaScript, though TypeScript lacks warnings for un-overridden methods.

Key Learnings

The process of designing for both TypeScript and JavaScript highlighted these key points:

1. Prioritize common best practices.
2. If conflicts arise, use TypeScript best practices internally and map them to JavaScript externally.
3. If neither works, default to JavaScript best practices.

Abstract classes proved less useful in JavaScript, and duck typing across modules presented maintenance challenges. Iterative feedback from library consumers was crucial for successful design.

Conclusion

Creating base classes for both TypeScript and JavaScript users is achievable, though some compromises are necessary. AbstractIO successfully serves both communities, demonstrating that a balance can be struck.

The above is the detailed content of Creating Reusable Base Classes in TypeScript with a Real-Life Example. For more information, please follow other related articles on the PHP Chinese website!