angular - TypeScript， 'import' 的正确使用方法是什么

Question

我正在玩 Angular 2.0/TypeScript(Visual Studio 2015，TS 1.6)，我试图了解“导入自”的工作原理。我在 app.ts 中定义了我的模块，输出路径设置为 ./build。

在 bootstrap.ts 中，我导入了模块

import {bootstrap} from "angular2/angular2";
import {App} from "./app";
bootstrap(App);

因为我的构建目标与源目标不同，所以我可以让它工作的唯一方法是将每个文件添加到 System.Config()

<script>
    System.config({
        packages: {
            './build/bootstrap': { defaultExtension: 'js' },
            './build/app': { defaultExtension: 'js' },
            './build/Components/Comp01/component': { defaultExtension: 'js' },
            './build/Components/Comp02/component': { defaultExtension: 'js' },
        },
    });
    System.import('./build/bootstrap');
</script>

如果我将导入语句更改为使用 from './build/app.js' 然后我会收到 TS2307 错误，'找不到模块 ./build.app.js'如果我将 import 语句更改为 './app.ts' 那么编译器会很高兴，但显然浏览器随后会尝试加载 app.ts 而不是 app.js

当输出位于不同位置时，在 TypeScript 中使用“导入”的正确方法是什么？

Answer 1

据我所知，有一种方法可以做到这一点::

你应该做这样的把戏。

假设你有一个文件夹app，这个文件夹下有两个文件app.ts和bootstrap.ts

所以你应该使你的 js 文件夹结构与 ts 文件夹结构相同，例如你的构建文件夹将有两个文件 app.js bootstrap.js

然后用下面的代码

import {App} from "./app";

不会有错误，因为加载器会找到具有上述指定路径的 app.js，导入会找到具有相同指定路径的 app.ts。

假设你在 app 文件夹中有另一个名为 component1 的文件夹，并且有一个 component1.ts 文件

然后你应该让你的 js 文件夹结构与 ts 文件夹相同，这样构建将有 component1 文件夹，component1 文件夹将有 component1.js

所以假设你必须在 component1.ts 中导入 app.ts

 import {App} from "../app";

它会找到路径相同的js和ts