导入模块打字稿错误

Question

当我在app.ts脚本中导入模块时，已编译的js文件的导入行中缺少'.js'文件扩展名。

app.ts import {ModuleA} from './ModuleA'

编译的app.js import {ModuleA} from './ModuleA';

我将其包含在html文件中，例如<script type="module" src="app.js"></script>

但是浏览器找不到模块“ ModuleA”。

仅当我import {ModuleA} from './ModuleA.js'

但是我想通过导入“ .ts”模块文件而不是“ .js”模块文件来工作。

我本来希望ts编译将'.js'扩展名添加到导入行。

有什么建议么？

Answer 1

看来这是打字稿中的错误。 https://github.com/Microsoft/TypeScript/issues/13422 。

作品中没有解决方案。 目前，您的方法是正确的。

import {ModuleA} from './ModuleA.js'

Answer 2

您还可以使用webpack构建单个js文件。 然后，您无需添加扩展名。

请参阅为打字稿设置webpack的指南

Answer 3

如果您没有在命令行上为tsc指定编译器选项，并且没有tsconfig.json文件，则打字稿会使用默认值。 根据打字稿文档的默认值es3用于发射的语言，并commonjs用于模块加载器。 我发现这些选项不可接受，因此我在tsconfig.json文件中指定了不同的选项。 尝试按以下步骤设置项目，我想您会对结果感到满意。 这似乎是一项艰巨的工作，但是您可以在完成后将项目导出到模板中，而无需再做一次。 假设您在计算机上设置了npm 。

在VS 2017中创建一个新项目，选择ASP.NET Web应用程序（.NET Framework）作为模板。 我知道这听起来可能不对，但是请您忍受，因为您最终将获得一个最小的项目，其中不包含您不想要的很多内容。 在向导的下一页上，选择“清空”，然后取消选中每个框，并使其不进行身份验证。 完成向导。

在项目的根级别添加以下文件。

的package.json：

{
  "version": "1.0.0",
  "name": "asp.net",
  "author": "you",
  "private": true,
  "dependencies": {
    "core-js": "^2.5.3",
    "systemjs": "^0.21.0"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true
  },
  "files": [
    "app/app.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

system.config.js：

(function (global) {
  SystemJS.config({
    paths: {
      'npm:': '/node_modules/'
    },
    map: {
      app: '/app'
    },
    packages: {
      app: {
        main: 'app.js',
        defaultExtension: 'js'
      }
    }
  })
})(this);

index.html的：

<!DOCTYPE html>
<html>
<head>
  <base href="/" />
  <meta charset="utf-8" />
  <title>Typescript with SystemJS and Modules Demo</title>
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system.js"></script>
  <script src="system.config.js"></script>
  <script>
    SystemJS.import("app/app.js").catch(function (e) { console.log(e); });
  </script>
</head>
<body>
  <div id="personDiv"></div>
</body>
</html>

另外，创建一个app文件夹，并将以下两个文件放入其中：

应用程式：

import { Person } from "./person";

export class App {
  constructor() {
    let person: Person = new Person();
    let div: HTMLDivElement = <HTMLDivElement>document.getElementById('personDiv');
    div.innerHTML = person.getName();
  }
}

// Use this assignment to start execution.
let a: App = new App();

// The following doesn't appear to work with SystemJS. It does with plain TypeScript.
// It is probably because SystemJS already defines a listener for window.onload,
// although I haven't verified that.
//window.onload = () => {
//  let a: App = new App();
//  let person = new Person();
//  alert(person.getName);
//}

person.ts：

export class Person {
  fullName: string;

  constructor() {
    this.fullName = "Test Guy";
  }

  getName():string {
    return this.fullName;
  }
}

然后构建并运行该应用程序。 结果应显示导入工作正常。

导入模块打字稿错误

问题描述

3 个解决方案

解决方案1
1 已采纳 2018-03-17 05:42:43

解决方案2
1 2018-03-17 23:20:54

解决方案3
1 2018-03-18 23:20:28

导入模块打字稿错误

问题描述

3 个解决方案

解决方案1 1 已采纳 2018-03-17 05:42:43

解决方案2 1 2018-03-17 23:20:54

解决方案3 1 2018-03-18 23:20:28

解决方案1
1 已采纳 2018-03-17 05:42:43

解决方案2
1 2018-03-17 23:20:54

解决方案3
1 2018-03-18 23:20:28