TypeScript 类型断言运用

发布时间：2023-03-30 08:58:33 所属栏目：教程来源：

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

TypeScript 允许你覆盖它的推断，毕竟作为开发者你比编译器更了解你写的代码。

类型断言主

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

TypeScript 允许你覆盖它的推断，毕竟作为开发者你比编译器更了解你写的代码。

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

当你把 JavaScript 代码迁移到 TypeScript 时，一个常见的问题：

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
user.nickname = 'Evan'
user.admin = true
user.groups = [, ]
代码解释：

第 7 行，这里通过 as 关键字进行类型断言，将变量 user 的类型覆盖为 User 类型。但是请注意，类型断言不要滥用，除非你完全明白你在干什么。

类型断言还可以通过标签 <> 来实现：

interface User {
nickname: string,
admin: boolean,
groups: number[]
}
const user = <User>{} // User类型
user.nickname = 'Evan'
user.admin = true
user.groups = [, ]
代码解释：

第 7 行，使用 <User>{} 这种标签形式，将变量 user 强制断言为 User 类型。

但是，当你在使用 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() + '. the ' + epithet; // name 被断言为非空
}
name = name || "Bob"
return postfix("great")
}
代码解释：

第 2 行，postfix() 是一个嵌套函数，因为编译器无法去除嵌套函数的 null (除非是立即调用的函数表达式)，所以 TypeScript 推断第 3 行的 name 可能为空。

第 5 行，而 name = name || "Bob" 这行代码已经明确了 name 不为空，所以可以直接给 name 断言为非空（第 3 行）。

双重断言极少有应用场景，只需要知道有这种操作即可：

interface User {
nickname: string,
admin: boolean,
group: number[]
}
const user = 'Evan' as any as User
代码解释：最后一行，使用 as 关键字进行了两次断言，最终变量 user 被强制转化为 User 类型。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!