前端|2、TypeScript常见数据类型 javascript|前端|typescript

1、介绍
TS是JS的超集，TS提供了JS的所有功能，并且额外的增加了：类型系统。

所有的 JS 代码都是 TS 代码。
JS 的所有数据类型 TS 都支持，但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查。

TS类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性，同时也增强了代码的可读性。

文章图片

2、TS常用数据类型
可以将TS中的常用基础类型细分为两类：JS已有类型、TS新增类型。
①JS已有数据类型：number、string、boolean、undefined、function、object、symbol（null属于object类型）。
②TS新增类型：联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any 等。
3、使用
JS已有数据类型使用

/** * number、string、boolean、undefined、Function */ let Name: string = '张三'; let age: number = 18; let married: boolean = false; let nothing: undefined; let getMobile: Function = function(){ return "13511112222"; }; /** * object类型：null、数组、json对象 */ let wife: null = null; //数组有两种写法 let numbers: number[] = [1,2,3]; let strings: Array = ['1','2','3'];

TS新增类型使用
一、联合类型

/** * 联合类型：一个变量可能存在多种数据类型，使用|符号 * 1、普通变量存在多种类型 * 2、数据中存在多种数据类型 */ let a: (string|number) = '字符串'; a = 18; let arrs: (number|string|boolean)[] = [1,'2',true]; let arrs2: Array<(number|string|boolean)> = [1,'2',true];

二、自定义类型（类型别名）

/** * 类型别名：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用，使用type关键字 */ type myArrType = (number|string|boolean)[]; let arr3: myArrType = [1,'2',true];

三、函数参数和返回值类型

//普通写法 function addFun(num1: number,num2: number): number{ return num1+num2; }//箭头函数写法 const squareFun = (num: number): number =>{ return num*num; }//箭头函数另类写法 const squareFun2: (num: number)=>number = (num)=>{ return num*num; }//当函数无返回值（void关键字） const subFun = (num1: number,num2: number): void=>{ console.log(num1-num2); }//当函数参数可选（参数名后面添加?符号） const printFun = (str1: string,str2?: string): void=>{ console.log(str1); console.log(str2); } printFun('1','2'); printFun('1');

四、json对象类型，TS针对此类型，主要就是描述对象内部有哪些属性，且每个属性属于什么类型

/** * json对象 * 直接使用{}描述对象结构 * 采用属性名: 类型格式描述属性列表，多个属性使用 ; 或, 符号分割 * 可选属性在属性名后使用? 符号 */ //type personType = {name: string,age: number,married: boolean,emile?: string,say: Function}; type personType = {name: string; age: number; married: boolean; emile?: string; say: Function}; let person: personType = { name:"张三", age:18, married:false, say:(): void=>{ console.log("hello "+person.name); } };

五、接口类型：当一个json对象类型需要复用时，可以将其定义为接口类型（interface）。

/** * interface * 直接使用{}描述对象结构 * 采用属性名: 类型格式描述属性列表，多个属性使用 ; 或, 符号分割 * 可选属性在属性名后使用? 符号 */ //interface personType {name: string,age: number,married: boolean,emile?: string,say: Function}; interface personType {name: string; age: number; married: boolean; emile?: string; say: Function}; let person: personType = { name:"张三", age:18, married:false, say:(): void=>{ console.log("hello "+person.name); } }; /** * interface（接口）和 type（类型别名）的对比： *相同点：都可以给对象指定类型。 *不同点： *接口只能为对象指定类型，类型别名可以为任意类型指定别名。 *接口可以进行继承，类型别名不能继承。 */ interface studentType extends personType {studentNumber:string};

六、元组类型：元组类型是另一种类型的数组，确切地标注数组有多少个元素，且每个元素数据类型。

//应用场景：在地图中，使用经纬度坐标来标记位置信息。 let position: [number,number] = [25.362,78.125];

七、类型推断：在TS某些情况下，没有明确标注变量数据类型，TS也会隐示的为变量添加类型（可充分利用TS类型推断的能力，能省略就尽量省略，提高开发效率）。
①申明变量并初始化值时，可省略变量类型

let num = 10; //与 let num: number = 10; 效果一致 num = '20'; //编译报错：Type 'string' is not assignable to type 'number'

②决定函数返回值时，可省略函数返回值类型

const add = (num1: number,num2: number)=>{ return num1+num2; } /** * 与此写法效果一致 * const add = (num1: number,num2: number): number=>{ *return num1+num2; *} */let result: string = add(1,2); //编译报错：Type 'number' is not assignable to type 'string'

八、字面量类型：TS中任意值均可作为类型使用。

/** * 此处设置变量 Name 的类型为 'jack'，'jack'类型就是字面量类型 * Name变量的值必须为字面量类型的值，否则编译报错 */ let Name: 'jack' = 'jack'; let age: 18 = 18; /** * 字面量使用场景：往往用来表示一组固定的可选值列表（字面量类型+联合类型） * 调用此函数传递的参数必须为指定字面量类型中的一个（类似于枚举） */ const moveFun = (direction: ('up'|'down'|'left'|'right'))=>{ console.log(direction); }

九、枚举类型：一组固定的常量值列表。

/** * 枚举：使用enum关键字定义 */ enum direction { UP, DOWN, LEFT, RIGHT } /** * 枚举常量列表默认值为number，从0开始自增 */ console.log(direction.UP); //0 console.log(direction.DOWN); //1 console.log(direction.LEFT); //2 console.log(direction.RIGHT); //3/** * 自定义枚举常量值 */ enum direction2 { UP='UP', DOWN='DOWN', LEFT='LEFT', RIGHT='RIGHT' } /** * 枚举作为参数使用 */ const moveFun2 = (direction: direction2)=>{ console.log(direction); } moveFun2(direction2.UP);

【前端|2、TypeScript常见数据类型】十、any类型：声明变量可以为任意类型（弱类型）。