TS中的!和?用法

最新推荐文章于 2023-09-20 11:03:45 发布

鱼翅冰淇淋

最新推荐文章于 2023-09-20 11:03:45 发布

阅读量799

点赞数

文章标签： typescript

原文链接：https://www.jianshu.com/p/dd304d5cb3dc

版权

本文深入探讨了TypeScript中的非空断言(!)和可选链操作符(?.)，解释了它们在处理变量赋值、类型检查以及访问可能为空的对象属性时的作用。非空断言用于强制转换可能为null或undefined的值，而可选链操作符允许安全地访问深层属性，只有在对象链路完整时才会尝试访问。文章通过示例展示了这两种操作符的正确使用场景，并强调了在写操作时需要额外注意的类型断言。

摘要由CSDN通过智能技术生成

!用法

用在变量前表示取反
用在赋值的内容后时，使null和undefined类型可以赋值给其他类型并通过编译

let y:number

y = null        // 无法通过编译
y = undefined   // 无法通过编译

y = null!
y = undefined!

// 由于x是可选的，因此parma.x的类型为number | undefined，无法传递给number类型的y，因此需要用x!
interface IDemo {
    x?: number
}

let y:number

const demo = (parma: IDemo) => {
    y = parma.x!
    return y
}

如果存在空情况的判断并赋具体值时，可以不用!，但是如果要想令y存在等于undefined的情况还是需要用!

interface IDemo {
    x?: number
}

let y:number

const demo = (parma: IDemo) => {
    y = parma.x || 1    // 如果为undefined，返回y=1，如果不为undefined，则返回parma.x的值
    return y
}

?用法

除了表示可选参数外
当使用A对象属性A.B时，如果无法确定A是否为空，则需要用A?.B，表示当A有值的时候才去访问B属性，没有值的时候就不去访问，如果不使用?则会报错

// 由于函数参数可选，因此parma无法确定是否拥有，所以无法正常使用parma.x，使用parma?.x向编译器假设此时parma不为空且为IDemo类型，同时parma?.x无法保证非空，因此使用parma?.x!来保证了整体通过编译
interface IDemo {
    x: number
}

let y:number

const demo = (parma?: IDemo) => {
    y = parma?.x!
    console.log(parma?.x)   // 只是单纯调用属性时就无需!    
    return y
}
    
// 如果使用y = parma!.x!是会报错的，因为当parma为空时，是不拥有x属性的，会报找不到x的错误

但是?用法只能读操作而不能写操作，对一个可能为空的属性赋值是不会被编译通过的，此时还需用用到类型断言

interface IDemo {
    x: number
}

// 编译报错，不能赋值给可选属性
const demo = (parma?: IDemo) => {
    parma?.x = 1    
}
    
// 使用类型断言  
const demo = (parma?: IDemo) => {
    let _parma = parma as IDemo
    _parma.x = 1
}