TypeScript | 类型断言

626 阅读1分钟

类型断言主要用于当 TypeScript 推断出来类型并不满足你的需求,你需要手动指定一个类型。

类型断言是一个编译时语法,不涉及运行时。

有使用关键字 as 和标签 <> 两种方式,因后者会与JSX 语法冲突,建议统一使用 as 来进行类型断言。

关键字 as

const user = {}
user.nickname = 'Evan' // Error, Property 'nickname' does not exist on type '{}'
user.admin = true      // Error, Property 'admin' does not exist on type '{}'

编译器推断 const user: {},是一个没有属性的对象,所以不能对其添加属性。

此时可以使用类型断言(as关键字)覆盖其类型推断:

interface User {
  nickname: string,
  admin: boolean,
  groups: number[]
}

const user = {} as User //通过 as 关键字进行类型断言,将user覆盖为 User 类型
user.nickname = 'Evan' 
user.admin = true       
user.groups = [2, 6]

首尾标签 <>

interface User {
  nickname: string,
  admin: boolean,
  groups: number[]
}

const user = <User>{} // User类型

user.nickname = 'Evan' 
user.admin = true       
user.groups = [2, 6]

但是,当你在使用 JSX 语法时,会跟标签 <> 形式的类型断言混淆:

let nickname = <User>Evan</User>  // 这里的 User 指向一个 component

所以,建议统一使用 as type 这种语法来为类型断言

非空断言 !

如果编译器不能够去除 null 或 undefined,可以使用非空断言 ! 手动去除。

function fixed(name: string | null): string {
  function postfix(epithet: string) {
    return name!.charAt(0) + '.  the ' + epithet; // name 被断言为非空
  }
  name = name || "Bob"
  return postfix("great")
}

双重断言

应用场景极少

interface User {
  nickname: string,
  admin: boolean,
  group: number[]
}

const user = 'Evan' as any as User //使用 as 关键字进行了两次断言,最终变量 user 被强制转化为 User 类型

学习链接