typescript中的？号和！的意思

最新推荐文章于 2024-11-08 09:48:34 发布

ミ﹏荣ル＾

最新推荐文章于 2024-11-08 09:48:34 发布

阅读量1.5k

点赞数 2

文章标签： typescript

原文链接：https://github.com/e2tox/blog/issues/9

版权

本文探讨了JavaScript中三目运算符(?)的条件选择和可选参数的使用，以及感叹号(!)用于成员断言和安全链式调用的场景。重点讲解了如何通过?和!来处理可能存在的可选属性和确保代码的健壮性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、? 号操作符

1、三目运算符

// 当 isNumber(input) 为 True 是返回 ? : 之间的部分； isNumber(input) 为 False 时
// 返回 : ; 之间的部分
const a = isNumber(input) ? input : String(input);

2、参数(?表示一个可选参数)

// 这里的 ？表示这个参数 field 是一个可选参数
function getUser(user: string, field?: string) {
}

3、成员（?表示属性可能不存在）

// 这里的？表示这个name属性有可能不存在
class A {
  name?: string
}

interface B {
  name?: string
}

4、安全链式调用

// 这里 Error对象定义的stack是可选参数，如果这样写的话编译器会提示
// 出错 TS2532: Object is possibly 'undefined'.
return new Error().stack.split('\n');

// 我们可以添加?操作符，当stack属性存在时，调用 stack.split。若stack不存在，则返回空
return new Error().stack?.split('\n');

// 以上代码等同以下代码, 感谢 @dingyanhe 的监督
const err = new Error();
return err.stack && err.stack.split('\n');

二、！操作符

1、一元运算

// ! 就是将之后的结果取反，比如：
// 当 isNumber(input) 为 True 时返回 False； isNumber(input) 为 False 时返回True
const a = !isNumber(input);

2、成员

// 因为接口B里面name被定义为可空的值，但是实际情况是不为空的，那么我们就可以
// 通过在class里面使用！，重新强调了name这个不为空值
class A implemented B {
  name!: string
}

interface B {
  name?: string
}

3、强制链式调用

// 这里 Error对象定义的stack是可选参数，如果这样写的话编译器会提示
// 出错 TS2532: Object is possibly 'undefined'.
new Error().stack.split('\n');

// 我们确信这个字段100%出现，那么就可以添加！，强调这个字段一定存在
new Error().stack!.split('\n');