TypeScript中的特殊字符(?, !)的基本用法规则

作者：管理员 2022-05-31 10:27:05 分类：JavaScript 阅读（2055） 0

记录下TS中的特殊字符(?, !)，以便于记忆查找，查看原文

基本规则

属性或参数中使用 !——表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
变量后使用 !——表示类型推断排除null、undefined
属性或参数中使用 ?:——表示该属性或参数为可选项

!用法

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

1
2
3
4
5
6
7

let y:number

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

y = null! //通过编译
y = undefined! //通过编译

示例

1
2
3
4
5
6
7
8
9
10
11

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

let y:number // 参数为number类型

const demo = (parma: IDemo) => {
y = parma.x! // 变量值可空
return y
}

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

1
2
3
4
5
6
7
8
9
10

interface IDemo {
x?: number
}

let y:number

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

注意

1 2	console.log(null \|\| "xx" //xx console.log(undefined \|\| "xx") //xx

?用法

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

1
2
3
4

var a = null;
console.log(a) // null
console.log(a.b) // 报错
console.log(a?.b) // undefined

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

let y:number // 参数为number类型

const demo = (parma?:IDemo) => { // parma?:IDemo 参数为可选项
y = parma?.x! // 变量值可空
console.log(parma?.x) // 只是单纯调用属性时就无需!
return y // 可编译
}

// 如果使用y = parma!.x!是会报错的，因为当parma为空时，是不拥有x属性的，会报找不到x的错误

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

interface IDemo {
x:number // 参数为number类型
}

// 编译报错，不能赋值给可选属性
const demo = (parma?: IDemo) => { // parma?:IDemo 参数为可选项
parma?.x = 1 // 变量值可空
}

// 使用类型断言
const demo_ = (parma?: IDemo) => {
let _parma = parma as IDemo
_parma.x = 1
}

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

TypeScript

上一篇：Mac系统允许运行任何来源的程序-命令行配置

下一篇：记录Chrome下使用CSS3动画效果导致页面出现闪烁Bug【已修复】

TypeScript中的特殊字符(?, !)的基本用法规则

基本规则

!用法

示例

注意

?用法

示例

相关推荐

共 0 条评论关于"TypeScript中的特殊字符(?, !)的基本用法规则"

点击取消