使用TypeScript的目的

1.Define a strict type
2.Force to use the same type throughout coding


显式提供类型

1.指定常规类型

用let const等声明变量之后,在变量后用冒号显式指定变量类型 。这样你之后为这个变量赋值或做一些操作时必须遵守你指定的变量类型来操作,否则会报错;
image.png

2.指定联合类型

在变量后用冒号声明的时候,类型写成例如string | number的类型,这表示他可以是字符串也可以是数字,这将兼容两种类型的用法;
image.png

3.数组类型

默认的ts数组里的每一个元素都是统一类型,数字数组里不能执行push一个其他类型的变量的操作,这样会出现报错
image.png

数组指定类型

冒号后加 类型[ ]
image.png

数组联合类型

(类型1 | 类型2)[ ]
image.png
使用联合类型之后就可以向同一个数组里加入联合类型里涵盖的类型

4.对象类型

对象里的每一个key—value的类型没有限制,但是当你对其中的变量类型进行修改,必须遵守统一类型原则
image.png

指定对象变量类型

对象名后加冒号,每个变量后都要加入冒号并指定类型
image.png

对象里几个需要知道的规则

1.不能后续添加键值对

Ts中的对象不能向对象里后续添加key—value对的,因为源对象里不存在
image.png

2.必须使用所有属性

image.png
如果有的变量并不是必须的,可以加入可选符,下图的phone就是非必须的
TypeScript基础知识 - 图11

5.any类型

写起来和js没什么区别,并没有对类型的约束

6.函数类型

声明成函数后,同样的这个变量也不能随意修改类型
函数类型后指定了返回值,这意味着他不允许返回其他任意类型
image.png

指定函数返回类型

箭头函数在传参函数后加冒号和类型指定
image.png

指定传入参数类型

在传参括号内形参后指定类型

image.png

函数传参个数必须一致

如果有非必须函数,加可选操作符?
image.png


定义类型别名Type

对象type别名

如果要函数传参传一个对象的时候,一个对象的每一个键值对都要指定类型,那么这个传参框将被占据很长的空间,这是不优雅的,应该指定类型别名来解决这个问题
image.png
指定对象类型的时候也可以对其中的变量做更进一步的约束,例如这里的theme在是字符串的前提下只能传入dark或者light
image.png

函数type别名

感觉用处不大
image.png


定义接口Interface

和type指定类型类似,使用接口时也是xxx变量:指定接口,定义时细微的区别是type时用等号链接,但是interface直接连接就可以了
image.png

接口的extends

继承某一接口的接口将获得父接口所有的变量,以及自己新定义的类型。
例如这个例子里,定义用户都有的姓名,邮箱,年龄,新接口的员工用户里是继承了这三个变量并且新增了独有的员工Id这个变量
image.png

:::info 总的来说,type和interface区别不大,如果你希望继承接口的情形,那就选择Interface,如果你只是简单的指定一个类型,那就使用type就可以了。 :::


使用泛型generics

使用T泛型来替代你需要的类型或者是接口类型
定义的时候写成T,表示这可以是你传入的任意指定类型
image.png
实现时传入对应类型,或者是你自定义的类型即可
如下,这里的T被实现成string,那么下面的extra就被指定为字符串数组,可以传你自定义的类型,譬如员工类型,作者类型,读者类型,这样你这个数组就可以被设置成指定的类型数组。
image.png

泛型继承

,这个泛型做出一定约束,屏蔽了字符串,数字,布尔值这些成为T的机会
image.png