如何在 Javascript 中使用已编译的 TypeScript 类答案

【问题标题】：How to use a compiled TypeScript class in Javascript如何在 Javascript 中使用已编译的 TypeScript 类
【发布时间】：2018-06-01 06:53:57
【问题描述】：

想象一下，我有一个简单的 TypeScript 类，Animal.ts：

export default class Animal {
  constructor(public name : string) { }
}

有了这个tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  },
  "files": [
    "Animal"
  ]
}

如何在 javascript 文件中使用此类的编译版本（通过运行 tsc 编译），如下所示：

var Animal = require("./Animal");

var newAnimal = new Animal();

我应该在我的tsconfig.json 文件中编辑一些内容吗？我得到的错误是：

ReferenceError: Animal 未定义

【问题讨论】：

您也可以使用“allowJs”（在 tsconfig.json 中）让 typescript 编译 javascript 文件。这样，您就可以从您的 javascript 中引用 typescript 类。
由于您使用的是默认导出，我相信您必须像 var Animal = require("./Animal").default 一样要求它 .default。
使用export default 导出会使您的导出成为一个模块。它将变为new Animal.default('name')。但是错误不可重现，Animal 导出为{ __esModule: true, default: [Function: Animal] }。
您可以按照CRice 所说的做或省略default 关键字
是的，抱歉，我刚刚注意到了。我一直在使用 Babel，它也使用 module.exports = ... 导出它。你可以做const { Animal } = require('./animal');。

【解决方案1】：

正如Shane van den Bogaard 指出的，Animal.ts 中的default 关键字需要省略并且：

const { Animal } = require('./Animal');

应该被用来代替

var Animal = require('./Animal');

这样我们就可以调用Animal类并通过使用来初始化一个对象

const { Animal } = require('./Animal');
var newAnimal = new Animal("Clifford");

【讨论】：