第四节：5种数据类型在TypeScript中的运用

Posted 2021-04-25 web前端教程

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第四节：5种数据类型在TypeScript中的运用相关的知识，希望对你有一定的参考价值。

在上一节，我们学习了如何结合IDE快速地帮助我们编译TypeScript，有了这个辅助功能，我们的开发效率就大大提高。

接下来，我们就开始学习TypeScript的各种特性。说起数据类型，我们知道，javascript 的数据类型分为了原始数据类型和对象类型，原始数据类型又叫基本类型，对象类型又叫引用类型。

javaScript 原始数据类型包括了：布尔值，数值，字符串，null，undefined。TypeScript同样支持这5种原始数据类型，此外还提供了其他很实用的类型供我们使用，我们在后面的章节一一介绍。

这一节，我们就来看看这5个原始数据类型在TypeScript中的用法。

1.布尔值类型

布尔值最常见，也最为简单。在TypeScript 中，使用 :boolean 定义布尔值类型：

let isTrue:boolean = true;

也许你注意到了，声明定义一个变量的同时，需要指定这个变量的类型，这一点跟javaScript不一样，在javaScript中是不需要预先定义一个类型的，你可以直接给变量赋任何类型的值，变量的类型会根据值的数据类型而改变。

既然，上面代码中的变量 isTrue 被指定为了布尔值类型了，好奇心满满的你，硬是想给它赋一个其他类型的值，看看会发生什么？


 //声明定义一个布尔值类型的变量
 let isTrue:boolean = true;

 //赋一个数值类型的值，会怎样呢？
 isTrue = 5;

还没等你进行编译，webstorm就会提示你：

(webstorm截图)

提示：Type '5' is not assignable to type'boolean'

webstorm告诉我们：不能给布尔类型的变量分配一个数值5。

这样，我们就知道了：在TypeScript中，变量指定类型后，后续只能给它赋指定类型的值，不能赋其他类型的值。

2.数值类型

我们使用用 :number 来定义一个数值类型的变量，除了支持十进制和十六进制字面量，Typescript还支持ECMAScript6中引入的二进制和八进制字面量。


 //十进制
 let data1:number = 8;

 //十六进制
 let data2:number = 0xf00d;

 //ES6的二进制
 let data3:number =  0b1010;

 //ES6的八进制
 let data4:number = 0o744;

除了声明变量需要指定其类型为number类型以外，其他的跟javaScript的用法一样。再次提醒，一旦变了被定义为数值number类型，就不能赋其他类型的值。

3.字符串类型

跟javaScript一样，字符串类型的值支持用双引号 "" 或者单引号 '' 来表示。很简单，我们来定义一个字符串的变量：


 //定义字符串变量

 //双引号表示
 let str1:string = "hello boy";

 //单引号表示
 let str2:string = 'hello girl';

记得我们在系列教程中介绍的字符串新特性：字符串模板，它允许我们用反引号 `` 来表示字符串，同时可以嵌入 ${} 来动态生成字符串变量。在TypeScript中，同样支持这种写法：

 
 //模板字符串的运用
 let myName:string = `前端君`;

 let say:string = `大家好，我是${myName}`;

 //结果：大家好，我是前端君

4.Null类型

在TypeScript中，我们使用 :null 来定义一个变量。


 //定义一个null类型的值
 let n:null = null;

注意：null 类型的变量只能被赋值为 null。

5.Undefined类型

在TypeScript中，我们使用 :undefined来定义一个变量。


 //定义一个undefined类型的值
 let u:undefined = undefined;

注意：undefined 类型的变量只能被赋值为 undefined。

6.空值类型

在 TypeScirpt 中，我们还可以用 :void 表示空值，它一般会用于表示没有任何返回值的函数。

//没有返回值的函数say
function say(): void {
alert('hello 前端君');
}

需要注意的是，在 TypeScirpt 中，默认情况下Undefined 和 Null 是所有类型的子类型。也就是这两种类型的值，可以赋值给其他类型。

//声明定义一个数值类型的变量
let num:number = 10;

//赋值undefined
num = undefined;

//赋值null
num = null;

//报错，不允许赋字符串类型的值
num = 'hello';

前面提过，一旦变量指定了类型，就不能赋其他类型的值，但由于Undefined和Null类型是所有类型的子类型，所以以上的案例不会报错。但最后一行代码，由于给变量赋字符串类型的值，是不允许的，所以报错了。

本节小结

掌握5种原始数据类型在TypeScript中的用法，理解Null和Undefined两种类型的特殊之处。

了解2种原始数据类型后，下一节，我们来学习TypeScript中的其他十分实用的数据类型。