TypeScript / JavaScript: <class> is not a constructor

Question

I am very new to TypeScript and am trying to export a class for use in my JS code.

project/testmodule/index.ts

class Foo {
    constructor(bar: number){
        this.number = number;
    };
    bar: number;
}

project/testmodule/index.js

"use strict";
/// <reference path="index.ts" />
Object.defineProperty(exports, "__esModule", { value: true });

project/index.js (main file)

const { Foo } = require('./testmodule');

console.log(new Foo(1).bar.toString());

on run:

TypeError: Foo is not a constructor
    at Object.<anonymous> (C:\Users\willi\OneDrive\Desktop\project\index.js:3:13)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

Is the error glaringly obvious? I don't understand what I did wrong here. VSCode is making this more confusing since it does seem to understand Foo as a constructor.

You need to write export class Foo { … } to export it. Looks like the compiler even strips away the dead code and produces an empty module in the .js file. — Bergi
– Bergi, Commented Jan 10, 2021 at 17:53
@evolutionxbox i removed the export, still have the same error — ChromaKey
– ChromaKey, Commented Jan 10, 2021 at 17:59
Removing the export won’t fix the issue. Either use ES Modules or Require. Don’t mix it ;) — evolutionxbox
– evolutionxbox, Commented Jan 10, 2021 at 18:00

soimon · Accepted Answer · 2021-01-10 18:03:55Z

This is likely a compilation error: the content of index.js does not reflect the content of index.ts. Keep in mind that you need to run the typescript compiler after every change you made to the typescript file for it to be reflected in the js output. If you run the tsc compiler in watch mode it will automatically do so as the files change.

Looking at your typescript code, it may even be that you are in fact running the compiler but are not noticing the compile errors: you are referencing this.number while you probably mean this.bar.

export class Foo {
    constructor(bar: number){
        this.bar = bar;
    };
    bar: number;
}

Your class can then be accessed like

import { Foo } from './testmodule';
console.log(new Foo(1).bar.toString());

Yes, this was the issue: I needed to transpile. Thanks so much

Diego Fidalgo · Accepted Answer · 2021-01-10 18:16:54Z

You're trying to use typescript directly on Javascript, what is not possible. You need to compile it to Javascript first, so you can use it on Javascript files.

If you want to benefit from the types you defined, you need to compile it outputing a declaration file (a index.d.ts).

So, if you have

// project/testmodule/index.ts
export class Foo {
    constructor(bar: number){
        this.bar = bar;
    };
    bar: number;
}

When you run tsc --declaration ./testmodule/index.ts (assuming you're on the project folder), you will get from the compiler something like

// project/testmodule/index.js
"use strict";
exports.__esModule = true;
exports.Foo = void 0;
var Foo = /** @class */ (function () {
    function Foo(bar) {
        this.bar = bar;
    }
    ;
    return Foo;
}());
exports.Foo = Foo;


// project/testmodule/index.d.ts
export declare class Foo {
    constructor(bar: number);
    bar: number;
}

Note: You don't need to understand the javascript code generated by the compiler. With some time and practice, you'll get to understand the declaration file (.d.ts). You can check it out in the docs.

Then, you can go to project/index.js and do

const { Foo } = require('./testmodule');

const foo = new Foo(1); // foo is typed as Foo on your IDE/Text Editor

console.log(foo.bar); // This will print 1 to the console

For now, be aware that this is just a simple example. For large projects you won't compile the whole thing this way every timme. You'll have a tsconfig.json file on the root of your project and this file will tell the typescript compiler what to do. When you're ready, you can check it out here.

Collectives™ on Stack Overflow

TypeScript / JavaScript: <class> is not a constructor

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related