What are some ways to specialize a generic class during its creation in TypeScript?

Question

What are some ways to specialize a generic class during its creation in TypeScript?

I have a unique class method called continue(). This method takes a callback and returns the same type of value as the given callback. Here's an example:

function continue<T>(callback: () => T): T {
   // ...
}

Now, I'm creating a class that is parameterized over the result type of the continue() function which we'll call Semantic. My continue() method in this class will pass along the result to the callback:

class Checkpoint<Semantic> {
   function continue<T>(callback: (val: Semantic) => T): T {
      // ...
   }
}

This Semantic type can be one of a few possible types, and I need to differentiate behavior at runtime based on the type of Checkpoint being used:

type runtimeDiscriminator = 'Script' | 'Statement'

class Checkpoint<Semantic> {
   type: runtimeDiscriminator

   constructor(blah: any, type: runtimeDiscriminator) {
      // ...
      this.type = type
   }

   continue<T>(callback: (val: Semantic) => T): T {
      if (this.type === 'Script') { /* ... do things */ }
      else { /* ... do other things */ }
   }
}

The challenge I'm facing is trying to incorporate this information into the type-system and using user-defined type guards to ensure proper typing throughout the process.

type runtimeDiscriminator = 'Script' | 'Statement'

class Checkpoint<Semantic> {
   type: runtimeDiscriminator

   constructor(blah: any, type: 'Script'): Checkpoint<Script>
   constructor(blah: any, type: 'Statement'): Checkpoint<Statement>
   constructor(blah: any, type: runtimeDiscriminator) {
      // ...
      this.type = type
   }

   producesScript(): this is Checkpoint<Script> {
      return this.type === 'Script'
   }

   producesStatement(): this is Checkpoint<Statement> {
      return this.type === 'Statement'
   }

   continue<T>(callback: (val: Semantic) => T): T {
      // ... perform runtime checks and narrow down the resultant type from `callback`
   }
}

However, I encountered an error from the typechecker:

Type annotation cannot appear on a constructor declaration. ts(1093)

I'm puzzled by this restriction and unsure how to proceed without duplicating annotations at every callsite. How can I properly overload constructors like this?

Edit: Hopefully, I haven't mixed up TypeScript terminology too much. Coming from OCaml background, the C++-like terms in TypeScript can sometimes get confusing!

typescript generics constructor-overloading type-narrowing typeguards

Answer 1

Answer №1

Regarding TypeScript naming conventions: typically, generic type parameter names consist of one or two uppercase characters, even though this may limit expressiveness. Furthermore, type aliases and interfaces often start with an initial capital letter, while non-constructor values usually start with an initial lowercase letter. These conventions will be adhered to in this context.

To proceed effectively, consider creating a mapping from discriminator RuntimeDiscriminator to discriminated type Semantic, and making your Checkpoint class generic based on the discriminator itself. Here is an example:

interface SemanticMap {
  Script: Script;
  Statement: Statement;
}

type RuntimeDiscriminator = keyof SemanticMap;

It's worth noting that you don't necessarily need a single instance of the SemanticMap interface in your code; it simply helps the type system understand the relationship between string literal names and types (interfaces are ideal for this purpose).

class Checkpoint<K extends RuntimeDiscriminator> {
  type: K;

  constructor(blah: any, type: K) {
    this.type = type;
  }

  producesScript(): this is Checkpoint<"Script"> {
    return this.type === "Script";
  }

  producesStatement(): this is Checkpoint<"Statement"> {
    return this.type === "Statement";
  }

In referencing your Semantic type, utilize the lookup type SemanticMap[K], as shown in the signature of the continue() method:

 continue<T>(callback: (val: SemanticMap[K]) => T): T {
    return callback(getSemanticInstance(this.type)); // or something
  }

}

(In implementing continue(), you may find yourself needing to use type assertions or similar approaches since the compiler generally struggles with assigning concrete values to generics due to safety concerns; see microsoft/TypeScript#24085. This limitation applies across the board, not just when using SemanticMap[K] instead of Semantic.)

Let's confirm that it functions as expected:

function scriptAcceptor(s: Script): string {
  return "yummy script";
}

function statementAcceptor(s: Statement): string {
  return "mmmm statement";
}

const scriptCheckpoint = new Checkpoint(12345, "Script"); // Checkpoint<"Script">
const scrVal = scriptCheckpoint.continue(scriptAcceptor); // string

const statementCheckpoint = new Checkpoint(67890, "Statement"); // Checkpoint<"Statement">
const staVal = statementCheckpoint.continue(statementAcceptor); // string

const oops = scriptCheckpoint.continue(statementAcceptor); // error!
//                                     ~~~~~~~~~~~~~~~~~~~~
// Argument of type '(s: Statement) => string' is not assignable
// to parameter of type '(val: Script) => string'.

Everything seems to be functioning correctly.

As a side note, if you opt to implement the continue() method by calling those type guards and switching on the result, you might want to consider transforming Checkpoint<K> into an abstract superclass and introducing concrete subclasses like

ScriptCheckpoint extends Checkpoint<"Script">

and

StatementCheckpoint extends Checkpoint<"Statement">

, each with its own implementation of continue(). This approach can offload the responsibility from Checkpoint of having to fulfill multiple roles. However, without understanding your specific scenario, I won't elaborate further on this idea; it's just something to keep in mind.

Link to code

Answer 2

Regarding TypeScript naming conventions: typically, generic type parameter names consist of one or two uppercase characters, even though this may limit expressiveness. Furthermore, type aliases and interfaces often start with an initial capital letter, while non-constructor values usually start with an initial lowercase letter. These conventions will be adhered to in this context.

To proceed effectively, consider creating a mapping from discriminator RuntimeDiscriminator to discriminated type Semantic, and making your Checkpoint class generic based on the discriminator itself. Here is an example:

interface SemanticMap {
  Script: Script;
  Statement: Statement;
}

type RuntimeDiscriminator = keyof SemanticMap;

It's worth noting that you don't necessarily need a single instance of the SemanticMap interface in your code; it simply helps the type system understand the relationship between string literal names and types (interfaces are ideal for this purpose).

class Checkpoint<K extends RuntimeDiscriminator> {
  type: K;

  constructor(blah: any, type: K) {
    this.type = type;
  }

  producesScript(): this is Checkpoint<"Script"> {
    return this.type === "Script";
  }

  producesStatement(): this is Checkpoint<"Statement"> {
    return this.type === "Statement";
  }

In referencing your Semantic type, utilize the lookup type SemanticMap[K], as shown in the signature of the continue() method:

 continue<T>(callback: (val: SemanticMap[K]) => T): T {
    return callback(getSemanticInstance(this.type)); // or something
  }

}

(In implementing continue(), you may find yourself needing to use type assertions or similar approaches since the compiler generally struggles with assigning concrete values to generics due to safety concerns; see microsoft/TypeScript#24085. This limitation applies across the board, not just when using SemanticMap[K] instead of Semantic.)

Let's confirm that it functions as expected:

function scriptAcceptor(s: Script): string {
  return "yummy script";
}

function statementAcceptor(s: Statement): string {
  return "mmmm statement";
}

const scriptCheckpoint = new Checkpoint(12345, "Script"); // Checkpoint<"Script">
const scrVal = scriptCheckpoint.continue(scriptAcceptor); // string

const statementCheckpoint = new Checkpoint(67890, "Statement"); // Checkpoint<"Statement">
const staVal = statementCheckpoint.continue(statementAcceptor); // string

const oops = scriptCheckpoint.continue(statementAcceptor); // error!
//                                     ~~~~~~~~~~~~~~~~~~~~
// Argument of type '(s: Statement) => string' is not assignable
// to parameter of type '(val: Script) => string'.

Everything seems to be functioning correctly.

As a side note, if you opt to implement the continue() method by calling those type guards and switching on the result, you might want to consider transforming Checkpoint<K> into an abstract superclass and introducing concrete subclasses like

ScriptCheckpoint extends Checkpoint<"Script">

and

StatementCheckpoint extends Checkpoint<"Statement">

, each with its own implementation of continue(). This approach can offload the responsibility from Checkpoint of having to fulfill multiple roles. However, without understanding your specific scenario, I won't elaborate further on this idea; it's just something to keep in mind.

Link to code

What are some ways to specialize a generic class during its creation in TypeScript?

Answer №1

Similar questions

It’s not possible for Typescript to reach an exported function in a different module

How can I toggle the visibility of a div after the DOM has finished loading?

Chess.js TypeScript declaration file for easy implementation

What is the best way to upload a file using a relative path in Playwright with TypeScript?

At what point do we employ providers within Angular 2?

Check to see whether the coordinates fall inside the specified bounding box

Create a dynamically updating list using React's TypeScript rendering at regular intervals

Trigger parent Component property change from Child Component in Angular2 (akin to $emit in AngularJS)

I'm struggling to figure out the age calculation in my Angular 2 code. Every time I try to run it,

Prisma auto-generating types that were not declared in my code

The specified property 'XYZ' is not found in the type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

What is preventing me from running UNIT Tests in VSCode when I have both 2 windows and 2 different projects open simultaneously?

Angular default route with parameters

There was an error reported by TypeScript stating that Nest.js is not considered a module

Error message: Unable to access property 'post' from undefined - Angular 2

Error: Reference to an undeclared variable cannot be accessed. TypeScript, Cordova, iOS platforms

What is the purpose of specifying the props type when providing a generic type to a React functional component?

Adding a condition to the react-router v6 element: A step-by-step guide

Error: Callstack Overflow encountered in TypeScript application

TypeScript: Extending a Generic Type with a Class