Typescript 中？问号的几种不同用法

2024-07-04 19:00| 来源: 网络整理| 查看: 265

1、作为Typescript 接口属性数量不确定时的定义方法

如果使用接口来限定了变量或者形参, 那么在给变量或者形参赋值的时候, 赋予的值就必须和接口限定的一模一样才可以, 多一个或者少一个都不行。

但是开发中我们往往可能会遇到少一个或者多一个的场景。

（1）少一个，用可选属性

可选属性意如其名，用法也简单，只需要在属性名字后面加一个？即可。

需求: 如果传递了middleName就输出完整名称, 如果没有传递middleName, 那么就输出firstName和lastName

interface FullName{ firstName:string lastName:string middleName?:string [propName:string]:any } function say({firstName, lastName, middleName}:FullName):void { // console.log(`我的姓名是:${firstName}_${lastName}`); if(middleName){ console.log(`我的姓名是:${firstName}_${middleName}_${lastName}`); }else{ console.log(`我的姓名是:${firstName}_${lastName}`); } } say({firstName:'Jonathan', lastName:'Lee', middleName:"666"}); say({firstName:'Jonathan', lastName:'Lee'}); （2）多一个，用索引签名

用于描述那些“通过索引得到”的类型，比如arr[10]或obj[“key”]。

意思有点抽象，可以大概理解为是在定义对象中key（propName）和value的数据结构，后续对象中的属性，只要key和value满足索引签名的限定即可, 无论有多少个都无所谓。

interface FullName { [propName:string]:string } let obj:FullName = { // 注意点: 只要key和value满足索引签名的限定即可, 无论有多少个都无所谓 firstName:'Jonathan', lastName:'Lee', // middleName:false // 报错 // 无论key是什么类型最终都会自动转换成字符串类型, 所以没有报错 // false: '666' } interface stringArray { [propName:number]:string } let arr:stringArray = { 0:'a', 1:'b', 2:'c' }; // let arr:stringArray = ['a', 'b', 'c']; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); 2、作为Typescript 中 if 判断的简洁写法

例：data入参可能为null,undefined，通常我们的写法是直接上if判断，然后再取data中的属性，但是有了问号点(?.)写法就简单很多了，看下面例子：

1.typescript写法：

//1.data可能为null,undefined , row也可能为null,undefined //2.假设data完整结构 {row:{name:'aaa'}} function getData(data: any){ let name = data?.row?.name }

2.普通写法

//1.data可能为null,undefined , row也可能为null,undefined //2.假设data完整结构 {row:{name:'aaa'}} function getData(data: any){ let name; if (data && data.row) { name = data.row.name } }

从上面写法可以看出来问号点(?.)的写法其实等价于例2的if判断、三元运算符（let a = b == null ? null : b.a）

3、三元运算符

条件？真：假

【本文地址】

公司简介

联系我们

Typescript 中 ？问号的几种不同用法

Typescript 中？问号的几种不同用法