TypeScript入门二：基本数据类型

Posted 2020-12-01 zheoneandonly

• 浅析基本数据类型
• TypeScript类型解析

 一、浅析基本数据类型

首先有一个问题TypeScript是一门编译型语言？还是解释性语言？显然已经不能被这两个分类来区分，TypeScript的并不是为了让javascript改变执行方式，不是为了提高机器执行效率的。而编译型和解释型的分类是基于这两个特点的。但是，TypeScript具备编译型语言一个特点，就是它对类型进行检查，如果出现类型冲突时它是无法编译成js文件的。

既然TypeScript编译需要对变量进行类型检查，这就意味着TypeScript的变量是有类型的，前面这句话可能会让你很疑惑，难道再TypeScript之前的JavaScript没有类型吗？String、Number、boolean等不是类型吗？

JavaScript的变量本身确实是不存在类型的概念，而仅仅只是变量的值存在类型，变量本身的类型随着值的类型发生改变。而TypeScript的变量是有类型的，并且它的类型不再随着值的类型发生改变，有错误检查的编辑器中出现了变量类型与值类型不一致时会提示错误，这一点是理解TypeScript的关键，非常重要。

TypeScript的基本类型包括：布尔值、数字、字符串、数组、元组、枚举、Any、Void、Null、Undefined、Never、Object。

在进行接下来的内容之前建议了解以下内容

JavaScript的严格模式，相关博客：JavaScript严格模式

JavaScript的类型转换，相关博客：类型和原生函数及类型转换（三：终结js类型转换）

ES6变量声明：ES6入门一：块级作用域(let&const)、spread展开、rest收集

更多关于ES6语法可以了解这里：关于ES6语法与API的全部解析内容

建议阅读TtpeScript的变量声明文档（其简要的解析了ES5与ES6的变量声明相关内容）：变量声明官方文档

 二、TypeScript类型解析

1.TypeScript基本数据类型：

TypeScript数据类型是用来描述变量本身的，然后用变量本身的类型约束值的类型，当值的类型不匹配变量本身的类型时，IDE就会提示错误。

1.1布尔值、数字、字符串变量的声明方式语法：

let 变量名称 :变量类型 = 值 ；//值的类型必须与变量类型一致，否则提示错误

示例：

1 let isDone: boolean = false; 
2 let decLiteral: number = 6; 
3 let hexLiteral: number = 0xf00d; //16进制
4 let binaryLiteral: number = 0b1010; //二进制
5 let octalLiteral: number = 0o744; //8进制
6 let name: string = "bob";

定义模板字符串：

1 let name: string = `Gene`;
2 let age: number = 37;
3 //模板字符串使用反引号（`）包裹，使用${expr}嵌入表达式
4 let sentence: string = `Hello, my name is ${ name }.
5 I‘ll be ${ age + 1 } years old next month.`;

1.2数组、元组、枚举

1 //数组
2 let list: number[] = [1,2,3];//list变量是一个数组，只要赋值数组就没问题
3 let numList: Array<number> = [1,2,3];//泛型数组，赋值的数组每个元素类型必须符合指定的泛型类型
4 let strList: Array<string> = ["1","2","3"];//这是一个字符串泛型数组 

泛型数组还有一种简写方式：

let names:string[] = [‘小明‘,‘小红‘];

关于泛型可以了解官方文档：https://www.tslang.cn/docs/handbook/generics.html，后期也会有博客专门来解析TtpeScript泛型。

//元组：声明数组时指定数组的每一个元素类型，并且数组长度不能超出变量声明时指定的元素个数
let arr:[string,number] = [‘1‘,2];

如果在给元组超出定义长度位置的元素赋值会出现错误提示，这个错误操作一般会出现两个（2493，2322）：2493提示超出元组范围，2322提示赋值类型非undefined类型，所以如果赋值undefined不会报2322错误。详细可以查看官方错误提示文档：文档/项目配置/错误信息列表

比如下面这样给arr[3]赋一个非undefined值：

arr[3] = 10;

TypeScript中的枚举（enum）非常友好的提供了一个有穷序列集的数据结构，它会默认从0开始给每个元素编号，可以通过元素获取编号，也可以通过编号获取元素名称，然而其内部实现采用的是牺牲空间换时间的方式，比如枚举Color中有一个元素Blue,底层实现方式是{Blue:0,0:‘Blue‘},这就实现了当要查找值对应的元素时只需要Color[0]就能获取，而如果在前的数组或对象中要想获得值对应的元素就只能遍历数组或者对象来实现。

 1 //枚举
 2 enum Color {
 3     Red,
 4     Green,
 5     Blue
 6 }
 7 console.log(Color.Red);//0
 8 //自定义编号或者值:编号只能为数值,元素为字符串
 9 enum Name {
10     xiaoming = 3,
11     xiaohong = 5
12 }
13 console.log(Name[3]);//‘xiaoming‘
14 //枚举同样不能越界,只能在枚举有限集合中查找
15 Color.Yellow = 4; //报错（2339）：类型上找不到‘Yellow’该属性

1.3任意类型（any）与无效类型（Void）

1 //any类型：同等与JavaScript的变量，变量的类型取决于值的类型，并且可以任意变化
2 let notSure: any = 4;
3 notSure = "maybe a string instead";
4 notSure = false;

这里可能会疑惑Any这个变量类型有什么用？这不又回到了JavaScript了吗？的确，它可以帮助我们回归到JavaScript变量类型模式，这就意味着我们如果在做项目升级时，在遇到无法确定的变量类型我们就可以使用Any；还有就是第三方库或者用户输入的数据，我们也可能无法确定其类型，这时候就可以解决这类问题。

还有一个很关键的应用就是TypeScript中的数组，前面的Array语法中如果需要一个元素类型不相同的数组我们只能使用元组来实现，但是元组有约束了下标和长度，还是可能无法完成一些特殊的需求，特别是对于习惯JavaScript的宽松的数组模式，Any可以帮助TtypeScript实现同等JavaScript的数组：

let list: any[] = [‘hello‘,100,true];

void类型用处就不大了，它用来表示没有任何类型，其作用就是用来描述没有类型，在一定程度上它同等与undefinde。

1 //void变量值始终为undefined
2 let a: void = undefined;
3 function foo(): void {//用来表示函数不返回任何值
4     // return void ...;以前我们可以这样表示函数不返回任何值
5     // 之前javaScript的写法不会有错误检查，阅读代码时需要查看函数内部代码
6 }

1.4 undefined、null

用来指定变量只能为undefined和null的值，undefined和null变量类型在TypeScript中还有一个含义，它们可以作为任何变量的子集，当然这时在tsconfig.json的"strictNullChecks": false的情况下。

1 let a:undefined = undefined;
2 let b:null = null;
3 let c: number = 10;
4 c = undefined;
5 c = null;
6 // tsconfig.json -- "strictNullChecks": false模式 

1.5 never：用来表示那些永远不存在的值的类型。比如抛出错误，这种情况通常出现在错误检查中。变量也可以是never类型，但是赋值除了自身类型以外的任何变量类型都会提示错误。

 1 interface Test {
 2     imgNumberPerWork: number
 3     displayCover: boolean
 4   }
 5   const test: Test = {
 6     imgNumberPerWork: 0,
 7     displayCover: true
 8   }
 9   function setValue (key: keyof Test, val: any) {
10     test[key] = val //Type ‘any‘ is not assignable to type ‘never‘
11   }
12   setValue(‘imgNumberPerWork‘, 1)

示例中因为Test.imgNumberPerWork是数字类型，但是在setValue()中赋any类型的值。在官方文档中有这样一段描述，never为任何类型的字类，可以赋值给任何类型，但是never除了自身不能赋值任何类型值。

never类型的引用场景主要有：

 1 //1.抛出异常
 2 function error(message: string): never {
 3     throw new Error(message);
 4 }
 5 //死循环
 6 function loop(): never {
 7     while (true){}
 8 }
 9 //never是所有类型的子集，例如作为number的子集：
10 let a: number;
11 y = (() => { throw new Error ‘message‘ })();

1.6 对象（Object） 、对象类型（Type）

 关于TypeScript的Object变量声明：

 1 let dataObject = {
 2   name: "xiaoming",
 3   age: 31
 4 }
 5 //错误一
 6 // dataObject = {} 
 7 //错误提示：type ‘{}‘ is missing the following properties from type ‘{name:tring;age:number;}‘:name, age ts
 8 //        类型“{}”缺少类型“{name:tring;age:number;}”的以下属性:name, age ts
 9 
10 //错误二
11 // dataObject = {
12 //   a: ‘str‘
13 // }
14 // 错误提示：type ‘{a:tring;}‘ is not assignable to type ‘{name:string;age:number}‘ 
15 // Object literal may only specify known properties, and ‘a‘ does not exist in type ‘{name:tring;age:number}‘
16 // 类型“{a:tring;}”不能分配给类型“{name:string;age:number}”
17 // 对象字段只能指定已知的属性，类型“{name:tring;age:number}”中不存在“a”

这两个错误信息都提到了类型‘{name:string;age:number}‘，这个类型的意思就是dataObject这个变量的类型，这个类型只有name、age两个字段，并且这两个字段分别指定了string、number类型，如果要赋值给dataObject对象值就必须是符合这个类型的。不能擅自添加字段，也不能删除字段，所以下面这样写也是错误的：

1 //错误三：缺少字段
2 //dataObject = {
3 //  name:‘xiaohong‘
4 //}

实际上，TypeScript中Object类型的变量声明的完整方式是下面这样的：

1 //声明TypeScript的Object对象
2 let dataObject:{name:string;age:number} = {
3   name: "xiaoming",
4   age: 31
5 }

复杂类型的声明与type关键字

1 let complex: {datas:number[]; myfunc:(item:number) => number[]} = {
2   datas:[1,2,3],
3   myfunc:function(item:number){
4     this.datas.push(item);
5     return this.datas;
6   }
7 }

如果我们需要声明多个相同结构的类型甚至更复杂的类型，最好的方式是将Object变量类型声明与赋值分离，比如还以上面这个复杂的Object变量类型为例，声明多个相同结构的Object变量：

 1 //通过type关键字定义Object变量类型
 2 type MyObject = {datas:number[]; myfunc:(item:number) => number[]} ;
 3 //声明Object变量类型为MyObject的变量
 4 let complex1 : MyObject = {
 5   datas:[1,2,3],
 6   myfunc:function(item:number){
 7     this.datas.push(item);
 8     return this.datas;
 9   }
10 }
11 let complex2 : MyObject = {
12   datas:[1,2,3,5,6,7,8,9],
13   myfunc:function(item:number){
14     this.datas.unshift(item);
15     return this.datas;
16   }
17 }

1.7 函数类型function

在前面的对象变量类型中已经有了TypeScript函数声明的代码，函数声明关键字还是function，但需要在声明时指定参数和返回值的类型：

1 function add1(x:number,y:number):number{
2   return x+y;
3 }
4 
5 let add2 = function(x:number,y:number):number{
6   return x + y;
7 }

函数声明还有一种方式，可以先声明函数类型，在赋值函数：

1 let myAdd : (baseValue: number, increment: number) => number = 
2 function(x:number,y:number) : number{
3   return x + y;
4 }

函数类型的参数名称和实际赋值的函数参数名称可以不一致，但类型和参数个数必须一致。关于函数返回值在void（没有任何类型）变量类型的时候就提到过函数不返回值的处理方式，就是将函数的返回值设置为void类型：

1 let hintStamp(str:string):void{
2   console.log(str);
3 }

关于TypeScript中函数类型还有更多内容，这里仅仅是展示了声明的语法，详细关注这篇博客：（待补充）