javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > TypeScript类型注解

使用TypeScript类型注解的方法详解

作者:一颗冰淇淋

这篇文章主要为大家详细介绍了TypeScript的类型注解,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

类型注解

TypeScript提供了很多数据类型,通过类型对变量进行限制,称之为类型注解,使用类型注解后,就不能够随意变更变量的类型。

以下代码定义了一个字符串类型的变量,如果把它更改为数字类型时,代码编译阶段就会直接报错,提示 “Type ‘number’ is not assignable to type ‘string’”。

在这里插入图片描述

这样保证变量的数据类型是固定的,那么它所能使用的方法也是确定的,不会出现变量本来是字符串,调用了 toUpperCase方法,后来在未测试到的某场景无意中把它改为数字类型后,调用 toUpperCase 直接报错的情况。

类型推导

当变量没有写数据类型时,ts内部会进行"类型推导",通过上下文赋值语句判断出该变量的数据类型,所以在类型注解较为简单时且其能准确自动推导出类型时,不写类型注解对代码质量也没有影响。

在这里插入图片描述

TS和JS共有的数据类型

TypeScript包含了JavaScript所拥有的数据类型,stringnumbersymbolarraybooleanundefinednullobject

其中,array 在定义的时候需要加上数组中的每一个数据的类型,是字符串、数字还是对象,这就使得数组中不可以写多种数据类型,如果有需要写多种数据类型的情况,可以直接不加类型注解,会自动进行【类型推导】。

let str: string = "string";
let num: number = 0;
let sym: symbol = Symbol("sym");

let arr1: string[] = ['alice', 'kiki', 'heidi']
let arr2: object[] = [{ name: 'alice'}]
let arr3: number[] = [1, 2, 3]

let flag: boolean = false;
let und: undefined = undefined;
let nu: null = null;
let user = { name: "alice" };

上面的对象user也是没有加类型注解的,因为如果定义为 object 类型,无法获取和修改user对象上的属性。

在这里插入图片描述

这是因为user是object类型,但object类型上没有name属性,所以编译阶段会直接报错,所以对于对象可以不加类型注解,让其自动进行类型推导。

TS独有的数据类型

此外TypeScirpt还增加了很多JavaScript没有的数据类型

any

any是一个 “万金油” 的数据类型,表示 “任意” 数据类型,当变量的类型不确定且有可能发生变化时,可以定义为 any,此时变量的数据类型可以被随意更改,这其实会带来一些安全隐患。

比如下面的代码,将字符串当作函数使用,undefined使用数字的方法。因为是any类型,类型有可能被改成字符串、数字、布尔值,所以这样的代码不会被ts检测出问题,但在运行时肯定是会报错的。

let message: any = "message";
message();

message = 0;
message = undefined;
message.toFixed();

在这里插入图片描述

unknown

当一个变量的类型暂时不确定时,可以使用unknown用来限制其类型。

let flag = true
let result: unknown;
if (flag) {
  result = 'Hello World'
} else {
  result = 888
}

它和any有些像,但区别在于unknown是不能被赋值给除了any和unknown类型的变量,这样使得unknown的值不能被乱用到其它地方。

在这里插入图片描述

void

当函数没有返回值时,实际上返回的就是 undefined,void 通常用来表示函数返回值为 undefined 或者 null。

以下形式都是可以的

function add(): void {}

function sub(): void {
  return undefined
}

function mul(): void {
  return null
}

当存在返回值时,编译是会报错的。

在这里插入图片描述

never

never 表示永远不会存在的类型,如果函数为死循环或者抛出异常时可以使用。

function foo(): never {
  while (true) {}
}

function catchError(): never {
  throw new Error("error");
}

当我们封装工具函数时,开始规定的函数入参为 string 类型,但可能后续在其它人开发过程中,增加了 number 类型,为了避免维护时忘记对该类型数据进行处理,可以把入参赋值给 never 类型的变量,使得编译不通过来防止开发者逻辑疏漏。

在这里插入图片描述

tuple

tuple 意思是元组,和数组比较相似,但元组和数组还是存在以下区别。

// 数组
const array: string[] = ["alice", "kiki"];
// 元组
const tuple: [string, number] = ["alice", 20];

函数参数和返回值

声明函数时,在函数的每个参数后添加类型注解,以声明函数接受的参数类型,限制参数类型、参数个数。

在函数列表后面定义的类型注解,用于限制函数返回值类型的。

// 限制参入类型
function foo(message: string, no: number) {}
// 限制返回值
function baz(message: string): string {
  return "string";
}

当入参类型/个数没有达到注解要求时,编译会标红以提醒。

在这里插入图片描述

对象类型、可选类型、联合类型 也都是可以用于规定函数入参的。

function getPoint(point: { x: number; y: number; z?: number }) {}
getPoint({ x: 10, y: 20 });
getPoint({ x: 10, y: 20, z: 30 });

function printId(id: string | number) {}
printId(1);
printId("alice");

function foo(message?: string) {}
foo("message");
foo();

当需要规定的类型比较长时,可以通过 type 关键字来定义类型别名

在这里插入图片描述

同时参数类型为【可选类型】可以理解该参数类型与 undefined 的【联合类型】,以下两个参数的入参本质上是一样的

function foo(message?: string) {}
foo("message");
foo();

function baz(message: string | undefined) {}
baz("message");
baz(undefined);

类型断言

有时候TypeScirpt获取到的类型是比较广泛的,这个时候可以使用类型断言,通过关键字 as 定义具体数据类型。

比如以下定义了两个类,Student 继承自 Person 类,且拥有自己的 studying 方法,定义sayHello方法,要求入参类型为Person,此时创建Student的实例对象student,并调用sayHello方法,传入student。

class Person {}
class Student extends Person {
  studying(){}
}

function sayHello(p: Person){}
const student = new Student()
sayHello(student)

以上代码在编译的时候是没有问题的,但如果在sayHello方法中想要调用Student实例对象的studying,是不可以的,因为虽然传入的参数是Student的实例对象,但它在TypeScript中只能被检测为Person类型,而Person上是没有studying方法的。

在这里插入图片描述

要想正确调用,需要使用类型断言规定入参的实际类型

function sayHello(p: Person){
  (p as Student).studying()
}

非空类型断言

通过 !符号来使不能通过编译的代码不被标红提醒,但如果运行阶段代码存在问题,仍然是会抛出错误的。

在这里插入图片描述

字面量

通过const定义的变量的数据类型为字面量类型,字面量里的值就是该变量赋值的内容。

在这里插入图片描述

通过字面量类型,可用于规定变量的选择范围,比如 flex 布局的 direction 可以选择 row 或者 colums

type DirectionType = "row" | "colums";
let direction: DirectionType = "row";
direction = "colums";

当变量赋值为它类型注解中所没有包含的内容时,是会标红提醒的。

在这里插入图片描述

类型缩小

类型缩小表示当变量数据类型的范围比较大时,我们可以通过 if 、switch 、in 、typeof、instanceof 等方式进行判断来缩小的变量的类型,以达到更精准的操作。

比如一个函数的参数类型可能为 string 和 number,直接获取 length 属性 是会报错的。因为只有 string 类型的变量可以获取到 length,但在 number 类型上是不存在的,所以此时可以通过 typeof 来判断入参类型,这个判断步骤也称为"类型保护"。

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!  

您可能感兴趣的文章:
阅读全文