TypeScript新手入门学习指南，持续更新中~，斩获offer

2、TypeScript究竟是什么？

---

• Typescript，即 Javascript that scales ；

• ts 把不看重类型的动态语言 JS 转变成关注类型的静态语言；

• 可以说ts是静态类型风格的类型系统；

• 从 es6 到 es10 甚至是 esnext 的语法支持；

• 兼容各种浏览器，各种系统，各种服务器，完全开源。

二、为什么要学习TypeScript？

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

1、程序更容易理解

---

动态语言存在函数或者方法中其输入输出的参数类型等问题，同时，动态语言还受到各种各样的约束，比如需要手动调试等等。那么有了 ts ，代码本身就可以解决上述问题了， ts 让程序更容易理解，程序理解我们，我们就可以少干很很多事情。

就像我们在与别人交谈时，假如我们逻辑很清晰的表达给对方，对方马上听懂了，并且理解了我们，我们也很省力，不用长篇大论的介绍。

2、效率更高

---

ts 可以在在不同的代码块和定义中进行跳转，并且代码有补全功能。

同时， ts 还有丰富的接口提示，可以通过使用 . 来提示所有的接口内容。

3、更少的错误

---

ts 在编程期间，就可以发现大部分的错误。这样就可以杜绝掉一些比较常见的错误，也使得后面程序运行更加通畅。

4、非常好的包容性

---

ts 可以完全地兼容 Javascript ，同时，如果要引入像 JQuery 之类的第三方库时，可以单独编写类型文件来引入这些库。

5、一点小缺点

---

相比于 js 来讲， ts 在学习之初，需要去习惯一些规范，短期内会增加一点学习成本。但短期的学习成本增加将会使得在后期的开发当中减少很多不必要的错误和麻烦，间接的也为自己的开发带来很大的益处。

闲谈到此结束，让我们一起来进入 ts 的世界吧！

三、typescript入门

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

1、如何安装TypeScript

---

npm install -g typescript

2、查看版本号

---

tsc -v

四、Typescript数据类型

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

1、原始数据类型和Any类型

---

（1）原始数据类型

//定义一个布尔值数据

let isDone: boolean = false

//定义一个数字类型

let age: number = 20

//定义字符串类型

let firstName: string = ‘monday’

let message: string = Hello, ${firstName}

//定义undefind和null类型

let u: undefined = undefined

let n: null = null

//给数字赋值undefid

let num: number = undefined

（2）Any 类型

如果我们有时候不能确定一个数据是什么类型的话，那么我们可以用any类型来定义。比如：

//定义一个any类型数据

let notSure: any = 4

notSure = ‘maybe a string’

notSure = true

notSure.myName

notSure.getName()

2、数组和元组

---

（1）数组

//声明一个数字类型的数组

//注意：后面的数组只能传递数字，传递其他类型的数据都会报错

let arrOfNumbers: number[] = [1, 2, 3];

arrOfNumbers.push(3)

function test(){

//arguments 为类数组

console.log(arguments)

}

（2）元组

//确定一个元组里面的内容和数量，下面表示确定user这个元组必须且只能接收两个参数

//同时第一个属性必须是String类型，第二个属性是Number类型

let user: [String, Number] = [‘abc’, 13]

3、interface 接口

---

interface的定义：

• 对 对象Object 的形状 (shape) 进行描述；

• Duck Typing（鸭子类型）。

我们来看一段代码：

interface Person{

// readonly表示只读状态

readonly id: number,

name: String,

//加一个问号表示该参数可选可不选

age?: number

}

let monday: Person = {

id: 1,

name: ‘monday’,

age: 18

}

monday.id = 12323; //因为加了readonly，所以此时访问不了，会报错

4、function函数

---

function函数是什么：

• 在 JS 中，函数是一等公民。

• 函数和其他类型的对象都一样，可以作为参数，可以存入数组，也可以被另外一个函数返回，可以被赋值给另外一个变量。

• 函数主要由两个部分组成：输入（传参）和输出（返回结果）。

我们来看个例子：

function add(x: number, y: number, z?: number): number{

if(typeof z === ‘number’){

return x + y + z;

}else{

return x + y;

}

}

let result = add(1, 2, 3);

console.log(result); //6

通过以上函数，我们实现了两个树或者三个树的相加操作。此时，需要我们注意的是，可选参数后面不能再添加不确定参数，否则程序就会发生混乱。比如：

function add(x: number, y: number, z?: number, t: number): number{

if(typeof z === ‘number’){

return x + y + z;

}else{

return x + y;

}

}

以上代码中的 t 是肯定不被允许添加的，因为前面已经有了可选参数 z ，而后面又突然健冒出来个 t ，想想都不太合理。

---

到这里，假设我们有一个新的变量名，名字叫 add2 。这个时候我们想要给它一个像 add 函数一样的类型。那么该怎么处理呢？

let add2: (x:number, y:number, z?: number) => number = add

注意上面这个箭头 => 不是 ES6 中的箭头函数，而是 ts 中声明函数类型返回值的方法。

上面这个语句中就说明了， add2 返回的值是一个 number 类型数值，并且让它等于 add 函数。同时，要记得的是，在 ts 当中，凡是在 : 后面都是声明在声明类型。

---

上面这样写好像有点冗余，我们来用 interface 来实现同样的效果。

在第3点的 interface 中我们了解到， interface 是对对象的形状进行描述，但值得注意的是， interface 也可以是对函数的形状进行描述。我们用代码来实现一下。

interface ISum {

(x: number, y: number, z?: number) : number

}

let add2: ISum = add

通过以上代码，我们看到，用 interface 来封装一个函数的返回值来行，看起来优雅了不少。这里先体会一下， interface 的强大之处，在后面还会继续讲解。

5、类型推论、联合类型和类型断言

---

（1）类型推论

有时候我们还没有给一个数据定义类型，就直接给它赋值了。这个时候我们要怎么来判断呢。这个数据的类型呢？

比如：

let str = 123

当出现这样的情况时，编译器会直接给 str 赋上 number 类型。那么此时如果我们想这么干：

let str = 123

str = ‘asd’ //会报错

结果当然时不行的。当第一次赋值的时候，编译器就已经给 str 一个 number 类型，认定 str 就是 number 类型。而后我们还想要给 str 赋值上一个 string 类型的数据，肯定是会报错的。

（2）联合类型

有时候我们对一个数据的类型不够确定，比如说不知道某一个数据它是 number 类型还是 string 类型。这个时候我们就可以用联合类型来进行一波操作。

let numberOrString: number | string

通过这种方式，我们对我们所定义的属性 numberOrString 进行联合类型操作。

一般情况下，联合类型会结合类型断言来进行使用。接下来我们来讲类型断言。

（3）类型断言

1） 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型中共有的属性或方法，而有时候呢，我们确实需要在还不确定类型的时候就访问其中一个类型特有的属性或方法。因此我们采用类型断言的方式将其指定为一个类型。（这么做只是先欺骗了 ts ，让其信任我们所指定的类型）

let str = 123

function getLength(input: string | number) : number{

// 用as对input进行类型断言,先给input指定一个类型，后面判断不是再进行转换

//注意:类型断言只做类型选择,而不做类型转换

const str = input as string

console.log(typeof str)

if(str.length){

return str.length

}else{

const number = input as number

return number.toString().length

}

}

2） 看到这里，已经开始感觉到类型断言的神奇之处。但用上面这种方法感觉好像还有一点点冗余，于是我们引入一个 type guard ，即类型守护。我们来看下实现方式。

let str = 123

function getLength2(input: string | number): number{

if(typeof input === ‘string’){

return input.length

}else{

return input.toString().length

}

}

五、Typescript中的类：class

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

在 js 中我们用了构造函数和原型链的方式来实现继承，同时在 ES6 中出现了 class 类继承的方法。那在 typescript 中呢，继承的方法又更加丰富了。让我们一起来一探究竟吧！

1、类的定义

---

我们先来看下类的定义。

（1）类（Class）

类定义了一切事物的抽象特点，包含它的属性和方法。比如：

class Animal{

// 构造函数是实例化执行时候的逻辑

constructor(name){

this.name = name

}

run(){

return ${this.name} is running

}

}

阅读以上代码我们可以知道，通过 class 可以定义一个类。

（2）对象（Object）

对象 Object ，就是类的实例。举个例子： 🙆‍♂️

我们可以把类 class 比喻成一张蓝图，比如说汽车是一个 class ，那么它就像是一张造汽车的图纸。第二个是 Object ， Object 通过 new 生成，那么前面有了汽车的蓝图，我们现在就可以创造实实在在的汽车了。我们可以说一辆特斯拉是汽车的实例，也可以说宝马是汽车的另外一个实例。

同样我们用上面的例子来做衍生。具体如下：

class Animal{

// 构造函数是实例化执行时候的逻辑

constructor(name){

this.name = name

}

run(){

return ${this.name} is running

}

}

const snake = new Animal(‘lily’)

console.log(snake.run())

阅读以上代码我们可以知道，我们定义了一个 snake ，这个 snake 继承了 Animal 类，因此它就可以用 Animal 类的属性和方法。

此时打印结果如下：

（3）面向对象（OOP）的三大特性

面向对象的三大特性分别为：封装、继承、多态 。

• 封装： 指将数据的操作细节隐藏起来，只暴露对外的接口。那这样子的话，对于外界的调用端来说，他们不需要也不可能知道细节，只能通过对外的接口来访问该对象。

• 继承： 子类可以继承父类，子类除了拥有父类的所有特征外，还会拥有一些更具体的特性。

• 多态： 由继承产生的相关不同的类，对同一个方法可以有不同的响应。比如，猫和狗，他们都可以继承 Animal 类，但是他们分别实现 run() 方法，此时呢，针对某一个实例，我们无需了解它是猫还是狗，这个时候可以直接调用 run() ，程序会自动判断出来，应该如何去执行这个方法。

同样，我们用上面的代码做衍生，来看继承和多态是怎么样的。

---

继承：

class Animal{

// 构造函数是实例化执行时候的逻辑

constructor(name){

this.name = name

}

run(){

return ${this.name} is running

}

}

const snake = new Animal(‘lily’)

// console.log(snake.run())

class Dog extends Animal{

bark(){

return ${this.name} is barking

}

}

const xiaoqi = new Dog(‘xiaoqi’)

console.log(xiaoqi.run())

console.log(xiaoqi.bark())

此时打印结果如下：

从上面可以看到， Dog 继承了 Animal 类，此时 Dog 就拥有了 Animal 类的属性和方法。而 xiaoqi 实例化了 Dog ，因此它也拥有 Dog 的属性和方法。

---

多态：

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V：vip1024c 备注前端获取（资料价值较高，非无偿）

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

img-t4Pop18I-1711585175700)]
[外链图片转存中…(img-kJ7EygbL-1711585175700)]
[外链图片转存中…(img-8mMGTb4R-1711585175701)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-VEYWf4Rd-1711585175701)]
[外链图片转存中…(img-M1MhLeXK-1711585175701)]

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V：vip1024c 备注前端获取（资料价值较高，非无偿）
[外链图片转存中…(img-DHjf7SJp-1711585175702)]

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总