Ts类型声明_ts 声明数组

1、常见类型number、string、boolean

声明一个变量a，并指定类型

let a : number;
1

声明一个变量a，指定类型并赋值

let a : number = 10;
1

a的类型设置为了number,在以后的使用过程中a的值只能是数字，如果为该变量a赋值为其他类型的值则都会报错

2、字面量类型

let a : 10;

a = 11; //报错
1
2
3

直接使用字面量进行类型声明，赋值后不能再去修改（字面量类型就是其本身，限制变量的值就是该字面量的值）

3、函数

函数声明

function sum(a:number, b:number){
	return a+b;
}

sum(10, 10);
sum(10, "10"); 	// 报错
1
2
3
4
5
6

函数返回类型声明

function sum(a:number, b:number) : number {
	return a+b;
}
1
2
3

4、联合类型

可以使用 | 来连接多个类型

let a : "A" | "B"

a = "A"
a = "B"
a = "C" 	// 报错

let b : string | number
b = "B"
b = 10
b = true 	// 报错

1
2
3
4
5
6
7
8
9
10
11

5、any类型

any 表示的是任意类型，一个变量设置类型为 any 后，相当于对该变量关闭了TS类型检测，因为设置为any其实就是原生了JS类型了

显式any

let d: any; // 显式any
d = 10;
d = 'hell0';
d = true
1
2
3
4

隐式 any ：声明变量时，如果不指定类型，则TS解析器会自动判断变量为any类型

let d;
d = 10;
d = 'hell0';
d = true
1
2
3
4

6、unknown类,类型安全的any

unknown：表示未知类型的值，效果类似 any 类

let e: unknown;
e = 10;
e = 'hello';
e = true;
1
2
3
4

unknown实际上是一个类型安全的any,unknown类型的变量不能直接赋值给其他变量

let e: unknown;
e = 10;
e = 'hello';
e = true;

let s: string;

e = 'hello';
s = e;		// 报错
1
2
3
4
5
6
7
8
9

7、类型断言

类型短语，可以用来告诉解析器变量的实际类型

变量 as 类型
<类型> 变量

let e: unknown;
e = 10;
e = 'hello';
e = true;

let s: string;
s = e as string;
s = <string>e;

1
2
3
4
5
6
7
8
9
10
11
12

8、void类型

指定函数返回值类型，void 用来表示空，以函数为例，表示没有返回值的函数

function fn():void {
    return; 
}

function fn1():void {
    return undefined;
}

function fn2():void {
    return null;
}

// fn4 会报错
function fn4():void {
    return '123';
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

9、never类

将函数返回值类型设置为never类，表示永远不会返回结果，一般用于抛出程序错误

function fn(): never {
    throw new Error("报错了");
}

1
2
3
4

10、object 对象类

限制一个对象

let obj: object;
1

限制对象当中的属性

let b: {name: string, age: number};
b = {name: 'qfb', age: 22};
b = {name: 'qfb'};			// 报错，缺少属性

let c: {name: string};
c = {name: 'qfb', age: 22};	// 报错，多了属性
1
2
3
4
5
6

对象的可选属性，在属性名后边加上？，表示对象中该属性是可选的

let b: {name: string, age?: number};
b = {name: 'qfb', age: 22}; // 不报错
b = {name: 'qfb'}; // 不报错
1
2
3

对象当中的任意类型属性(当不确定对象中有几个属性时可用)

let b: {name: string, [propName: string]: any};
b = {name: 'qfb', age: 22, class: '19计算机应用3-3', gender:'男'}; // 不报错
1
2

11、函数结构类型声明

声明d是一个函数类型，参数a和参数b是number类型,函数的返回值是number类型

let d: (a: number, b: number) => number;

// 报错
d = function (n1: string, n2: string): number {
    return 10
}
1
2
3
4
5
6

12、Array类型

指定该变量为数组类型，数组中的元素是字符串（字符串数组）

let arr: string[];
arr = ['a', 'b', 'c'];
1
2

数组类型声明的2种表达方式

let arr1: string[] 表示字符串型数组
let arr2: number[] 表示数值型数组

let arr3: Array<number> 表示数值型数组,写法不一样罢了
1
2
3
4

13、tuple元组类型

JS当中没有元组这个概念，元组其实就是一个固定长度的数组

元组定义

let h: [string, string];
h = ['hello', 'hi'];

h = ['hello']				// 报错
h = ['hello', 'A', 'B']		// 报错

1
2
3
4
5
6

因为元组是固定长度的，所以或多或少一个元素都会报错

14、enum 枚举类

enum Gender {
    Male = 0,
    Female = 1
}

let i: {name: string, gender: Gender};
i = {
    name: '孙悟空',
    gender: Gender.Male
}

console.log(i.gender === Gender.Male);

1
2
3
4
5
6
7
8
9
10
11
12
13

15、&与，表示同时符合

let j: { name: string } & { age: number };
j = {name:'qfb'}; // 不符合，报错
j = {name:'qfb',age: 18} //符合
1
2
3

16、类型别名，简化类型的使用

type myType = 1 | 2 | 3 | 4;
let k: myType;
let l: myType;
let m: myType;

k = 2; 
1
2
3
4
5
6