Перевести проект JS в TypeScript

Question

У меня есть проект (веб-интерфейс), организованный так:

    Directory: L:\root-of-project


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       16/01/2019     11:25                .git
d-----       16/01/2019     11:38                node_modules
d-----       16/01/2019     11:25                src
-a----       16/01/2019     11:07            403 package.json
-a----       20/12/2018     17:13           2541 README.md
-a----       ...[OTHER FILES]...


    Directory: L:\root-of-project\src


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       16/01/2019     11:10                main
d-----       16/01/2019     09:32                static
-a----       16/01/2019     11:25          23274 index.html


    Directory: L:\root-of-project\src\main


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       16/01/2019     11:10                a-folder-with-js-files
d-----       16/01/2019     11:10                another-folder-with-js-files
d-----       ...[OTHER DIRECTORIES]...
d-----       16/01/2019     11:25                vue-components-folder
-a----       16/01/2019     11:08           5673 file1.js
-a----       15/01/2019     16:24           2830 file2.ts
-a----       ...[OTHER FILES]...


    Directory: L:\root-of-project\src\main\vue-components-folder


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       16/01/2019     11:10                a-vue-component-folder
d-----       16/01/2019     11:10                another-vue-component-folder
d-----       ...[OTHER DIRCTORIES]...


    Directory: L:\root-of-project\src\main\vue-components-folder\a-vue-component-folder


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----       15/01/2019     21:16            389 a-vue-component.interface.ts
-a----       15/01/2019     16:14           4892 a-vue-component.js
-a----       15/01/2019     13:36            576 style.css

И я пытаюсь перевести его файлы из JavaScript в Typescript, но у меня возникают некоторые трудности с использованием Typescript с Vue.js и некоторые другие трудности с модулями: когда я переводю модуль машинописного текста, он не читается браузером потому что он жалуется, что все модули должны быть помещены в тот же каталог, что и index.html (ошибка, которую я получаю, похожа на эту import statement may only appear at the top level).

(Некоторые файлы в списке выше уже являются .ts, потому что они не включают зависимости от других файлов)

Какой подход следует использовать, чтобы продолжить использование нескольких файлов, разделенных на несколько папок с помощью TypeScript? (Для получения дополнительной информации, проект размещен здесь . Я использую VS Code для разработки)

Answer 1

при переводе модуля машинописного текста он не читается браузером, потому что он жалуется, что все модули должны быть помещены в тот же каталог, что и index.html

Вы не должны публиковать модули в браузере. Вместо этого вы должны использовать что-то вроде веб-пакета (https://webpack.js.org/), чтобы связать их для браузера.

Поскольку у вас полнофункциональное приложение, вам нужно будет скомпилировать TS дважды: * Один раз для node.js, используя tsc * Один раз для браузера с помощью веб-пакета

Дополнительные ресурсы

• У меня также есть бесплатное видео на эту тему .