0
点赞
收藏
分享

微信扫一扫

Typescript ?问号的几种不同用法


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、三元运算符
条件 ?真 :假

问号+点表达式 (可选链操作符:?.)
例如 let res = obj?.arr?.length 等价于 let res = obj && obj.arr && obj.arr.length

如果不加问号,光是 obj.arr.length,可能报错没有 'length' 这个属性,如图:

因此有时做判断时,可用可选链操作符 "?." 来判断,这样后面一层读不到的话就会返回一个 undefined,然后隐式转换为 false ,而不是报错。通常配合双问号表达式 (??) 使用。如图:

双问号表达式 (??)
这个意思是说如果 "??" 左边的表达式为 null 或者 undefined 的时候,返回表达式右边的值。

例如 obj?.arr?.length ?? "right"   // return "right",

举报

相关推荐

0 条评论