Question

我在TS中有以下代码可以在Express中创建ConnectRoles中间件的实例：

让用户=新的ConnectRoles（config）;

这是中间件希望能够初始化的内容，它是对构造函数的简单调用，但是在编译后，生成的javascript代码如下所示：

让用户=新的connect_roles_1.default（config）;

我正在使用以下方法在TS中导入此类：

从“ connect-roles”导入ConnectRoles；

翻译为：

const connect_roles_1 = require（“ connect-roles”）;

在JS中，我实例化/导入类的方式可能是这里的问题吗？我可以手动删除导致JS代码错误的“默认”方法，但这违背了使用编译器的目的，特别是在这种情况开始频繁发生时。

还有一件事，这是我的tsconfig.json：

{
  "compilerOptions": {
      "baseUrl": ".",
      "paths": { "*": ["types/*"] },
      "target": "es2015",
      "module": "commonjs",
      "moduleResolution": "node",
      "isolatedModules": false,
      "jsx": "react",
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "declaration": false,
      "noImplicitAny": false,
      "noImplicitUseStrict": false,
      "removeComments": true,
      "noLib": false,
      "preserveConstEnums": true,
      "suppressImplicitAnyIndexErrors": true,
      "outDir": "app",
      "sourceMap": true,
      "watch": true
  },
  "exclude": [
      "node_modules",
      "typings/browser",
      "typings/browser.d.ts",
  ],
  "compileOnSave": true,
  "buildOnSave": true,
  "atom": {
      "rewriteTsconfig": false
  }
}

任何想法都会非常感谢，谢谢！

Answer 1

您应该将打字稿文件视为可导出对象的模块。

import {x, y, z} from "module"是访问这些导出的方式。

使用import x from "module"时，实际上只是从模块中导入default。

import x from "module"只是import {default as x} from "module"的别名

module本身不是一个出口。这就是为什么您仍然可以导入其他出口的原因：

import default, {x, y, z} from "module"

module.ts

export const x = /*...*/;
export const y = /*...*/;
export const z = /*...*/;
export const default = /*...*/;

过去，您可以像这样导出一个默认值：

module.exports = /*...*/;

但是，现在您应该严格按照以下格式考虑出口：

{
   exportName: /*...*/,
   default: /*...*/
}

许多模块仍使用旧约定导出默认值：module.exports = /*...*/;

在这种情况下，您可以使用import * as x from "module";

导入它们

Answer 2

如Tobiq所说，import ConnectRoles from "connect-roles"试图导入默认导出。但是，您尝试导入的模块不使用默认导出；而是使用module.exports = ConnectRoles。

以下是三种不同的导入样式及其产生的编译结果：

import ConnectRolesImport from 'connect-roles';
const connectRolesImport = new ConnectRolesImport(); // error!

import * as ConnectRolesImportAll from 'connect-roles';
const connectRolesImportAll = new ConnectRolesImportAll();

import ConnectRolesRequire = require('connect-roles');
const connectRolesRequire = new ConnectRolesRequire();

编译结果：

var connect_roles_1 = require("connect-roles");
var connectRolesImport = new connect_roles_1["default"]();

var ConnectRolesImportAll = require("connect-roles");
var connectRolesImportAll = new ConnectRolesImportAll();

var ConnectRolesRequire = require("connect-roles");
var connectRolesRequire = new ConnectRolesRequire();

这里是TypeScript team members之一，讨论import xxx as...和import xxx = require...语法之间的区别。那和这个答案的评论将帮助您选择使用哪个。

为什么Typescript在编译的代码中向类构造函数添加.default（）？

2 个答案: