欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TypeScript(二)类型断言

程序员文章站 2022-03-05 23:20:43
...

TypeScript 允许重写已经被推断和分析的类型,通过“类型断言”机制区实现。
通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设你,程序员,已经进行了必须的检查。

1.类型断言的常见方式

ts 中的类型断言主要有以下两种语法

1.1 as 语法

interface Foo{
bar:number,
baz:string
}

const foo ={} as Foo;
foo.bar = 123;
foo.baz = 'hello';

1.2 尖括号语法 < xxx >

interface Foo{
bar:number,
baz:string
}

const foo =<Foo>{};
foo.bar = 123;
foo.baz = 'hello';

这两种语法是等价的,但是TypeScript里使用JSX时,只有 as语法断言是被允许的。主要是因为jsx 是js 和 xml 混合的语法,使用< xxx >会存在歧义。建议使用 as 语法。

2.类型断言的缺点

类型断言能够方便开放人员将遗留项目改造为ts 项目,比如能做到直接复制 js 代码到 ts 中,几乎没有修改,而类型断言的缺点也正是这一点。类型断言屏蔽了编译器对代码的检查,因为类型断言告诉 编译器 类型是可信的, 无效检查,从而导致ts 编译器不会对此发出错误警告。

因此建议使用强类型校验,而非类型断言

interface Foo{
bar:number,
baz:string
}

const foo: Foo = {
	// 编译器会有相应提示
    bar :123,
    baz: 'hello'
};

3.双重断言

下面的示例可以正常运行,是因为MouseEvent 是 Event 的子类

function handle(event: Event) {
    const mouseEvent = event as MouseEvent;
}

而下面的代码会报错,因为HTMLElement 不是 Event 的子类

function handle(event: Event) {
    const element = event as HTMLElement; // 报错
}

如果想要去除报错,可以使用双层断言

function handle(event: Event) {
    const element = (event as any) as HTMLElement; // 双层
}

总结双重断言:

  • 1.双重断言基于两个前提:

    • (1) 子类型可以被断言为父类型
    • (2) any 这种类型可以被赋值给几乎其他任何类型(never 等除外)
  • 2.双重断言断言可以实现 子类型转换为另外一种子类型( 子类型->父类型->子类型)

  • 3.尽量不使用双重断言,双重断言会破坏原有类型关系

相关标签: TypeScript