Typescript: Is it possible to declare a class using function

Question

Reading this tutorial, I see that one way to declare a class in Typescript is to use the class syntax like so.

class Person { 
   constructor(name: string) {
      this.name = name
   }
}

And upon compiling it will generate the following Javascript code.

//Generated by typescript 1.8.10
var Person = (function () {
   function Person(name) {
      this.name = name
   }
   return Person;
}());

My question is, is it possible to declare in Typescript a class using the generated Javascript syntax like so...

function Person(name: string) {
  this.name = name
}

Typescript is a super set of JavaScript. Anything you can do in JS you can do in TS. You just may lose out on some TS features. — bryan60
– bryan60, Commented Apr 27, 2020 at 20:45
In year 2020 - what is your reason to not use class syntax? typescriptlang.org/play/… — zerkms
– zerkms, Commented Apr 27, 2020 at 21:00
I'm porting some legacy code from JS to TS, and wanted to minimize the amount of changes I had to do, but not sure if this is a good reason. — jmtoung
– jmtoung, Commented Apr 28, 2020 at 22:26

jcalz · Accepted Answer · 2020-04-28 17:17:32Z

It's sort of possible, but not recommended, according to microsoft/TypeScript#2310. According to the TS team, if you're using TypeScript, you should use class directly. This will compile as-is if you target ES2015 or above, or it will compile down to the function you mentioned if you target ES5.

If you want to ignore the recommendation, you have to do some type annotations and assertions to get the behavior you want, and it will end up leaving a little but of runtime no-op code in the compiled output. And it won't be particularly type safe (if you make a mistake in your typings the compiler will not complain).

First you have to manually define the interface of your class instance, since the compiler can't infer it for you:

interface Person {
    name: string;
}

Then you have to give your function a this parameter so the compiler understands that, inside the implementation of your function, the this value should be treated as an instance of your class. You should also rename the function out of the way from Person to something else (like _Person), because you won't be able to change its type to something new-able after the fact:

function _Person(this: Person, name: string) {
    this.name = name;
}

Finally, you can define Person as a const whose value is the same as your renamed function at runtime, but at compile-time you give it a constructor signature:

const Person = _Person as any as new (name: string) => Person;

Now it's set up so that Person is a function at runtime (not a class, even if you target ES2015+), but that the compiler sees it as a constructor:

const p = new Person("Alice");
console.log(p.name); // Alice

So, uh, hooray? Fighting against the compiler like this and "winning" probably isn't worth it in any production setting. But it's interesting to see how to do it, I guess.

Okay, hope that helps; good luck!

Playground link to code

smac89 · Accepted Answer · 2020-04-28 18:08:34Z

1

As an improvement to the already existing answer, you can also do it this way:

interface Person {
    name: string;
}

interface PersonConstructor {
    new(name: string): Person;
}

const Person: PersonConstructor = function (this: Person, name: string) {
    this.name = name;
} as any;

const p = new Person("Alice");
console.log(p.name); // Alice

This way you atleast preserve some type safety if you still care about that stuff.

This way also allows you to define static methods on Person by first adding them to PersonConstructor. So you can do:

interface PersonConstructor {
    new(name: string): Person;
    foo(bar: string): void;
}

And later on do:

Person.foo = (bar: string) => {
    console.log(`foo ${bar}`);
}

And call it with Person.foo("something");

Playground Link

edited Apr 28, 2020 at 18:08

answered Apr 28, 2020 at 17:45

smac89

43.7k15 gold badges150 silver badges202 bronze badges

Collectives™ on Stack Overflow

Typescript: Is it possible to declare a class using function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related