Các kiểu chỉ định toán tử điều hướng an toàn (?.) Hoặc (!.) Và đường dẫn thuộc tính null

Trong Angular2, toán tử an toàn ?.hoạt động, nhưng không hoạt động khi component.tssử dụng TypeScript 2.0. Ngoài ra, toán tử điều hướng an toàn (!.) Không hoạt động.

Ví dụ...

TypeScript này

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

biên dịch sang JavaScript này

if (a.b.c) { }

Nhưng khi tôi chạy nó, tôi gặp lỗi sau:

Không thể đọc thuộc tính 'b' của không xác định

Có cách thay thế nào sau đây không?

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

Kể từ khi TypeScript 3.7 được phát hành, bạn có thể sử dụng chuỗi tùy chọn ngay bây giờ.

Ví dụ về tài sản:

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

Điều này tương đương với:

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

Hơn nữa bạn có thể gọi:

Cuộc gọi tùy chọn

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

otherFn sẽ chỉ được gọi nếu otherFn không bằng null hoặc không xác định

Sử dụng chuỗi tùy chọn trong câu lệnh IF

Điều này:

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

có thể được thay thế bây giờ bằng cái này

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

Tham khảo https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

!là toán tử khẳng định không null (biểu thức sau sửa chữa) - nó chỉ cho biết nhập trình kiểm tra mà bạn chắc chắn rằng akhông phải nullhoặc undefined.

hoạt động a!tạo ra một giá trị thuộc loại acó nullvà undefinedloại trừ

Chuỗi tùy chọn cuối cùng đã được đưa vào bảng chữ ( 3.7 ) 🎉

Toán tử chuỗi tùy chọn ?.cho phép đọc giá trị của một thuộc tính nằm sâu trong chuỗi các đối tượng được kết nối mà không cần phải xác nhận rõ ràng rằng mỗi tham chiếu trong chuỗi là hợp lệ. Các ?.chức năng điều hành tương tự như các .nhà điều hành loạt, ngoại trừ việc thay vì gây ra một lỗi nếu một tài liệu tham khảo là nullish ( nullhoặc undefined), khái niệm ngắn mạch với một giá trị trả về của undefined. Khi được sử dụng với các lệnh gọi hàm, nó sẽ trả về undefinednếu hàm đã cho không tồn tại.

Cú pháp :

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

Chú ý :

Chuỗi tùy chọn không hợp lệ ở phía bên trái của bài tập

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

Cập nhật:

Được lập kế hoạch trong phạm vi bản phát hành 3.7
https://github.com/microsoft/TypeScript/issues/33352

Bạn có thể thử viết một hàm tùy chỉnh như vậy.

Ưu điểm chính của phương pháp này là kiểm tra kiểu và một phần intellisense.

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;
}

Và cách sử dụng (hỗ trợ tối đa 5 tham số và có thể được mở rộng):

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

Ví dụ trên sân chơi .

Một giải pháp thay thế khác sử dụng thư viện bên ngoài là _.has () từ Lodash .

Ví dụ

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

bằng

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

CHỈNH SỬA: Như đã lưu ý trong các nhận xét, bạn sẽ mất khả năng suy luận kiểu của Typecript khi sử dụng phương pháp này. Ví dụ: Giả sử rằng các đối tượng của một người được nhập đúng, người ta sẽ gặp lỗi biên dịch với (a && ab && abz) nếu z không được định nghĩa là một trường của đối tượng b. Nhưng sử dụng _.has (a, 'b.z'), người ta sẽ không gặp lỗi đó.

Một thư viện mới có tên ts-optchain cung cấp chức năng này và không giống như giải pháp của lodash, nó cũng giữ an toàn cho các loại của bạn, đây là ví dụ về cách nó được sử dụng (lấy từ 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'))();

Dựa trên câu trả lời của @ Pvl, bạn cũng có thể bao gồm an toàn loại trên giá trị trả về của mình nếu bạn sử dụng ghi đè:

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;
}

Ví dụ trên sân chơi .