从 TypeScript 调用 JavaScript 类：未捕获的 TypeError ... 不是构造函数答案

【问题标题】：Calling JavaScript class from TypeScript : Uncaught TypeError ... is not a constructor从 TypeScript 调用 JavaScript 类：未捕获的 TypeError ... 不是构造函数
【发布时间】：2020-03-09 11:14:32
【问题描述】：

我正在尝试在 Atom (link) 的 TypeScript 包中使用来自 atom-select-list 包的纯 JavaScript 类。

我为此第 3 方依赖项添加了 declaration，并将其包含在我的包中，如下所示：

/// <reference path="../types/atom-select-list.d.ts"/>
import {SelectListView} from 'atom-select-list'; // copmiled to: `const atom_select_list_1 = require("atom-select-list");`

但是，我得到了这个错误

~\atom-indent-detective\dist\selector.js:11
Hide Stack Trace
TypeError: atom_select_list_1.SelectListView is not a constructor
    at Object.selector_show (~\atom-indent-detective\dist\selector.js:11:26)
    at HTMLElement.indentDetectiveChooseIndent (../lib/indent-detective.ts:1:12)
    at CommandRegistry.handleCommandEvent (~\atom-nightly\app-1.46.0-nightly8\resources\app\static\<embedded>:11:349292)
    at CommandRegistry.dispatch (~\atom-nightly\app-1.46.0-nightly8\resources\app\static\<embedded>:11:347767)
    at HTMLSpanElement.view.onclick (~\atom-indent-detective\dist\status.js:24:34)

指向

indentListView = new SelectListView(...) //  compiled to `indentListView = new atom_select_list_1.SelectListView({...`

这是我的 tsconfig.json：

{
  "compilerOptions": {
    //// Linting Options - Uncomment options to get more features (usually more restrictive)
//        "strict": true, // includes all of the following and more
    "strictNullChecks": true,
    //    "forceConsistentCasingInFileNames": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
//    "noImplicitThis": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,

    //// Compilation options
    "declaration": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "incremental": true,
    "inlineSourceMap": true,
//    "preserveConstEnums": true,
//    "sourceMap": true,
    "preserveSymlinks": true,
    "removeComments": true,


//    "jsx": "react",
//    "jsxFactory": "etch.dom",
    "lib": [
      "ES2018",
      "dom"
    ],
    "target": "ES2018",

    "module": "commonjs",
    "moduleResolution": "node",
//    "noLib": false,
//    "importHelpers": true, // if true you should add tslib to deps
//    "skipLibCheck": false,

    "outDir": "../dist"
  },
  "compileOnSave": true
}

我 use babel 在我的 package.json 中有以下配置：

  "babel": {
    "presets": ["@babel/typescript"],
    "plugins": [
      "@babel/proposal-class-properties",
      "@babel/proposal-object-rest-spread",
      "@babel/plugin-transform-runtime"
    ],
    "ignore": ["node_modules", "src/test"]
  }

【问题讨论】：

导入错误，试试import SelectListView from 'atom-select-list';
使用import selectModule from 'atom-select-list'; 和new selectModule.SelectListView，现在我得到这个错误：TypeError: atom_select_list_1.default.SelectListView is not a constructor
使用import SelectListView from 'atom-select-list'; 和new SelectListView 我得到Error: Invalid child node: undefined。另外，我得到TS2709: Cannot use namespace 'SelectListView' as a type. 或TS2351: This expression is not constructable.

标签： javascript typescript import babeljs atom-editor

【解决方案1】：

我解决了这个问题：

import SelectListView from 'atom-select-list'

或

const SelectListView = require('atom-select-list')

【讨论】：