typescript高级类型详解，typescript实战视频

本内容由系统网小编为大家分享，Windows系统安装教程、办公系统、软件怎么使用、软件使用教程、办公软件攻略等信息。

上一节主要总结了Typescript和JavaScript之间的区别，以及Typescript的运行环境。本节中我们主要对Typescript的类型总结一下。

一、变量的定义

如上述代码所示，我们声明变量，使用var/let/const 标识符: 变量类型 = 赋值。 此时如果我们给变量赋值为另一个类型的值，此时就会报错。

1.1、string 和 String以及 number和Number之间的区别

1.2、声明变量的关键字

1.3、变量的类型推断

上面声明message变量并没有说明类型，但是在后面对message进行赋值为数字类型的时候就会报错。当对message进行赋值时，会将其赋值的类型设置为message的类型，当将message赋值为其他数据类型则就会报错。

二、js中的基本数据类型

我们经常所Typescript是Javascript的一个超级。正如上图所示，Typescript中相比于JavaScript中多了接口，强类型，泛型等等。

2.1、number类型

Typescript和Javascript一样，其中不存在int类型,double类型的数据，只存在number类型的数据，并且在typescript中是支持二进制，八进制，十进制，十六进制的。

2.2、boolean类型

2.3、string类型

字符串类型的数据可以是双引号，也可以是单引号。也可以使用es6中的模板字符串写法

2.3、Array类型

我们在js中喜欢往一个数组中存放不同的数据类型，但是在ts中这样是不被允许的。ts实现数组类型的有两种方式。如上图所示，可以通过Array<string>,也可以通过number[]来设置数组。当我们向该数组中插入一个其他类型的数据的时候，此时就会报错。

2.4、Object类型

如上图所示，当我们设置给info为object类型的数据的时候，此时打印出info中的name属性或者对name属性进行赋值操作都会报错。原因是我们在对info设置为object类型时，该类型中并不存在任何其他属性的类型。当读取info中的name属性时则会报错。 解决方法：1、使用默认类型推断 如上图所示，此时如果我们不对其使用类型约束的话，此时就会是默认类型，然后默认类型中就存在name和age属性，此时我们就可以读取其属性了。 解决方法: 2、使用显示类型设置(type) 如上图所示，我们使用type来设置类型，并将其作为info的类型。

2.5、Symbol类型

在es5中如果我们的属性值相同，则该对象会报错，在ts中也是会报错的。在ts也可以使用Symbol来解决属性名冲突的问题。如上图所示，此时就不会报错。

2.6、null和undefined

null和undefined既是实际值，也是类型值。

三、typescript中的类型

3.1、any类型

如果我们无法确定数据的类型我们可以使用any类型，如果我们使用any类型，其实和js一样。我们可以对不同类型进行赋值操作。如上述代码所示，如果我们给数组设置any类型，此时该数组就可以存放任何数据类型。

3.2、unknown类型

unknown类型表示类型不确定，从某种意义上来说，该类型的数据和any类型数据差不多，但是和any仍然存在一些不同。上面这个例子中，我们对于result类型不确定，因为在下面result的值可能为string类型也可能是number类型。当然我们也可以设置result的类型为any类型。但是我们一般还是使用unknown类型。原因是：unknown类型的数据只能赋值给any类型和unknown类型，但是any类型的数据可以赋值给任何类型的数据。正如上图所示，当我们将unknown类型的数据赋值给string类型时，会报错，但是any类型的数据不会。

3.3、void类型

void类型的数据作为函数类型的返回值，并且函数的返回值为null或者undefined的时。

3.4、never类型

never类型表示永远不会发生值的类型 如上图所示，此时该函数中存在死循环，此时这个函数永远不会结束，此时不存在返回值，所以我们给函数的返回值为never类型的值。如上图所示，如果我们函数中存在报错，此时会返回never类型的数据。如上图所示，此时函数func1中只允许传入number或者string类型的数据，所以不可能经过default分支，所以此时check变量永远不可能发生值，此时其类型为never类型。

3.5、tuple类型

很多语言中都存在元组类型的数据，例如python等。在typescript中也存在元组类型的数据的。如果数据类型都相同的数据采用数据类型，数据类型不相同的采用元组类型。 元组的简单使用 tuple的简单应用，在react hooks中的useState,执行后返回的是一个数组，数组中第一个元素是值，另一个是函数，此时可以使用元组。

四、Typescript类型补充

4.1、函数的参数类型

在ts中我们规定好函数参数类型，如果参数类型不一致，则报错。如果参数的数量不一致，则也会报错。

4.2、函数返回值类型

我们可以不规定函数的返回值类型，ts会自定推断返回值类型。

4.3、匿名函数的参数

上面为普通函数的参数，一般我们都需要加上类型注解，但是如果要是匿名函数的参数，比如说在forEach中的匿名函数，此时就不需要类型注解，因为typescript会根据所在上下文分析，得到item的类型注解(因为数组arr为字符串类型，此时item就为字符串类型)。

4.4、对象类型

如果我们存在一个参数为对象类型，我们可以如上述代码所示去设置参数类型。属性之间可以使用 , 或者 ; 来分割，最后一个分隔符是可选的。属性的类型也是可选的，如果没有设置类型，则默认类型为any。

4.5、可选类型

如果我们一些参数是可选的，可以在该参数后面加上?表示可选，当传参时，有没有该属性都行。

4.6、联合类型

联合类型表示：变量的类型可以为多种，如上述代码所示，message的类型可以是number类型,string类型,boolean类型。 联合类型的使用 如上述代码所示，我们设置message的类型为number，string, boolean类型，并在函数中对其进行判断执行相关代码。上面代码中我们匹配到message为字符串时执行toUpperCase操作，此时message的类型为string类型，此时使用到缩小联合，使得typescript可以更加具体的匹配类型。

4.7、可选类型填充

可选类型填充也就相当于类型 和 undefined的联合类型。但是如果向函数中传入null就会报错。

4.8、类型别名

如上图所示，如果此时我们需要在多种地方使用某一类型的时候，此时我们可以使用类型别名。

4.9、类型断言as

我们先看一个例子。 例子1 如上图所示，我们存在通过document.querySelector来获取一个HTMLElement对象，但是我们获取的是一个图片元素，但是typescript并不知道该元素的具体是什么类型的元素。所以当我们使用img.src来给其赋值时，此时如图一所示，就会发生报错。当我们使用断言，将img元素设置为其具体的类型的元素(HTMLElement)。此时我们就可以正常使用img.src了。 例子2 如上图所示，我们在fun1函数中需要传入的类型是Person对象类型，此时我们使用该类型的一个方法study,但是Person上并不存在study方法，但是其子类Student上存在，我们可以使用断言as，将p指定为Student子类。 typescript只允许断言为更为具体的类型，或者是不太具体的类型

如上图所示，此时就将message断言为不太具体的类型any类型，因为我们知道any类型的变量可以赋值为任何类型。如上图所示，此时我们强行将message转化为其他类型的数据，就会报错。

4.10、非空断言 !

如上述代码所示，message可能为undefined或者为一个字符串，此时我们如果打印出message.toUpperCase()的值，则该值可能为错误的。但是我们可以使用!来表示非空断言，此时表示当前message不能为空，跳过ts在编译阶段对其检错。

4.11、可选链的使用?.

如上图所示，我们定义一个Person类型的数据，age和friend属性都是可选的，此时我们将info的类型设置为Person,当我们打印出info.friend.name时就会报错。 解决方法:使用可选链?.,可选链并不是ts提出来的，是es11（es2020）提出后，在ts中仍然可以使用。表示的意思是：如果friend的属性值为undefined时，就会自动返回undefined，避免从undefined上读取属性。

4.12、??和!!的作用

!!表示的意思将其转化为Boolean类型的值。 ??和三元运算符有相同的用处，表示当前的值为null或者undefined时，则返回??后面的值。

4.13、字面量类型

如上图所示，字面量类型的类型和值必须一致，并且不能更改。但是字面量类型有什么用途呢?如上图所示，此时我们给func1设置参数dir的类型为Directive，此时我们dir只能从left right center中取值。

4.14、字面量推理

，我们设置info对象为 { name:"张三", age: 20 }，ts对其类型推断为info:{name:string, age: number}。下面一个例子

我们给request中的method中的类型为"POST","GET"类型，但是当我们使用option对象时，此时method类型为string乐行，所以此时request(option)报错。 解决方法一：使用as const 如上图所示，此时我们设置as const后，url的类型变为https...但是仍然是string类型，我们可以理解为是string类型的一个子集。method类型就变为POST类型。 解决方法二：

我们可以给options.method使用断言，将其断言为POST类型。 解决方法三 使用type来规定options的类型。

4.15、类型缩小

在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为 缩小。 typeof padding === "number 可以称之为 类型保护.常见的类型保护存在以下几种： typeof,平等缩小，===，!==,instancof,in等等。 一、typeof 二、swich..case. 3、instanceof 4、in 这里的两个是对象的字面量，可以使用in来查看某一个属性是否在该对象上。

XTw.com.Cn系统网专业应用软件下载教程，免费windows10系统,win11,办公软件,OA办公系统,OA软件,办公自动化软件,开源系统,移动办公软件等信息，解决一体化的办公方案。