【Typescript 系列】第九节:类型断言

475 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第9天,点击查看活动详情

1. 引言

今天我们来介绍下TypeScript中的类型检测系统中的类型断言。

2. 含义

告知类型检测系统在编译时告知该类型检测时为对应类型检测判断方式。简单来说就是 可以用来手动指定一个值的类型。就是告诉编译器,你不要帮我们检查了,相信我,它就是这个类型。

语法内容:① as 语法(表达式:值 as 类型);②‘尖括号’语法(表达式:<类型>值)(请看例子三)

当我们将一个类extends继承另一个类时,在使用它时候需要注意什么?(请看例子二)

注意:类型断言不是类型转换,它不会真的影响到变量的类型。类型断言只会影响TypeScript编译时的类型,类型断言语句在编译结果中会被删除;

3. 作用

断言就好比解释型强制类型转换,直接告诉你这个变量是什么样子的!(请看例子一), 是在检测阶段帮我们消除错误的一种手段,有些“暴力”,但关键时刻很有用。

4. 例子

例子一:

interface UserName {
  name: string,
  getName(): void
}
interface UserAge {
  age: number,
  name: string,
  getAge(): void
}
type UserInfo = UserName | UserAge
function getUserInfo(info: UserInfo){
  return info.name; // ok:共同属性
}
function getUserInfo2(info: UserInfo){
  return info.getAge(); // error:Property 'getAge' does not exist on type 'UserInfo'.Property 'getAge' does not exist on type 'UserName'.
}

解决方案:类型断言,强制形参类型为固定类型

function getUserInfo3(info: UserInfo){
  return (info as UserAge).getAge(); //  ok: 类型断言
}

例子二:

class ApiError extends Error {
  code: number = 0;
}
class HttpError extends Error {
  statusCode: number = 200;
}

function isApiError(error: Error) {
  if (typeof (error as ApiError).code === "number") {
    return true;
  }
  return false;
}


上述例子中我们定义了一个类型函数方法,isApiError用来判断形参是否ApiError类型,在使用过程中,当我们使用扩展继承类型ApiError类时,它扩展拥有Error 的所有属性和方法,还拥有自身单独属性code,当我们使用断言时就可以明确对形参指定类型,这样类型系统就不会报错了。

例子三:

interface Person{
  name:string;
  age: number
}

let student = <Person>{}
// let student: Person

student.name = 'jack'
student.age = 18

5. 总结

一:和其他类型断言一样, 断言只会让TypeScript不报错,但不会改变代码运行时的行为慎用类型断言,除非你真的有把握。 二:类型断言是一个编译时语法,不涉及运行时,编译文件完成后会自动剔除相关代码。