TypeScript 类型声明 与 进阶

2,987 阅读4分钟

类型声明就是给变量设置了类型,使得变量只能存储某种类型的值

类型声明的作用:

  1. 通过类型声明可以指定 TS 中的变量(参数,形参)的类型
  2. 指定类型之后,再给变量赋值,会自动进行检测,如果符合则赋值,不符合则会抛出错误

TS 也具有自动类型判断的功能:

当对变量的声明和赋值同时进行时,TS 编译器会自动判断变量的类型,因此当声明和赋值同时进行的时候,可以省略掉类型声明。

TypeScript 的类型

类型例子描述
number1,-1,1.5任意数字
string'asd','hello'任意字符串
booleantrue,false布尔值true或false
字面量let a: 123;限制类型就是变量本身的类型,且值不能修改
any*任意类型
unknown*任意类型,但是比 any 安全
void空值(undefined)没有值(或 undefined)
never没有值不能是任何值
object{name: 'zhangsan'}任意对象
array[1, 2, 3]任意数组
tuple[1, 2]元组,TS新增类型,固定长度的数组
enumenum{a, b}枚举,TS新增类型

number

// 声明一个变量 num 同时指定它的类型为 number
let num: number;

// 同时给 num 变量赋值
num = 100;
num = 'hello';  // 报错

// 上面我们可以看待 将 num 赋值成字符串 'hello' 时,
// 抛出 “不能将类型“string”分配给类型“number”。”  错误。

string

指定 String 类型,同样也只能赋值字符串类型的值,如果赋其它类型的值,也会报错。

let str: string = 'hello';
str = 'hi';
str = 123; // 报错

boolean

声明 boolean 类型的变量,只能赋值 true 或者 false

let bool: boolean = false;
bool = true;
bool = 1; // 报错

接下来说一些 TS 中的数据类型

字面量

let a: 'male';
a = 'male';
a = 'female';  // 报错

当我们给 a 直接字面量赋值的时候,a 的值只能是初始赋值的那个值,如果再重新赋值成其他值,就会报错。

字面量赋值可以搭配 | 使用,表示或,来连接多个类型(联合类型)

let a: 'male' | 'female';
a = 'male';
a = 'female';

// 或者赋值成类型
let b: string | number;
b = 'hello';
b = 123;

any

any 表示任何类型,如果对 变量设置类型为 any 将关闭 TS 的类型检测。(使用 TS 时,不建议使用)

let a: any;  或者 let a;
a = 'hello';
a = 123;
a = true;

可以对 a 赋任何类型的值。

unknown

表示未知的类型,和 any 很像,但是不会关闭类型检测。

let a: unknown;
a = 'hello';
a = 123;
a = true;

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

let a: any = 'hello';
let b: unknown = 'hi';

let c: string;
c = a;  // 不会报错
c = b;  // 报错

// 如果想用 unknown 给变量赋值
if(typeof b === 'string') {
	c = b;
}
// 或者使用 类型断言
c = b as string; 
// 或者 类型断言
c = <string>b;

类型断言

可以告诉解析器变量的实际类型。

表示方式:

  • b as 类型
  • <类型>b

void

void 表示为空,以函数为例,就表示没有返回值的函数。

function fn(): void {
    return 123;  // 报错,函数不能有返回值
}

never

表示永远不会返回结果。

// 用于抛出错误,没有返回值的函数
function fn(): never {
    throw new Error('错误');
}

object

就表示一个 JS 的对象。

相比普通对象最大的优点就是,对象中可以指定对象包含哪些属性。

let a: {name: string, age?: number};
a = {}; // 报错
a = {name: '小白'};  // 正确写法 , 如果在属性后面加一个问号,就说明这个属性是可有可无的

// [prop: string]: any 表示可以有任何属性
let b: {[prop: string]: any};
b = {name: '小黑', age: 18, gender: '男'};

接下来声明一个函数的检测类型(函数也属于对象类型)

let fn: (a: number, b: number) => number;
fn = function(a, b) {
    return a + b;
}

array

可以某一类型的数组。

类型声明方式:

  • 类型[]
  • Array<类型>
let a: string[];
a = ['a', 'b', 'c'];

let b: number[];
b = [1, 2, 3];

// 也可以
let c: Array<number>;
c = [1, 2, 3];

tuple (元组)

元组,固定的数组长度,效率也会比数组高。

let a: [string, string, number];
a = ['hi', 'hello', 123];
a = ['hi'];  // 报错 位数不对
a = ['a', 'b', 'c']; // 报错 最后一个数字的类型不对

enum

枚举类,列出变量可能的情况。

// 定义一个枚举类型
enum Gender {
	male = 0,
    female = 1
}
let obj = {
    name: '小白',
    gender: Gender.male  // 在这里使用
}
console.log(obj.gender)   // 输出:0

补充知识点

| 表示或,& 表示且,表同时

| 的使用

let a: string | number;
a = 'hello';
a = 123;
a = true; // 报错

& 的使用

let a: {name: string} & {age: number};
a = {name: '小白', age: 18};
a = {name: '小白'};  // 报错, & 表示两个条件必须都要满足

类型的别名

作用就是简化类型的使用。

type myType = 1 | 2 | string;
let a: myType;
let b: myType;
let c: myType;
a = 'hello';
a = 1;
a = 2; 
a = 3;  // 报错

我们可以看到,可以使用多个变量去使用我们自己声明的类型,这样就大量节省了代码和重复工作。

TypeScript 面向对象编程也是 TypeScript 找你不要的一个环节,点击观看 TypeScript 面向对象的 类,接口与泛型juejin.cn/post/691902…