Bản in hiện tại (hoặc có kế hoạch) hỗ trợ toán tử điều hướng an toàn của?.

I E:

var thing = foo?.bar
// same as:
var thing = (foo) ? foo.bar : null;

Ngoài ra, có một tên phổ biến hơn cho nhà điều hành này (thật khó để tìm kiếm google).

Cập nhật : nó được hỗ trợ kể từ TypeScript 3.7 và được gọi là Chuỗi tùy chọn : https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chained

Tôi không thể tìm thấy bất kỳ tài liệu tham khảo nào trong đặc tả ngôn ngữ TypeScript .

Theo như cách gọi toán tử này trong CoffeeScript, thì nó được gọi là toán tử hiện sinh (cụ thể là "biến thể truy cập" của toán tử hiện sinh).

Từ tài liệu của CoffeeScript về Người vận hành :

Biến thể truy cập của toán tử hiện sinh ?.có thể được sử dụng để thu thập các tham chiếu null trong một chuỗi các thuộc tính. Sử dụng nó thay cho bộ truy cập dấu chấm .trong trường hợp giá trị cơ sở có thể là null hoặc không xác định .

Vì vậy, biến thể truy cập của toán tử hiện sinh dường như là cách thích hợp để tham chiếu đến toán tử này; và TypeScript hiện không xuất hiện để hỗ trợ nó (mặc dù những người khác đã bày tỏ mong muốn về chức năng này ).

Không đẹp như một?, Nhưng nó hoạt động:

var thing = foo && foo.bar || null;

Bạn có thể sử dụng bao nhiêu && tùy thích:

var thing = foo && foo.bar && foo.bar.check && foo.bar.check.x || null;

Điều này được định nghĩa trong đặc tả Chuỗi tùy chọn ECMAScript, vì vậy có lẽ chúng ta nên tham khảo chuỗi tùy chọn khi chúng ta thảo luận về điều này. Có khả năng thực hiện:

const result = a?.b?.c;

Cái dài và ngắn của cái này là nhóm TypeScript đang chờ đặc tả ECMAScript được thắt chặt, do đó việc triển khai của chúng có thể không bị phá vỡ trong tương lai. Nếu họ thực hiện một cái gì đó ngay bây giờ, cuối cùng sẽ cần những thay đổi lớn nếu ECMAScript xác định lại đặc điểm kỹ thuật của họ.

Xem thông số kỹ thuật Chaining tùy chọn

Trong trường hợp thứ gì đó sẽ không bao giờ là JavaScript tiêu chuẩn, nhóm TypeScript có thể triển khai khi họ thấy phù hợp, nhưng đối với các bổ sung ECMAScript trong tương lai, họ muốn duy trì ngữ nghĩa ngay cả khi họ cấp quyền truy cập sớm, vì họ có rất nhiều tính năng khác.

Đường cắt ngắn

Vì vậy, tất cả các toán tử vui nhộn của JavaScripts đều có sẵn, bao gồm các chuyển đổi loại như ...

var n: number = +myString; // convert to number
var b: bool = !!myString; // convert to bool

Giải pháp thủ công

Nhưng trở lại câu hỏi. Tôi có một ví dụ khó hiểu về cách bạn có thể làm một điều tương tự trong JavaScript (và do đó là TypeScript) mặc dù tôi chắc chắn không gợi ý nó là một tính năng duyên dáng như tính năng bạn thực sự theo đuổi.

(foo||{}).bar;

Vì vậy, nếu foolà undefinedkết quả là undefinedvà nếu foođược định nghĩa và có một tài sản có tên barmà có một giá trị, kết quả là giá trị đó.

Tôi đặt một ví dụ trên JSFiddle .

Điều này có vẻ khá sơ sài cho các ví dụ dài hơn.

var postCode = ((person||{}).address||{}).postcode;

Chức năng chuỗi

Nếu bạn đang mong muốn một phiên bản ngắn hơn trong khi thông số kỹ thuật vẫn còn trong không khí, tôi sử dụng phương pháp này trong một số trường hợp. Nó đánh giá biểu thức và trả về mặc định nếu chuỗi không thể thỏa mãn hoặc kết thúc null / không xác định (lưu ý điều !=quan trọng ở đây, chúng tôi không muốn sử dụng !==vì chúng tôi muốn một chút tung hứng tích cực ở đây).

function chain<T>(exp: () => T, d: T) {
    try {
        let val = exp();
        if (val != null) {
            return val;
        }
    } catch { }
    return d;
}

let obj1: { a?: { b?: string }} = {
    a: {
        b: 'c'
    }
};

// 'c'
console.log(chain(() => obj1.a.b, 'Nothing'));

obj1 = {
    a: {}
};

// 'Nothing'
console.log(chain(() => obj1.a.b, 'Nothing'));

obj1 = {};

// 'Nothing'
console.log(chain(() => obj1.a.b, 'Nothing'));

obj1 = null;

// 'Nothing'
console.log(chain(() => obj1.a.b, 'Nothing'));

Cập nhật: Có nó được hỗ trợ ngay bây giờ!

Nó vừa được phát hành với TypeScript 3.7: https://devbloss.microsoft.com/typescript/announcing-typescript-3-7/

Nó được gọi là chuỗi tùy chọn : https://devbloss.microsoft.com/typescript/announcing-typescript-3-7/#optional-chained

Với nó như sau:

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

tương đương với:

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

Câu trả lời cũ

Có một yêu cầu tính năng mở cho điều này trên github nơi bạn có thể nói lên ý kiến ​​/ mong muốn của mình: https://github.com/Microsoft/TypeScript/issues/16

Chỉnh sửa ngày 13 tháng 11 năm 2019!

Kể từ ngày 5 tháng 11 năm 2019, TypeScript 3.7 đã xuất xưởng và giờ đây nó hỗ trợ?. toán tử xích tùy chọn 🎉🎉🍾🍾🎉 !!!

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chained

Chỉ dành cho mục đích lịch sử:

Chỉnh sửa: Tôi đã cập nhật câu trả lời nhờ bình luận của fracz.

TypeScript 2.0 được phát hành !.Nó không giống như ?.(Bộ điều hướng an toàn trong C #)

Xem câu trả lời này để biết thêm chi tiết:

https://stackoverflow.com/a/38875179/1057052

Điều này sẽ chỉ cho trình biên dịch biết rằng giá trị không phải là null hoặc không xác định. Điều này sẽ không kiểm tra nếu giá trị là null hoặc không xác định.

Toán tử xác nhận TypeScript Non-null

// Compiled with --strictNullChecks
function validateEntity(e?: Entity) {
    // Throw exception if e is null or invalid entity
}

function processEntity(e?: Entity) {
    validateEntity(e);
    let s = e!.name;  // Assert that e is non-null and access name
}

Toán tử chuỗi tùy chọn Elvis (?.) Được hỗ trợ trong TypeScript 3.7.

Bạn có thể sử dụng nó để kiểm tra giá trị null: cats?.miowstrả về null nếu mèo là null hoặc không xác định.

Bạn cũng có thể sử dụng nó để gọi phương thức tùy chọn: cats.doMiow?.(5)sẽ gọi doMiow nếu nó tồn tại.

Truy cập tài sản cũng có thể : cats?.['miows'].

Tham khảo: https://devbloss.microsoft.com/typescript/announcing-typescript-3-7-beta/

Toán tử ?.không được hỗ trợ trong TypeScript phiên bản 2.0 .

Vì vậy, tôi sử dụng chức năng sau đây:

export function o<T>(someObject: T, defaultValue: T = {} as T) : T {
    if (typeof someObject === 'undefined' || someObject === null)
        return defaultValue;
    else
        return someObject;
}

việc sử dụng trông như thế này:

o(o(o(test).prop1).prop2

Ngoài ra, bạn có thể đặt giá trị mặc định:

o(o(o(o(test).prop1).prop2, "none")

Nó hoạt động thực sự tốt với IntelliSense trong Visual Studio.

Cuối cùng cũng đến rồi!

Đây là vài ví dụ:

// properties
foo?.bar
foo?.bar()
foo?.bar.baz()
foo?.bar?.baz()

// indexing
foo?.[0]
foo?.['bar']

// check if a function is defined before invoking
foo?.()
foo.bar?.()
foo?.bar?.()

Nhưng nó không hoạt động chính xác như giả định của bạn.

Thay vì đánh giá

foo?.bar

với đoạn mã nhỏ này, tất cả chúng ta đều quen viết

foo ? foo.bar : null

nó thực sự đánh giá

(foo === null || foo === undefined) ?
    undefined :
    foo.bar

hoạt động cho tất cả các giá trị falsey như một chuỗi rỗng, 0 hoặc sai.

Tôi chỉ không có một lời giải thích về lý do tại sao họ không biên dịch nó thành foo == null

Chúng tôi đã tạo phương thức sử dụng này trong khi làm việc trên Phonetradr , có thể cung cấp cho bạn quyền truy cập an toàn kiểu vào các thuộc tính sâu với Bản in:

/**
 * Type-safe access of deep property of an object
 *
 * @param obj                   Object to get deep property
 * @param unsafeDataOperation   Function that returns the deep property
 * @param valueIfFail           Value to return in case if there is no such property
 */
export function getInSafe<O,T>(obj: O, unsafeDataOperation: (x: O) => T, valueIfFail?: any) : T {
    try {
        return unsafeDataOperation(obj)
    } catch (error) {
        return valueIfFail;
    }
}

//Example usage:
getInSafe(sellTicket, x => x.phoneDetails.imeiNumber, '');

//Example from above
getInSafe(foo, x => x.bar.check, null);

Nói chung, tôi không khuyên bạn nên sử dụng phương pháp này (coi chừng các lo ngại về hiệu suất), nhưng bạn có thể sử dụng toán tử trải rộng để sao chép một đối tượng nông, sau đó bạn có thể truy cập vào thuộc tính.

 const person = { personId: 123, firstName: 'Simon' };
 const firstName = { ...person }.firstName;

Điều này hoạt động vì loại 'FirstName' được 'truyền bá' thông qua.

Tôi sẽ sử dụng điều này thường xuyên nhất khi tôi có một find(...)biểu thức có thể trả về null và tôi cần một thuộc tính duy nhất từ ​​nó:

 // this would cause an error (this ID doesn't exist)
 const people = [person];
 const firstName2 = people.find(p => p.personId == 999).firstName;

 // this works - but copies every property over so raises performance concerns
 const firstName3 = { ...people.find(p => p.personId == 999) }.firstName;

Có thể có một số trường hợp cạnh với cách sắp xếp kiểu chữ và kiểu này sẽ không được biên dịch, nhưng điều này thường sẽ hoạt động.

Nó được gọi là chuỗi tùy chọn và nó trong Bản in 3.7

Chuỗi tùy chọn cho phép chúng tôi viết mã nơi chúng tôi có thể ngay lập tức ngừng chạy một số biểu thức nếu chúng tôi chạy vào null hoặc không xác định

Như đã trả lời trước đó, hiện tại nó vẫn đang được xem xét nhưng nó đã chết trong nước vài năm rồi.

Dựa trên các câu trả lời hiện có, đây là phiên bản thủ công ngắn gọn nhất mà tôi có thể nghĩ ra:

jsfiddle

function val<T>(valueSupplier: () => T): T {
  try { return valueSupplier(); } catch (err) { return undefined; }
}

let obj1: { a?: { b?: string }} = { a: { b: 'c' } };
console.log(val(() => obj1.a.b)); // 'c'

obj1 = { a: {} };
console.log(val(() => obj1.a.b)); // undefined
console.log(val(() => obj1.a.b) || 'Nothing'); // 'Nothing'

obj1 = {};
console.log(val(() => obj1.a.b) || 'Nothing'); // 'Nothing'

obj1 = null;
console.log(val(() => obj1.a.b) || 'Nothing'); // 'Nothing'

Nó chỉ đơn giản là thất bại trong lỗi thiếu tài sản. Nó rơi trở lại cú pháp tiêu chuẩn để xác định giá trị mặc định, cũng có thể được bỏ qua hoàn toàn.

Mặc dù điều này hoạt động cho các trường hợp đơn giản, nhưng nếu bạn cần các công cụ phức tạp hơn như gọi hàm và sau đó truy cập vào một thuộc tính trên kết quả, thì bất kỳ lỗi nào khác cũng bị nuốt. Thiết kế xấu.

Trong trường hợp trên, một phiên bản tối ưu hóa của câu trả lời khác được đăng ở đây là tùy chọn tốt hơn:

jsfiddle

function o<T>(obj?: T, def: T = {} as T): T {
    return obj || def;
}

let obj1: { a?: { b?: string }} = { a: { b: 'c' } };
console.log(o(o(o(obj1).a)).b); // 'c'

obj1 = { a: {} };
console.log(o(o(o(obj1).a)).b); // undefined
console.log(o(o(o(obj1).a)).b || 'Nothing'); // 'Nothing'

obj1 = {};
console.log(o(o(o(obj1).a)).b || 'Nothing'); // 'Nothing'

obj1 = null;
console.log(o(o(o(obj1).a)).b || 'Nothing'); // 'Nothing'

Một ví dụ phức tạp hơn:

o(foo(), []).map((n) => n.id)

Bạn cũng có thể đi theo con đường khác và sử dụng một cái gì đó như Lodash ' _.get(). Nó ngắn gọn, nhưng trình biên dịch sẽ không thể đánh giá tính hợp lệ của các thuộc tính được sử dụng:

console.log(_.get(obj1, 'a.b.c'));

Chưa (kể từ tháng 9 năm 2019), nhưng vì "nhà điều hành điều hướng an toàn" hiện đang ở Giai đoạn 3 , nên nó được triển khai trong TypeScript.

Xem vấn đề này để cập nhật:

https://github.com/microsoft/TypeScript/issues/16

Một số động cơ có triển khai sớm:

Công ty cổ phần: https://bugs.webkit.org/show_orms.cgi?id=200199

V8: https://bugs.chromium.org/p/v8/issues/detail?id=9553

SM: https://ormszilla.mozilla.org/show_orms.cgi?id=1566143

(thông qua https://github.com/tc39/proposed-optional-chained/issues/115#su-475422578 )

Bạn có thể cài đặt một plugin để hỗ trợ ngay bây giờ:

npm install --save-dev ts-optchain

Trong tsconfig.json của bạn:

// tsconfig.json
{
    "compilerOptions": {
        "plugins": [
            { "transform": "ts-optchain/transform" },
        ]
    },
}

Tôi hy vọng câu trả lời này sẽ hết hạn trong 6 tháng tới hoặc lâu hơn, nhưng hy vọng nó sẽ giúp được ai đó trong lúc này.

_.get(obj, 'address.street.name')hoạt động tuyệt vời cho JavaScript khi bạn không có loại. Nhưng đối với TypeScript, chúng ta cần toán tử Elvis thực sự!