2024年最新《TypeScript》入门与精通-，2024前端开发社招面试总结

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

$:()=>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;

}

declare const $: jQueryIntance;

定义全局对象

---

上面两种其实都是在介绍定义函数，那么对象怎么定义，还是拿jQuey举例，我们都知道，我们在使用$的时候，其实在jQuery内部会执行new $.fn.init这个方法，那么针对这个该怎么定义

// 待定义

new $.fn.init;

// 为了保证不冲突，可以使用namespace来框住

declare namespace $ {

namespace fn {

class init {}

}

}

​

再举一个实际项目中的例子，比如，我们写了一个类似于loadsh的工具函数util，我们挂载将其挂载到了window对象上，使用的时候会用以下的方式

util.add()

// 或者

window.util.add()

这个时候typescript就会报错，它会报window上不存在util这个东西，因此，我们需要在描述文件中对其做类型定义，我们可以这么写

declare interface Window {

util: {

add: () => void;

};

}

定义了一个Window（注意，Window是首字母大写的），它上面存在一个util的对象，这个对象上有一个add方法，这个方法没有参数，并且没有返回值；

​

​

模块化文件声明

---

实际上到了现代前端开发，尤其是Vue和React兴起之后，大型项目几乎都是模块化开发了，使用的语法也都是ES6的module语法，还是拿jquery举例

// 在现代框架中使用jquery

import $ from “jquery”

我想现在更多的是这种写法，如果是这种写法，然后也没有types的安装，那么在.d.ts中该如何描述，定义类型；

​

直接看个例子吧，代码还是上面的代码，整合一下

// 代码

import $ from “jquery”

$(“body”).append(“

oliver

”)

new $.fn.init()

对应的，在.d.ts中就应该这么写：

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）