What is the process for coding a prototype-based ES5 class in TypeScript?

Question

What is the process for coding a prototype-based ES5 class in TypeScript?

Currently, I am in the process of migrating some legacy ES5 projects to TypeScript. These projects contain older-style classes (functions) defined as shown in the simplified examples below:

function MyClass(arg1) {
  this.arg_prop_1 = arg1;
  this.arg_prop_2 = function() { return this.arg_prop_1; }
}

MyClass.prototype.proto_prop = function() { return this.arg_prop_2() === 42; }

const obj = new MyClass(42);
console.assert(obj.proto_prop());

I am seeking advice on the correct / recommended / best way to provide typings for this code without converting it into ES6 class syntax.

My Attempts So Far:

In order to implement TypeScript, I have declared certain interfaces like this (not working):

interface MyClassThis {
  arg_prop_1: number;
  arg_prop_2: () => number;
  proto_prop: () => boolean;
}

interface MyClassCtor {
  new (arg1: number): MyClassThis;
}

To start off, I tried using existing type definitions for the "Date" type from here. Since the above approach is not working (error: 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.(7009)), I am still uncertain about the correct method to define types for these old-style class functions.

javascript typescript ecmascript-5

Answer 1

Answer №1

If you're unable to modify the source code, keep it as a .js file and include a corresponding .d.ts file with type definitions.

// my-class.js
export function MyClass(arg1) {
  this.arg_prop_1 = arg1;
  this.arg_prop_2 = function () {
    return this.arg_prop_1;
  };
}

MyClass.prototype.proto_prop = function () {
  return this.arg_prop_2() === 42;
};

// my-class.d.ts
export interface MyClass {
  arg_prop_1: string;
  arg_prop_2(): string;
  proto_prop(): boolean;
}

export const MyClass: {
  new (arg1: string): MyClass;
};

You can now utilize the file with these defined types:

import { MyClass } from "./my-class";

const instance = new MyClass("a string");
instance.proto_prop(); // returns a boolean value

View Code Sandbox Example

Answer 2

If you're unable to modify the source code, keep it as a .js file and include a corresponding .d.ts file with type definitions.

// my-class.js
export function MyClass(arg1) {
  this.arg_prop_1 = arg1;
  this.arg_prop_2 = function () {
    return this.arg_prop_1;
  };
}

MyClass.prototype.proto_prop = function () {
  return this.arg_prop_2() === 42;
};

// my-class.d.ts
export interface MyClass {
  arg_prop_1: string;
  arg_prop_2(): string;
  proto_prop(): boolean;
}

export const MyClass: {
  new (arg1: string): MyClass;
};

You can now utilize the file with these defined types:

import { MyClass } from "./my-class";

const instance = new MyClass("a string");
instance.proto_prop(); // returns a boolean value

View Code Sandbox Example

Answer 3

Answer №2

Although it's a bit overdue, I wanted to share this answer for anyone who may come across it in the future.

Alex Wayne's response provides insight on incorporating type definitions without altering your current codebase. However, if your intention is to transition to Typescript while maintaining compatibility with ES5 output, you can simply achieve this by including

"target": "es5"

in your tsconfig.json (documentation).

{
  // ...
  "compilerOptions": {
    "target": "es5",
    // ...
  }
}

In terms of defining your "ES5 class" in Typescript,

class MyClass {
  arg_prop_1: number;
  arg_prop_2: () => number;

  constructor(arg1: number) {
    this.arg_prop_1 = arg1;
    this.arg_prop_2 = () => this.arg_prop_1;
  }
  
  proto_prop() { return this.arg_prop_2() === 42; }
}

You can compare the compiled result to your original code here.

Answer 4

Although it's a bit overdue, I wanted to share this answer for anyone who may come across it in the future.

Alex Wayne's response provides insight on incorporating type definitions without altering your current codebase. However, if your intention is to transition to Typescript while maintaining compatibility with ES5 output, you can simply achieve this by including

"target": "es5"

in your tsconfig.json (documentation).

{
  // ...
  "compilerOptions": {
    "target": "es5",
    // ...
  }
}

In terms of defining your "ES5 class" in Typescript,

class MyClass {
  arg_prop_1: number;
  arg_prop_2: () => number;

  constructor(arg1: number) {
    this.arg_prop_1 = arg1;
    this.arg_prop_2 = () => this.arg_prop_1;
  }
  
  proto_prop() { return this.arg_prop_2() === 42; }
}

You can compare the compiled result to your original code here.

What is the process for coding a prototype-based ES5 class in TypeScript?

Answer №1

Answer №2

Similar questions

Using Typescript to implement a conditional return type and ensuring that the value types are consistent together

Reorganizing a list in AngularJS after adding a new item

Is there a comparable method to hasAttribute() in AngularJS?

Passing PHP array to JavaScript and selecting random images from the array

How can I extract the text enclosed in <li> tags using JavaScript?

What is the process for defining a filename when exporting with Webdatarocks default settings?

I was looking to implement back face culling for my sphere model, but I'm currently struggling with defining the vertices for my wireframe sphere

Setting a Javascript value to a Controller variable within an ASP.NET MVC View

Converting CSV to JSON with the help of jQuery

How can I apply a class to the pre and code elements in Redactor?

I am encountering compilation errors while trying to run a basic react-dnd list using typescript

What could be the possible reason for the token having a null value during login authentication in

Numerous unique designs paired with exclusive paths

Using type values in TypeScript

Validating multiple fields that are added dynamically using jQuery

Dealing with automatic indentation in the Node.js REPL while pasting content

Unable to successfully transfer parameters from AJAX to PHP

What is the behavior of an AngularJS controller when it encounters the res.json(false) value?

Utilizing Restangular to assign multiple parameters to a variable within the scope variable

Utilizing ScrollTo() in Javascript will smoothly navigate the page downward