Typescript学习之类型断言的理解

Typescript学习之类型断言的理解

官网介绍

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 
通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。
类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。
它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

下面是一些类型断言的例子

下面声明了一个数字类型的num，由于数字类型没有length属性，所以可以通过类型断言跳过类型检查。

  const num:number = 1;
  // 第一种写法为(变量 as unknown  as 具有这个属性的类型).要获取的属性
  const len1:number = (num as unknown as string).length;
  const len2:number = (num as unknown as []).length;
  // 第二种写法为 (<具有这个属性的类型>(<unknown>变量)).要获取的属性
  const len3:number = (<string>(<unknown>num)).length;
  const len4:number = (<Array<string>>(<unknown>num)).length;

下面声明了一个字符串类型的str，由于str没有handler方法，所以可以通过类型断言跳过类型检查。

const str:string = 'absdefg'
// 此处unknown 可以替换为never,null,undefined
(str as unknown as { handler: () => object }).handler()
(<{handler:()=>object}>(<unknown >str)).handler()

下面声明了一个类型别名 Foo，里面有一个bar方法，声明一个变量foo，在使用foo.bar()方法时会报错

在赋值前使用了变量“foo”。

可以在调用方法前加上!来告知typescript，一定存在这个方法。

type Foo = {
  prop: string
  bar: () => {
    prop: number | null
  }
}
let foo: Foo;
let prop = foo!.bar()

联合类型的断言

let someValue: boolean | string = false
let value = (someValue as unknown as string).length

赋值断言

下面声明了一个未赋值的number类型的x，并将2*x的结果赋值给y，这在严格模式下，会报错

在赋值前使用了变量“x”。

可以在声明时加上！来告知typescript,x已经被赋值。

let x!: number
let y: number = 2 * x

断言为any

下面将一个string类型的objs断言为any，并在objs的name属性赋值。

let objs:string = 'xxxxx';
(objs as any).name = 'aaaaa'

非空断言

在访问的属性和方法前加上！，来告知typescript一定存在这个方法和属性，忽略null和undefined。

type genter = {
  count?:number,
  setCount : (count:number)=> number,
}
let gen:genter;
let c = gen!.count
gen!.setCount(1)

类型谓词断言 is

class Brid {
  fly() {
    console.log('fly')
  }
}
class Fish{
  swim() {
    console.log('swim');
    
  }
}
// 当返回结果为true时满足animal is Fish
function isFish(animal:Brid|Fish): animal is Fish {
  return (<Fish>animal).swim !==undefined
}

结尾

  断言虽然可以跳过Typescript类型的检查，但是如果断言的不正确会在浏览器控制台报错,所以要谨慎使用。
  以上就是对类型断言的学习和理解，欢迎指正和补充，谢谢。