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 语法进行导入HeaderContentFooter,代码如下:

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来进行引入,当我们有了webpackParcel的时候就不会这么麻烦,这些都交给打包工具来处理就好了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 22. TypeScript 中如何使用 import 语法

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们