Как я могу использовать TypeScript, который был создан в WebStorm прямо из HTML? - PullRequest
Новая
       19

Как я могу использовать TypeScript, который был создан в WebStorm прямо из HTML?

0 голосов
/ 26 апреля 2019

Я перепробовал все ответы, но у меня есть ошибки типа

main.js: 2 Uncaught ReferenceError: экспорт не определен

при использовании компиляции вes5 в качестве цели

и

Uncaught SyntaxError: Неожиданный токен {

при использовании compile to 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>

1 Ответ

2 голосов
/ 26 апреля 2019
  1. Для работы модулей ES6 необходимо установить тип <script> на module, например: 
<!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>
  1. также, расширение .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

...