打字稿安全导航操作符(？.)或(!.)和null属性路径

Question

Angular2模板具有安全的运算符(？.),但在component.ts(typescript 2.0)中.安全导航操作员(!)无法正常工作.

例:

这个TypeScript

if (a!.b!.c) { }

编译到这个JavaScript

if (a.b.c) { }

但是当我运行它时,我得到以下错误:

无法读取未定义的属性'b'

还有其他选择:

if (a && a.b && a.b.c) { }

？

Answer 1

自 TypeScript 3.7 发布以来，您现在可以使用可选链。

属性示例：

let x = foo?.bar.baz();

这相当于：

let x = (foo === null || foo === undefined) ?
    undefined :
    foo.bar.baz();

此外，您可以致电：

可选电话

function(otherFn: (par: string) => void) {
   otherFn?.("some value");
}

仅当 otherFn 不等于 null 或 undefined 时才会调用 otherFn

在 IF 语句中使用可选链

这个：

if (someObj && someObj.someProperty) {
    // ...
}

现在可以用这个替换

if (someObj?.someProperty) {
    // ...
}

参考 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

Answer 2

目前在打字稿中没有安全的导航操作员(仍在讨论中).

!.是非空断言运算符 - 它只是说键入检查器,你确定它a不是null或undefined.

更多信息在这里

Answer 3

您可以尝试编写这样的自定义函数.

该方法的主要优点是类型检查和部分智能感知.

export function nullSafe<T, 
    K0 extends keyof T, 
    K1 extends keyof T[K0],
    K2 extends keyof T[K0][K1],
    K3 extends keyof T[K0][K1][K2],
    K4 extends keyof T[K0][K1][K2][K3],
    K5 extends keyof T[K0][K1][K2][K3][K4]>
    (obj: T, k0: K0, k1?: K1, k2?: K2, k3?: K3, k4?: K4, k5?: K5) {
    let result: any = obj;

    const keysCount = arguments.length - 1;
    for (var i = 1; i <= keysCount; i++) {
        if (result === null || result === undefined) return result;
        result = result[arguments[i]];
    }

    return result;
}

和用法(最多支持5个参数,可以扩展):

nullSafe(a, 'b', 'c');

在操场上的例子.

Answer 4

使用外部库另一个替代方案是_.has()从Lodash.

例如

_.has(a, 'b.c')

等于

(a && a.b && a.b.c)