Question

我尝试了所有答案，但出现了类似

的错误

main.js：2未捕获的ReferenceError：未定义导出

当我使用es5作为目标编译

和

未捕获的SyntaxError：意外令牌{

当我使用compile来将es6作为目标时

main.ts

import {MyLib} from './mylib';
let myLib = new MyLib("Anonymous", "Someone");
console.warn(myLib);

mylib.ts

export class MyLib {
    constructor(public a: String, public b: String) {

    }


    toString() {
        return "library tostring: " + this.a + " " + this.b;
    }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

index.html

<html>

    <head>
        <title>
            ts-demo !!
        </title>

        <script type="module" src="./require.js"></script>
        <script type="module" src="./system.min.js"></script>

        <script src="./tsdemo/main.js"></script>
    </head>
    <body>

    </body>

</html>

Answer 1

您需要将<script>类型设置为module，以使ES6模块正常工作，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="./tsdemo/main.js"></script>
</head>
<body>
</body>
</html>

此外，导入时需要.js扩展名才能使其在浏览器中工作。 Typescript编译器没有自动添加选项（https://github.com/Microsoft/TypeScript/issues/16577），但是您可以在main.ts文件中添加扩展名，例如：

    import {MyLib} from './mylib.js';
    let myLib = new MyLib("Anonymous", "Someone");

    console.warn(myLib);

tsc做正确的事情，并从.ts文件中解析类型，并在生成的javascript中保留扩展名

我怎么能立即使用WebStorm中产生的TypeScript而不是html？

1 个答案: