如何立即使用 html 在 WebStorm 中生成的 TypeScript？

Question

我已经尝试了所有的答案，但我遇到了很多错误，比如

main.js:2 Uncaught ReferenceError: exports is not defined

当我使用编译为 es5 作为目标时

和

Uncaught SyntaxError: Unexpected token {

当我使用编译为 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

中的扩展名

如何立即使用 html 在 WebStorm 中生成的 TypeScript？

How can I use TypeScript that was produced in WebStorm right away from html?

javascript

requirejs

phpstorm

webstorm

typescript