码云 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 语法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 22. TypeScript 中如何使用 import 语法
