手把手教你typescript系列 2 熟悉TS基本类型

为变量和函数声明类型是一个非常好的编程习惯, 这对后端来讲稀松平常,对前端来讲就是建立类型思维的开始。

es6和typeScript都有的类型: Boolean、Number、String、Array、Function、Object、Symbol、undefined、null

typeScript的数据类型在ES6的基础上，又新增了 void、any、never、元祖、枚举、高级类型

类型注解

作用： 相当于强类型语言中的类型声明，对变量起到约束作用
语法： (变量/函数): type , 比如let a: string = '1'

在ts中,变量的数据类型不可改变

//声明bool为布尔类型
let bool: boolean = true;
//声明num 为数值类型
let num: number = 123;
//声明str变量,并定义为字符串类型
let str: string = 'abc';
//在这里将str 赋值成 数值123,编辑器就会报错
str = 123

数组

定义数组类型的两种方式

1. let arr1: number[]
2. let arr2: Array; //Array在这里是ts预定义的一个泛型接口
   两种声明方式是等价的。他的意思就是 声明一个数组他的元素只能是number类型，如果为这个数组添加一个字符串类型，编辑器就会报错
   let arr1: number[] = [0,1, ‘1’]; //不允许接收字符串,编辑器报错

如果想声明 [0,1, ‘1’]这种类型的数组就要用到ts的联合类型

联合类型

let arr2: Array<number | string> = [0,1, ‘1’]; //这样的写法表示数组的元素可以是number型,也可以是string型

元组类型

元组类型是一种特殊的类型 他限定了数组元素的类型和个数
let tuple: [number, string] = [1, ‘1’]; //正确
let tuple: [number, string] = [‘1’, ‘1’]; //编辑器会报错
let tuple: [number, string] = [‘1’, ‘1’, ‘1’]; //编辑器会报错,提示不能添加新的元素
元祖的越界问题
tuple.push(1); //编辑器不会报错
此时 console.log(tuple); //输出 [1, ‘1’, 1],三个元素
tuple[2]; 访问刚刚添加进去的元素编辑器会报错,禁止访问.实际开发过程中不建议这样使用

函数

(x: number, y: number)规定了参数类型
(x: number, y: number): number 括号后的number规定了函数的返回类型
通常可以将函数的返回值类型进行省略,ts会自动推导出函数的返回值类型

let add = (x: number, y: number): number => x+ y;

//定义一个函数类型
let compute:(x: number, y: number) => number;
//函数的参数可以和声明时不一样
compute = (a, b) => a+ b;

对象

let obj: object = { x: 1, y:2 };
obj.x = 3; //会报错
正确的定义方法是这样, 定义他的成员
let obj1: {x: number, y: number }= { x: 1m y:2 };
obj1.x = 3; //正确

symbol

let s1: symbol = Symbol();
let s2 = Symbol();
s1 === s2 // false 他两不相等

undefined 和null

undefined 和null是任何子类型,他可以赋值给其他类型

声明为undefined后此变量不能被赋值成为其他任何类型,只能被赋值成它本身
let un:undefined = undefined;
let nu: null = null;

let num: number = 1;
num = undefined; //报错

官方文档说过 undefined 和null是任何子类型,他可以赋值给其他类型, 但是我们这里将undefined赋值给num就会报错,怎么处理,才能通过类型检查呢?

1. 打开tsconfig.json
   找到 “scriptNullChecks”: 设置为false后,num = undefined;就不会报错
2. 将num设置成联合类型
   let num: number | null | undefined = undefined; //正确

void

在js中,void操作符,可以让任何表达式 返回undefined
ts中, void表示没有任何返回值的类型
let noReturn = () => {}; //noReturn 的类型就是void类型
比如 void 0;
因为undefined在js中不是保留字, 我们还可以自定义undefined的值.可以尝试在控制台输入并运行一下代码

(function(){
 var undefined = 0;
 console.log(undefined);
})();

可以看到 输出结果是0, 说明闭包中声明的undefined覆盖了全局的undefined.
使用void就可以避免此类情况的发生, 确保函数返回的一定是undefined

any

在ts中,如果我们没有指定类型,默认就是any类型,这就和js中没有区别了, 可以任意对他进行赋值, 其实是对js的兼容
如果不是特殊情况,避免使用any. 如果我们将所有变量定义为any类型就没有必要使用ts了。

never

表示永远不会有返回值的类型

1. 函数抛出异常 比如 throw new Error()
2. 死循环函数 - 永远不会反会