TypeScript / JavaScript： <class> 不是构造函数

Question

我是TypeScript的新手，正在尝试导出一个类以用于我的JS代码。

项目/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(主文件(

const { Foo } = require('./testmodule');
console.log(new Foo(1).bar.toString());

运行中：

TypeError: Foo is not a constructor
at Object.<anonymous> (C:UserswilliOneDriveDesktopprojectindex.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

这个错误明显吗？我不明白我在这里做错了什么。VSCode使这一点更加令人困惑，因为它似乎确实将Foo理解为构造函数。

Answer 1

这可能是一个编译错误：index.js的内容没有反映index.ts的内容。请记住，您需要在对typescript文件进行每次更改后运行typescript编译器，以便将其反映在js输出中。如果在监视模式下运行tsc编译器，它将在文件更改时自动运行。

查看您的typescript代码，甚至可能您实际上正在运行编译器，但没有注意到编译错误：您引用的是this.number，而您可能是指this.bar。

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

然后可以像一样访问您的课程

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

Answer 2

您正试图在Javascript上直接使用typescript，这是不可能的。您需要先将其编译为Javascript，这样您就可以在Javascript文件中使用它。

如果您想从定义的类型中获益，则需要通过输出声明文件(index.d.ts(对其进行编译。

所以，如果你有

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

当您运行tsc --declaration ./testmodule/index.ts(假设您在project文件夹中(时，您将从编译器中获得类似的内容

// 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;
}

注意：您不需要理解编译器生成的javascript代码。通过一些时间和实践，您将了解声明文件(.d.ts(。您可以在文档中查看它。

然后，您可以转到project/index.js并进行

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

现在，请注意，这只是一个简单的例子。对于大型项目，您不会每次都以这种方式编译整个项目。你会在项目的根上有一个tsconfig.json文件，这个文件会告诉typescript编译器该做什么。当你准备好了，你可以在这里查看它。