打字稿中的可选链运算符

Question

In javascript, Optional Chaining Operator is supported by the babel plugin .

But I can't find how to do this in Typescript. Any idea?

Answer 1

At time of writing, TypeScript does not support the optional chaining operator. See discussion on the TypeScript issue tracker: https://github.com/Microsoft/TypeScript/issues/16

As a warning, the semantics of this operator are still very much in flux, which is why TypeScript hasn't added it yet. Code written today against the Babel plugin may change behavior in the future without warning, leading to difficult bugs. I generally recommend people to not start using syntax whose behavior hasn't been well-defined yet.

Answer 2

Update Oct 15, 2019

Support now exists in typescript@3.7.0-beta

Say thanks to https://stackoverflow.com/a/58221278/6502003 for the update!

---

Although TypeScript and the community are in favor of this operator, until TC39 solidifies the current proposal ( which at the time of this writing is at stage 1 ) we will have to use alternatives.

There is one alternative which gets close to optional chaining without sacrificing dev tooling : https://github.com/rimeto/ts-optchain

This article chronicles what the creators were able to achieve in trying to mirror the native chaining operator:

1. Use a syntax that closely mirrors chained property access
2. Offer a concise expression of a default value when traversal fails
3. Enable IDE code-completion tools and compile-time path validation

In practice it looks like this:

import { oc } from 'ts-optchain';

// Each of the following pairs are equivalent in result.
oc(x).a();
x && x.a;

oc(x).b.d('Default');
x && x.b && x.b.d || 'Default';

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

Keep in mind that alternatives like this one will likely be unnecessary once the proposal is adopted by TypeScript.

Also, a big thanks to Ryan Cavanaugh for all the work you are doing in advocating this operator to TC39!

Answer 3

Typescript 3.7 beta has now support for Optional chaining 👍🎉

You can now write code like this:

let x = foo?.bar?.baz;

Answer 4

Since TypeScript 3.7 was released you can use optional chaining now.

Property example:

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

This is equvalent to:

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

Moreover you can call:

Optional Call

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

otherFn will be called only if otherFn won't be equal to null or undefined

Usage optional chaining in IF statement

This:

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

can be replaced now with this

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

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