码云 22. TypeScript 中如何使用 import 语法
上节我们学习了命名空间的知识，有些小伙伴就有疑问了，说我看别人写的代码，都是用import进行引入的，你这个显得有点不专业哦。那这节我们就把上节的代码改成import引入。
修改 components.ts 文件
现在去掉components.ts里的namespace命名空间代码，写成 ES6 的 export 导出模式。代码如下：
export class Header {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Header";
document.body.appendChild(elem);
}
}
export class Content {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Content";
document.body.appendChild(elem);
}
}
export class Footer {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Footer";
document.body.appendChild(elem);
}
}
现在三个类就都已经用export导出了，也就是说可以实现用import进行引入了。
修改 page.ts 文件
来到page.ts文件，去掉namespace命名空间对应的代码，然后使用 import 语法进行导入Header、Content和Footer，代码如下：
import { Header, Content, Footer } from "./components";
export class Page {
constructor() {
new Header();
new Content();
new Footer();
}
}
现在看起来确实和工作中写的代码非常类似了，这时候可以使用tsc进行编译，然后可以看到编译好的代码都是define开头的(这是 amd 规范的代码，不能直接在浏览器中运行，可以在 Node 中直接运行)，这种代码在浏览器中是没办法被直接运行的，需要其他库(require.js)的支持。
引入 require.js
我这里使用了一个现成的 CDN 的require.js，地址你可以直接复制，然后用<script>标签进行引入。
Require.js 的 CDN 地址： https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js
复制好 URL 地址后，记得使用<script>标签进行引入，代码如下。
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
这时候就可以解析define这样的语法了。然后把page.ts中加入default关键字，如果不加是没办法直接引用到的。
import { Header, Content, Footer } from "./components";
export default class Page {
constructor() {
new Header();
new Content();
new Footer();
}
}
这时候再用tsc进行编译一下，你会发现还是有问题。因为使用export default这种形式的语法，需要在html里用require来进行引入。
require 方式引入
因为你已经加入了require.js这个库，所以现在可以直接在代码中使用require了。具体代码如下：
<body>
<script>
require(["page"], function (page) {
new page.default();
});
</script>
</body>
写完这步，刷新页面，可以看到正常显示出来了，虽然用起来比较麻烦，但是我们还是实现了用import来进行引入，当我们有了webpack和Parcel的时候就不会这么麻烦，这些都交给打包工具来处理就好了。
微信
支付宝码云笔记 » 22. TypeScript 中如何使用 import 语法
