Web前端最全《TypeScript》入门与精通-(2)，2024年最新2024-2024阿里巴巴Web前端面试真题解析

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

初始化

=============================================================

为了更好更直观的学习，先初始化一个项目，我们的目的是为了将jQuery和typescript混在一起

简单的话，初始化命令如下

// 初始化npm

npm init

// 初始化typescript

tsc --init

之后新建一个html文件并且在同目录下新建一个.ts文件，在html中引入jQuery的cdn，比如：

或者使用Vue的脚手架新创建一个Vue3+typescript的项目，在其public下的index.html引入上方的jquery的cdn

描述文件

==============================================================

我们将以.d.ts为结尾的文件称作为描述文件，至于前面的文字是什么无所谓，不管是a.d.ts还是jQuery.d.ts都可以，它的作用就是为js文件描述类型；

​

这个涉及到第一个知识点，关键字：declare，它代表是一个声明，声明后面为定义类型的代码的类型，下面看具体分析

​

定义全局变量

---

比如，我们现在在.ts文件中编写jquery代码

;$(function() {})();

这个一个jquery时代常见的立即执行函数的方法，如果我们直接在.ts中写，它会报错，它会提示你必须去@types中安装jq的类型，错误如下：

Cannot find name ‘$’. Do you need to install type definitions for jQuery? Try npm i @types/jquery and then add jquery to the types field in your tsconfig

​

实际上我们在types中没有jquery的类型，因此，为了使它能在.ts中正常运行，我们需要在.d.ts这个描述文件中为其做声明：

declare const $: (param: () => void) => void;

分析一下这个声明，做一个拆分，外层如下

$() // 这是一个jquery函数

对应的声明

$:()=>void

仔细看看，这个应该能理解，声明 这 是 一 个 函 数 ， 并 且 它 没 有 返 回 值 ， 之 后 再 看 参 数 ， 这是一个函数，并且它没有返回值，之后再看参数， 这是一个函数，并且它没有返回值，之后再看参数，()里面嵌套了一个function() {}，对应的声明里也要嵌套一个函数类型，很明显，function() {}是$()的参数，这个参数是一个函数，并且它也没有返回值，

// 因此在外层的声明里，添加一个参数，并为其设置函数类型且没有返回值

param: () => void

定义全局函数

---

就拿上面的例子

;$(function() {})();

这明显也是一个函数，我们也可以使用函数的方式做声明

declare function $(params: () => void): void;

经过上面的分析，这个应该能明白点了吧，声明了一个函数$，它没有返回值，因此是void，但它有一个参数，参数是一个函数，并且也没有返回值；

​

到这里，可能有熟悉jQuery的小伙伴会问，jQuery还有别的用法，比如，它可以选择某个节点，为其添加内容，代码如下

$(function() {

$(“body”).append(“

oliver

”)

});

如果是这种写法，还是会报错的，没错，这种写法还是会继续报错，原因是这种写法我们没有在.d.ts中定义，因此，为这种用法，我们要写一个类型描述

// 类型

declare function $(

params: string

): {

append: (params: string) => {};

};

这次$()的函数是一个字符串，然后它的返回值虽然不知道具体是什么，但是既然能用.append这种方式，那么至少代表它是一个对象，在js中只有对象才有.这个操作符，之后立马有一个append的方法，它有一个参数，是一个字符串；

​

到这里可以差不多能简单理解了吧，再来一个练习

$(function() {

$(“.tc-demo-container”).css(“background-color”, “yellow”);

});

这个如何编写它的类型文件，解答如下

interface jQueryIntance {

css: (paramA: string, paramB: string) => jQueryIntance;

}

declare function $(params: string): jQueryIntance;

这次，我们把类型单独抽离出来定义成了一个接口，并且接口上有一个名为css的属性，它的值是一个函数，它有两个参数，参数的类型都是字符串，并且实际上这个函数是有返回值的，我们知道它的返回值是一个jquery对象；

​

Interface改写

看到上面那个练习，是不是发现了另外一种写法，描述文件是可以使用接口来定义的，

// interface改写

interface jQueryIntance {

css: (paramA: string, paramB: string) => jQueryIntance;

append: (paramA: string) => jQueryIntance;

}

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。