牧涯前端学习笔记

Appearance

其它 ​

TypeScript 使用 impot 模块化语法 ​

page.ts 文件

typescript
import { Header, Content, Footer } from "./components";
export class Page {
	constructor() {
		new Header();
		new Content();
		new Footer();
	}
}

上面例子编译出来的会变成 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>标签进行引入，代码如下。

js
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

这时候就可以解析define这样的语法了。然后把page.ts中加入default关键字，如果不加是没办法直接引用到的。

js
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了。具体代码如下：

html
<body>
	<script>
		require(["page"], function (page) {
			new page.default();
		});
	</script>
</body>

写完这部，刷新页面，可以看到正常显示出来了，虽然用起来比较麻烦，但是我们还是实现了用import来进行引入，当我们又了webpack和Parcel的时候就不会这么麻烦，这些都交给打包工具来处理就好了。

用 Parcel 打包 TypeScript 代码 ​

最通用的有两种解决方案Webpack和Parcel。webpack不用多说，只要是前端基本都会，这几年Parcel也开始崛起，用的人也越来越多。所以这节课就讲一下，如何使用Parcel来打包TypeScript代码。

建立一个新项目

这里给出新建项目的步骤，如果你已经熟悉此过程，可以跳过。

  1. 教学需要，这里我们重新建立一个项目TSTest,在桌面新建立一个文件夹，然后在VSCode中打开。
  2. 打开终端，输入npm init -y,创建package.json文件
  3. 在终端中输入tsc --init,创建tsconfig.json文件
  4. 修改tsconfig.json配置rootDir和outDir.
  5. 新建src文件夹，在里边建立index.html,page.ts文件
  6. 编写index.html文件，并引入page.ts文件
  7. 编写page.ts文件。

index.html 文件代码：

js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./page.ts"></script>
    <title>Document</title>
  </head>
  <body></body>
</html>

page.ts 文件代码：

js
const teacher: string = "jspang";
console.log(teacher);

这时候我们并不能正常的预览出效果，我们需要Parcel的帮忙。

Parcel 的安装和使用

Parcel 可以通过npm或者yarn来进行安装，我这里npm安装很慢，会 5 分钟左右，所以我使用yarn来进行安装。代码如下。

js
yarn add --dev parcel@next

使用 yarn 安装大概需要 1 分钟左右，这些主要看你自身的网络情况。

安装好以后，打开package.json文件，可以看到这样一段代码，我安装的版本是^2.0.0-beta.1,如果你学习时和这个版本不一样，操作可能会稍有不同。

修改package.json里边的代码。

js
{

  "scripts": {
    "test": "parcel ./src/index.html"
  },
}

这个意思就是使用parcel对index.html进行一个编译。

然后打开终端输入yarn test,这时候终端会给出一个地址http://localhost:1234,把地址放到浏览器上，可以看到浏览器的控制台会输出jspang。

这说明Parcel会自动对index.html中引入的TypeScript文件进行编译，然后打包好后，就可以直接使用了。

使用Parcel大大简化了我们的配置过程，如果你想详细学习Parcel可以自行学习，毕竟我们这个是 TypeScript 的教程，所以更多的 Parcel 知识就不作介绍了。

在 TypeScript 中使用其他 JS 库，以 Jquery 库为例 ​

引入 JQuery 框架库

在src目录下，引入JQuery文件，这里采用CDN的形式进行引入。

BootCDN 地址： https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js

直接在index.html加入<script>标签，代码如下：

js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

有了 jquery 框架，就可以在TypeScript文件中进行使用JQuery的语法了。

然后在page.ts文件中编写如下代码。

js
const teacher: string = "jspang";
console.log(teacher);

$(function () {
	alert("jspang");
});

写完后到终端中输入yarn test进行编译和启动服务。然后在地址栏输入了http://localhost:1234,可以看到程序可以正常输出，也没有任何的报错。

安装 types/jquery(解决方法) ​

第一种：就是安装别人写好的文件 ​

但是在vscode中是会报错的，这时候就需要我们安装类型文件type file，直接可以用 npm 进行安装。

ts -> .d.ts 翻译文件 @types/xxx(库的名字) -> js

bash
npm i @types/jquery

第二种：简单粗暴 ​

还有一种简单粗暴的方法的方式就是直接在page.ts文件的头部加入这句代码：

typescript
declare var $: any;

第三种：自己写一个.d.ts声明文件的类库 ​

如果你用的类库很少见，就需要自己写了。这个写起来还是很麻烦的。在工作中从来没自己写过，所以也不推荐给大家。比如 JQuery 就有几十个接口，如果你要写，这个文件会写很长，所以原则就是有别人写好的就直接用，实在没有就用粗暴的方法，如果实在不行，再考虑写.d.ts声明文件。

jquery.d.ts

typescript
// Es6 模块化
declare module "jquery" {
	interface JqueryInstance {
		html: (html: string) => JqueryInstance;
	}
	// 混合类型
	function $(readyFunc: () => void): void;
	function $(selector: string): JqueryInstance;
	namespace $ {
		namespace fn {
			class init {}
		}
	}
	export = $;
}

page.ts 引入

typescript
import $ from "jquery";

$(function () {
	$("body").html("<div>123</div>");
	new $.fn.init();
});

Released under the MIT License.

Copyright © 2022-2023 MuYa