TS 的类型声明和变量类型

  一、类型声明

　类型声明是 TS 非常重要的一个特点，通过类型声明可以指定 ts 中变量（参数、形参）的类型

　当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

　简而言之，类型声明给变量设置了类型，使得变量只能出存储某种类型的值，这是 JS 不具备的

语法：

• 直接在变量声明后面加

let a: number;
a = 7;
a = 'luck';//此行代码会报错

• 如果变量的声明和赋值是同时进行的，TS 可以自动对变量进行类型检测

let a = true;
a = false;

• 可以对函数参数和返回值的类型进行声明

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

 

  二、变量类型

　　

 1、字面量

let a1: 10;  
a1 = 10;
//后面使用时不可修改，类似常量

//可以使用 | 来连接多个类型（联合类型），表示‘或’
let b1: "male" | "female";
b1= "male";
b1= "female";

let c1 : boolean | string;
c1 = true;
c1 = 'hello';

 

2、any —— 任意类型

    一个变量设置类型为any后相当于对该变量关闭了TS的类型检测

// let d:any;（显示的any）

//声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）
let d;
d = 10;
d = 'hello';
d = 'true';

 

3、unknown —— 未知类型

　实际上就是一个类型安全的any

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

 　any类型的变量可以赋值给任意变量；但unknown 类型的变量不能直接赋值给其他变量

let s:string;

//d的类型是any，它可以赋值给任意变量
let d;
s = d;

let e: unknown;
e = 'hello';
s = e;//会报错，e的类型是unknown，不能直接赋值给其他变量

if (typeof e === "string") {
    s = e;
}

　类型断言 —— 可以用来告诉解析器变量的实际类型

/*
语法：
    变量 as 类型
    <类型>变量
*/
s = e as string;
s = <string>e;

 

4、void —— 表示空值

　以函数为例，就表示没有返回值（或返回undefined）的函数

function fn2(): void{

}

 

5、never

　表示永远不会返回结果；没有值（比较少用，一般是用来抛出错误）

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

 

6、object

　用来指定对象中可以包含哪些属性

/*  
    语法：{属性名：属性值，属性名：属性值}
    在属性名后面加上？，表示属性是可选的
*/
let b: {name: string, age?:number};

b = {}; //没有的话就会报错
b = {name: "孙悟空", age: 18};

let c1: {name: string, a?:number, b?:number};
c1 = {name:"猪八戒", a:1, b:2,c:3} //会报错，多余了c

//[propName: string]: any 表示可以多余任意类型的属性
let c: {name: string, [propName: string]: any}
c = {name:"猪八戒", age: 18, gender: '男'}

 

7、array

/* 
    数组的类型声明：
        类型[]
        Array<类型>
*/

//string[] 表示字符串数组
let e1:string[];
e1 = ['a','b','c'];

//number[] 表示数值数组
let f: number[];

let g: Array<number>;
g = [1, 2, 3];

 

8、tuple（ts新增类型）

　就是固定长度的数组

/* 
    语法：[类型， 类型， 类型]
*/

let h: [string, number];
h = ['hello', 123];

 

9、enum（ts新增类型）

　枚举可以把所有可能的值都列举出来

enum Gender{ //定义枚举类型可以把所有可能的值都列举出来
    Male = 0,
    Female = 1,
}

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

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