TS可选链原理分析

1.TS可选链

遇到null或者undefined时可以立即停止表达式的运行。

1.1 场景1

const a = { b: 1 };
const val = a?.b;

转化为：

var a = { b: 1 };
var val = a === null || a === void 0 ? void 0 : a.b;

1.2 场景2

if ( a && a.b ) {
}

// 简化
if ( a?.b ) {
}

1.3 场景3

基于索引访问数组元素

function getElement<T>( arr?: T[], index:number = 0 ){
  return arr?.[index];
}

转化为：

function getElement( arr, index ) {
  if (index === void 0) {
    index = 0;
  }
  return arr === null || arr === void 0 ? void 0 : arr[index];
}

1.4 场景4

调用一个可能不存在的方法

function myTry<T>(arr:T[]){
  for( let i = 0; i < arr.length; i++ ){
    (arr[i] as any).customMethod?.();
  }
}

转化为：

function myTry(arr) {
    var _a, _b;
    for ( var i = 0; i < arr.length; i++ ) {
        (_b = (_a = arr[i]).customMethod) === null || _b === void 0 ? void 0 : _b.call(_a);
    }
}