学一下 TypeScript吧 | 青训营笔记

42 阅读3分钟

相比于JavaScript而言,TypeScript同样也是我们在前端学习路上或者是在准备前端工作面试考试题目路上的一个重要部分,今天就跟着青训营老师好好学习一下吧,同样,本人作为前端小白,在记录笔记时可能会将某些专业术语打错,希望各位能够指出,谢谢啦!

一、前沿 TS与JS的区别

TS是JS的一个超集,是在JS的基础上做的类型检测和相关的语法补充,本质上为JS补充一些静态类型和面向对象编程的相关能力。

TS是JS的扩展、是超集,同时TS也能编译成JS运行,TS可以在编译环节就可以发现一些问题,支持静态代码检测,支持后端语言中的相关特性。

TS特点:

1、类型安全

2、下一代JS特性

3、完善的工具链

TS不仅仅是一门语言,更是生产力工具

二、TS的基础

1、TS的基础类型:

1.boolean、number、string

Number中包含整数、浮点数、负数三种类型,这样既保持了JS的灵活性,又对JS进行了扩展

2.枚举enum

枚举类型既包括数值映射,也包括反映射,即不仅从成员名到成员值,也从成员值到成员名进行了反映射,枚举还包含一些常量和异构的枚举

3.any、unknown、void

Any是较为常用的TS类型,unknown也是TS中一种对未知类型的暂命名的类型,unknown是any的替代类型,unknown只允许赋值,不允许反赋值,更加安全

  1. never

Never用来定义永远不存在值的类型,never作用更多用在防御性编程中

5.数组类型[]

可以根据基础类型增加一个数组标识,进行数组定义

6.元组类型tuple

元组是数组的一个特殊形式,需要显示的标注数组中每个元素的类型

2、TS的函数类型

定义:TS定义函数类型时要定义输入参数类型和输出类型

输入参数:参数支持可选参数和默认参数

输出参数︰输出可以自动推断,没有返回值时,默认为void类型

函数重载:名称相同但参数不同,可以通过重载支持多种类型

如果多次定义输入参数,会进行函数重载,对这些进行拼接

3、TS中的接口

定义:接口是为了定义对象类型

对象类型是指具体描述一个JS对象,是对一个键值对的描述

接口定义了一些参数来标识不同属性的值:

-可选属性:?

-只读属性:readonly

-可以描述函数类型

-可以描述自定义属性,当不确定属性的具体值时,可以使用keystring来对key赋值,进而形成自定义标识

总结:接口非常灵活duck typing

如果类型在接口内的类型结构都相同的话,两个接口就可以认为是相同类型的接口,可以完成编译中的判断

4、TS中的类

定义:写法和JS差不多,增加了一些定义

特点:

-增加了public、private、protected修饰符,来增强JS的类,

这三个属性默认是public,private是私有属性,继承类和实例均不能调用这一属性,protect仅支持在继承类中使用,实例中不可以使用

-抽象类:

-只能被继承,不能被实例化,只能作为父类

-作为基类,抽象方法必须被子类实现

-interface约束类,使用implements关键字

方便开发快速判断,当前类是否满足接口的某些定义