导入模块打字稿错误
[英]import module typescript error
问题描述
When I import a module in a app.ts script, the '.js' file extension is missing in the import line of the compiled js file. 
当我在app.ts脚本中导入模块时，已编译的js文件的导入行中缺少'.js'文件扩展名。
app.ts import {ModuleA} from './ModuleA' app.ts import {ModuleA} from './ModuleA'
compiled app.js import {ModuleA} from './ModuleA'; 编译的app.js import {ModuleA} from './ModuleA';
I include it in the html file like this <script type="module" src="app.js"></script> 我将其包含在html文件中，例如<script type="module" src="app.js"></script>
But the browser can't find the module 'ModuleA'. 但是浏览器找不到模块“ ModuleA”。
It only work when I import like this import {ModuleA} from './ModuleA.js' 仅当我import {ModuleA} from './ModuleA.js'
But I want to work by importing '.ts' module files, not '.js' module files. 但是我想通过导入“ .ts”模块文件而不是“ .js”模块文件来工作。
I would have hoped the ts compilation add the '.js' extension to the import line. 我本来希望ts编译将'.js'扩展名添加到导入行。
Any suggestions? 有什么建议么？
3 个解决方案
解决方案1
1 已采纳 2018-03-17 05:42:43
Seems this is a bug in typescript. 看来这是打字稿中的错误。 https://github.com/Microsoft/TypeScript/issues/13422 . https://github.com/Microsoft/TypeScript/issues/13422 。
There's no resolution in the works. 作品中没有解决方案。 For the moment, your approach is correct. 目前，您的方法是正确的。
import {ModuleA} from './ModuleA.js'
解决方案2
1 2018-03-17 23:20:54
you could also use webpack to build a single js file. 您还可以使用webpack构建单个js文件。 Then you do not need to add the extension. 然后，您无需添加扩展名。
see guide for setting up webpack for typescript 请参阅为打字稿设置webpack的指南
解决方案3
1 2018-03-18 23:20:28
When you don't specify compiler options on the command line for tsc and you don't have a tsconfig.json file, typescript uses defaults. 如果您没有在命令行上为tsc指定编译器选项，并且没有tsconfig.json文件，则打字稿会使用默认值。 According to the typescript documentation the defaults are es3 for the language emitted, and commonjs for the module loader. 根据打字稿文档的默认值es3用于发射的语言，并commonjs用于模块加载器。 I don't find these options acceptable, so I specify different options in a tsconfig.json file. 我发现这些选项不可接受，因此我在tsconfig.json文件中指定了不同的选项。 Try setting up a project as follows and I think you'll be happy with the results. 尝试按以下步骤设置项目，我想您会对结果感到满意。 It may seem like a lot of work, but you can export the project to a template when your done, and you won't ever have to do it again. 这似乎是一项艰巨的工作，但是您可以在完成后将项目导出到模板中，而无需再做一次。 This assumes you have npm set up on your machine. 假设您在计算机上设置了npm 。
Create a new project in VS 2017, choosing ASP.NET Web Application(.NET Framework) as the template. 在VS 2017中创建一个新项目，选择ASP.NET Web应用程序（.NET Framework）作为模板。 I know this may not sound right, but bear with me, as you will end up with a minimal project that doesn't include much that you don't want. 我知道这听起来可能不对，但是请您忍受，因为您最终将获得一个最小的项目，其中不包含您不想要的很多内容。 On the next page of the wizard, choose Empty and un-check every box and leave it with no authentication. 在向导的下一页上，选择“清空”，然后取消选中每个框，并使其不进行身份验证。 Finish the wizard. 完成向导。
Add the following files at the root level of the project. 在项目的根级别添加以下文件。
package.json: 的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: tsconfig.json：
{
"compilerOptions": {
"module": "system",
"target": "es5",
"noImplicitAny": true,
"noEmitOnError": true,
"sourceMap": true
},
"files": [
"app/app.ts"
],
"exclude": [
"node_modules"
]
}
system.config.js: system.config.js：
(function (global) {
SystemJS.config({
paths: {
'npm:': '/node_modules/'
},
map: {
app: '/app'
},
packages: {
app: {
main: 'app.js',
defaultExtension: 'js'
}
}
})
})(this);
index.html: 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>
Also, create an app folder and put the following 2 files in it: 另外，创建一个app文件夹，并将以下两个文件放入其中：
app.ts: 应用程式：
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: person.ts：
export class Person {
fullName: string;
constructor() {
this.fullName = "Test Guy";
}
getName():string {
return this.fullName;
}
}
Then build and run the app. 然后构建并运行该应用程序。 The results should show you that importing is working correctly. 结果应显示导入工作正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.