2、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<string> = ['1','2','3'];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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];
1
2
3
4
5
6
7
8
9
10

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

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

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

//普通写法
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');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

四、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);
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

五、接口类型：当一个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};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

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

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

①申明变量并初始化值时，可省略变量类型

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

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

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'
1
2
3
4
5
6
7
8
9
10
11
12

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

/**
 * 此处设置变量 Name 的类型为 'jack'，'jack'类型就是字面量类型
 * Name变量的值必须为字面量类型的值，否则编译报错
 */
let Name: 'jack' = 'jack';
let age: 18 = 18;

/**
 * 字面量使用场景：往往用来表示一组固定的可选值列表（字面量类型+联合类型）
 * 调用此函数传递的参数必须为指定字面量类型中的一个（类似于枚举）
 */
const moveFun = (direction: ('up'|'down'|'left'|'right'))=>{
    console.log(direction);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

/**
 * 枚举：使用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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

十、any类型：声明变量可以为任意类型（弱类型）。

/**
 * 将变量obj定义为any类型，所以任意改变obj类型值都不会编译报错
 * 应尽量避免使用any类型，any会使TS失去类型保护的优势
 */
let obj: any = 1;
obj = '123';
obj = {"name":"张三"};
1
2
3
4
5
6
7