【TypeScript】类型断言（五）

【TypeScript】类型断言（五）

一、简介

TypeScript 断言是指在编写代码时，开发者能够告诉编译器某个值的具体类型，从而可以在编译阶段强制类型检查。

这其实在某些强类型语言中，类似于强制类型转换的操作。

类型断言有两种形式实现：

• 尖括号语法
• as语法

二、断言形式

2.1 尖括号语法

尖括号语法：开发者可以使用 <类型> 的方式指定某个值的类型，例如:

注意： 有些小伙伴在演练场使用的时候，会提示错误信息，是因为JSX语法冲突，可以在编辑器中通过创建 tsx 或 ts 文件来练习。

let sayHi: any = "hello world";
let hiLength1: number = (<string>sayHi).length;

let hiLength2: number = (<number>sayHi).length; // error

sayHi是any类型，在使用时候将其断言为 string 类型,则不会有错误提示。然后当我们断言为 number ，则会有错误警告。

继续执行接下来的操作。

let sayHi:string | number = 'good good';
let hiLength:number = (<string>sayHi).length;  //0

sayHi是string或者number的联合类型，在使用时候将其断言为string类型。

2.2 as形式

as类型断言语法： 值a as 类型A 的语法进行类型断言，将 值a 断言为 类型A.

例如：

let sayHi: string | number = 'good good';
let hiLength1: number = (sayHi as string).length;

let hiLength2: number = (sayHi as number).length;  // error

对于sayHi同样的进行断言为string和number，结果和尖括号语法断言一致。

使用断言的优势是可以在编译阶段捕获一些潜在的类型错误，从而提高代码的可靠性。不过需要注意，过度使用断言会导致代码的可读性和可维护性降低，因此需要谨慎使用。

as形式 的断言在实际开发中比较推荐。

三、其他断言类型

3.1 非空断言

TypeScript还有一个特殊的语法，用于在不进行任何显式检查的情况下从类型中删除 null 和undefined。使用 ! 写在需要断言的表达式或者值之后：

function setName(name: string | null | undefined) : void {
    
    
    if (name.length) {
    
    
        console.log('name', name)
    }
}

从编译结果我们能够看出，name可能为null或者undefined，我们进行非空断言处理,修改调用方式为 name!.length

function setName(name: string | null | undefined) : void {
    
    
    if (name!.length) {
    
    
        console.log('name', name)
    }
}

现在，在编译时就不会报错了。但是还是需要注意，当在运行时，真正的传入了null或者undefined时，则会出现异常。请务必注意。

3.2 确定赋值断言

在开发中还有这样一种情况, 就是我们在初始定义某一个变量的时候, 有可能是不赋值的,在后面的代码或者函数内对其进行赋值, 然后再使用。

TypeScript允许在实例属性或者变量声明后面放置 ! 号，从而告诉 TypeScript 该属性会被明确地赋值。

// 初始化的时候不进行赋值
let n: number

// 通过调用这个函数对 n 进行赋值操作
function init () {
    
     n = 100 }
init()

// 这里使用一下 n
console.log(n.toFixed(2))

为了避免编译出错，我们可以在变量名后面加个!符号.

// 初始化的时候不进行赋值
let n!: number

// 通过调用这个函数对 n 进行赋值操作
function init () {
    
     n = 100 }
init()

// 这里使用一下 n
console.log(n.toFixed(2))

此时，再去执行编译，则不会出现定义前使用的错误提示了。

四、断言使用需谨慎

需要注意的是，使用断言虽然能避免编译中的TypeScript的报错，但是却避免不了运行中实际真实的报错，因此，除非你真的知道你在做什么，否则不需要轻易使用断言。

如下面代码：

type Score = number | string;

function updateScore(scoreValue:Score): string {
    
    
   return (scoreValue as string).toUpperCase()
}

updateScore(1)

可以看到在编辑器中并没有报错，但熟悉代码的效果伴一眼就能看看出这是有问题的代码。
打开控制台或编辑器运行这段代码，显示出错

所以除非确切的知道变量的数据类型，否则不要轻易使用类型断言，这是因为类型断言会让 TypeScript 编译器 将变量当做指定的类型，而不管它实际的类型，在程序实际运行时可能有JavaScript语法错误，因此使用断言需要额外注意。

以上就是【TypeScript】类型断言的总结，如果对你有帮助，请不要吝啬你的小手给我狠狠的点赞、关注加分享。

---