一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情。
JavaScript数据类型
上文中我们说到TypeScript是JavaScript的超集,所以JavaScript的所有方法我们也可以再TypeScript中使用。下面让我们学习一下在TypeScript中的JavaScript数据类型:
number类型
在TypeScript中和JavaScript一样它不会区分int类型和float类型,所有数字都是通过number来定义:
在开发中我们可能会遇到很多不同进制的数字我们可以通过添加前缀显示不同的进制:
布尔类型
String类型
以上是JavaScript的三个基本数据类型,接下来我们学习一下其他的一些数据类型:
Arary(数组)类型
通常情况下我们可以这样定义一个数组:const names = [];但是在数组类型中存放的是什么类型的元素呢我们无法确认。在强类型的语言中我们需要知道数组里存放的是什么类型。
接下来我们可以通过push向数组中存放不同类型的元素,
这样的操作是不会报错的但是在TypeScript开发中在数组里存放不同的数据类型是一个不好的习惯。我们可以通过添加类型注解规范它的数据类型,我们通常情况下不推荐第一种写法因为在react.jsx中是有冲突的。如react.jsx中的<div></div>语句,编辑器有时候在进行解析的时候无法正确识别<>符号。
object(对象)类型
通常情况下我们可以通过如下来定义以一个对象类型:
但是这样定义会有一个弊端就是我们无法通过info.name取出对象中的数据:
所以在实际开发中我们可以让它直接推导出对象类型,在后续的文章里我们会对对象类型做详细解释。
null和undefined类型
symbol类型
symbol是在es6新增的一种数据类型。下面我们看一个例子,正常情况下对象中只允许有一个key值:
但是symbol的使用可以让我们使用多个key值,它也是es6的语法。这只是symbol的作用之一,详细的可以自行了解。
TypeScript数据类型
any类型
某些情况下,我们确实无法确定一个变量的类型,并且它可能会发生一些变化这个时候我们就可以使用any类型。 当我们进行类型断言时或者不想给某些js添加具体的数据类型时进行使用。
unknown类型
unknown类型是一种比较特殊的类型,它用于描述类型不确定的变量:
因为我们不能明确知道调用哪个函数他的返回值是什么也是不知道的,我们可以使用any类型,但是我们更推荐使用unknown类型。它和any最大的区别是unknown只能赋值给any或unknown类型但是any类型可以赋值给任何数据类型。
void类型
void通常用来指定一个函数是没返回值的:正常情况下都是不写的。
never类型
never表示永远不会发生值的类型,如是一个死循环或者抛出了异常在这种情况下我们就可以使用never类型。
我们可以看到never好像没什么作用,那么他到底应用于那些场景呢?官方举例给出了解释但是比较复杂,coderwhy讲了一个相对简单的例子:
我们定义了一个函数,函数对传入的参数进行判断处理,当我们传入一个其它类型的参数是会报错提示。如果这时操作人员再方法中修改传入参数类型限制:
虽然不在报错,但是再函数中却缺少了对boolean类型的处理。添加代码就会解决这个问题:
因为上述case已经穷举完所有情况了,代码应该永远无法运行到default当操作人员再次修改传入类型限制时代码就会执行到default系统就会编译报错提示新增类型的判断逻辑让其无法执行到default。
tuple类型
tuple是元组类型是多种元素的组合区分于数组tuple类型里可以存放多种类型的元素。再下述示例中我们取到的name是一个未知类型的数据这样是不安全的这也是数组的弊端:
而元组的特点就是可以知道我们存放的元素的类型:
TypeScript数据类型补充
函数的参数和返回值类型
和变量的类型注解一样,我们通常情况下不需要返回类型注解,因为Typescript会根据return返回值推断函数的返回值类型。
匿名函数的参数类型
通常情况下在我们会为参数添加类型注解但是示例中item根据上下文的环境推导出来的这个过程称为上下文类型(contextual typing),这个时候可以不添加类型的注解。通常上下文中的函数可以不添加类型的注解。
对象类型
可选类型
在上一个示例中我们需要完整的传递参数不然就会编译报错,但是在实际开发过程中我们可能希望选择性的传递参数,这样我们就可以使用可选类型,如下图示例参数中的z?:所示:
联合类型
联合类型是由两个或者多个其他类型组成的类型,联合类型中的每一个类型称为联合成员,如下图所示,我们可以传入number或者string类型的数据。在使用联合类型的时候一定要注意函数中的操作是否适用于所有联合成员。
可选类型和联合类型的关系
一个参数一个可选类型的时候,它其实类似表示的是:这个参数是类型|undefined的联合类型。
类型别名
type用于定义类型别名(type alias)。
类型断言as
有时候TypeScript无法获取具体的类型信息,这个我们需要使用类型断言(Type Assertions).
非空类型断言!
当我们编写如下示例时,在运行代码后代码会报错:
这是因为我们传入的message有可能时undefined,在这种情况下执行.length方法就会报错。如果我们确认传入的参数是有值的,这个时候我们可以使用非空类型的断言:
可选链的使用
在非空类型断言案例中他只是跳过ts在编译阶段对它的检测,事实上代码本身还是不安全的。可选链并不是Typescript独有的特性,他是ES11中新增的特性。它的作用是当对象的属性不存在时,会短路,直接返回undefined,如果存在,那么才会继续执行。
??和!!的作用
- ??:空值合并操作符(??)是一个逻辑操作符,当操作符的左侧是 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数;
- !!:将一个其他类型转换成boolean类型类似于Boolean