Наберіть сценарій оператора безпечної навігації (?.) Або (!.) Та обнулі шляхи властивості

У шаблонах Angular2 безпечний оператор ?.працює, але не component.tsвикористовує TypeScript 2.0. Також оператор безпечної навігації (!.) Не працює.

Наприклад...

Цей TypeScript

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

компілює до цього JavaScript

if (a.b.c) { }

Але коли я запускаю його, я отримую наступну помилку:

Неможливо прочитати властивість "b" невизначеного

Чи є альтернатива наступному?

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

З моменту випуску 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 буде викликатися лише в тому випадку, якщо otherFn не буде рівним null або undefined

Використовуйте необов'язковий ланцюжок у операторі IF

Це:

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

тепер можна замінити цим

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

Реф. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

!є ненульовим твердження оператор (вираз поста-фікс) - це просто говорить тип перевірки , що ви впевнені , що aце не nullабо undefined.

операція a!видає значення типу aз nullі undefinedвиключено

Необов’язковий ланцюжок нарешті перетворив його на машинопис ( 3.7 ) 🎉

Необов'язковий оператор ?.ланцюга дозволяє зчитувати значення властивості, розташованої глибоко всередині ланцюга з'єднаних об'єктів, без необхідності чітко підтверджувати, що кожна посилання в ланцюжку є дійсною. В ?.операторі функціонує аналогічно .оператору ланцюгової, за винятком того, що замість того, щоб викликати помилку , якщо посилання nullish ( nullабо undefined) вираз короткого замикання з повертається значенням undefined. При використанні функціональних викликів він повертається, undefinedякщо дана функція не існує.

Синтаксис :

obj?.prop // Accessing object's property
obj?.[expr] // Optional chaining with expressions
arr?.[index] // Array item access with optional chaining
func?.(args) // Optional chaining with function calls

Зверніть увагу :

Необов’язковий ланцюжок недійсний у лівій частині завдання

const object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

Оновлення:

Планується в рамках випуску 3.7
https://github.com/microsoft/TypeScript/isissue/33352

Ви можете спробувати написати подібну функцію.

Основна перевага підходу - перевірка типу та часткова інтелігенція.

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');

Приклад на дитячому майданчику .

Ще одна альтернатива, яка використовує зовнішню бібліотеку - _.has () від Lodash .

Напр

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

дорівнює

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

РЕДАКТУВАННЯ: Як зазначалося в коментарях, при використанні цього методу ви втрачаєте умови вибору типу Typescript. Наприклад, якщо припустимо, що об'єкти належним чином набрані, ви отримаєте помилку компіляції з (a&& ab && abz), якщо z не визначено як поле об'єкта b. Але, використовуючи _.has (a, 'b.z'), ця помилка не з’явиться.

Нова бібліотека під назвою ts-optchain забезпечує цю функціональність, і на відміну від рішення lodash, вона також захищає ваші типи, ось приклад способу її використання (взято з readme):

import { oc } from 'ts-optchain';

interface I {
  a?: string;
  b?: {
    d?: string;
  };
  c?: Array<{
    u?: {
      v?: number;
    };
  }>;
  e?: {
    f?: string;
    g?: () => string;
  };
}

const x: I = {
  a: 'hello',
  b: {
    d: 'world',
  },
  c: [{ u: { v: -100 } }, { u: { v: 200 } }, {}, { u: { v: -300 } }],
};

// Here are a few examples of deep object traversal using (a) optional chaining vs
// (b) logic expressions. Each of the following pairs are equivalent in
// result. Note how the benefits of optional chaining accrue with
// the depth and complexity of the traversal.

oc(x).a(); // 'hello'
x.a;

oc(x).b.d(); // 'world'
x.b && x.b.d;

oc(x).c[0].u.v(); // -100
x.c && x.c[0] && x.c[0].u && x.c[0].u.v;

oc(x).c[100].u.v(); // undefined
x.c && x.c[100] && x.c[100].u && x.c[100].u.v;

oc(x).c[100].u.v(1234); // 1234
(x.c && x.c[100] && x.c[100].u && x.c[100].u.v) || 1234;

oc(x).e.f(); // undefined
x.e && x.e.f;

oc(x).e.f('optional default value'); // 'optional default value'
(x.e && x.e.f) || 'optional default value';

// NOTE: working with function value types can be risky. Additional run-time
// checks to verify that object types are functions before invocation are advised!
oc(x).e.g(() => 'Yo Yo')(); // 'Yo Yo'
((x.e && x.e.g) || (() => 'Yo Yo'))();

Спираючись на відповідь @ Pvl, ви можете включити безпеку типу і для повернутого значення, якщо ви використовуєте переопределення:

function dig<
  T,
  K1 extends keyof T
  >(obj: T, key1: K1): T[K1];

function dig<
  T,
  K1 extends keyof T,
  K2 extends keyof T[K1]
  >(obj: T, key1: K1, key2: K2): T[K1][K2];

function dig<
  T,
  K1 extends keyof T,
  K2 extends keyof T[K1],
  K3 extends keyof T[K1][K2]
  >(obj: T, key1: K1, key2: K2, key3: K3): T[K1][K2][K3];

function dig<
  T,
  K1 extends keyof T,
  K2 extends keyof T[K1],
  K3 extends keyof T[K1][K2],
  K4 extends keyof T[K1][K2][K3]
  >(obj: T, key1: K1, key2: K2, key3: K3, key4: K4): T[K1][K2][K3][K4];

function dig<
  T,
  K1 extends keyof T,
  K2 extends keyof T[K1],
  K3 extends keyof T[K1][K2],
  K4 extends keyof T[K1][K2][K3],
  K5 extends keyof T[K1][K2][K3][K4]
  >(obj: T, key1: K1, key2: K2, key3: K3, key4: K4, key5: K5): T[K1][K2][K3][K4][K5];

function dig<
  T,
  K1 extends keyof T,
  K2 extends keyof T[K1],
  K3 extends keyof T[K1][K2],
  K4 extends keyof T[K1][K2][K3],
  K5 extends keyof T[K1][K2][K3][K4]
  >(obj: T, key1: K1, key2?: K2, key3?: K3, key4?: K4, key5?: K5):
  T[K1] |
  T[K1][K2] |
  T[K1][K2][K3] |
  T[K1][K2][K3][K4] |
  T[K1][K2][K3][K4][K5] {
    let value: any = obj && obj[key1];

    if (key2) {
      value = value && value[key2];
    }

    if (key3) {
      value = value && value[key3];
    }

    if (key4) {
      value = value && value[key4];
    }

    if (key5) {
      value = value && value[key5];
    }

    return value;
}

Приклад на дитячому майданчику .