Menu
In javascript, Optional Chaining Operator is supported by the babel plugin.
But I can't find how to do this in Typescript. Any idea?
692
The optional chaining operator ( ?. ) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
You must tell TypeScript if a property is optional. First, if you don't tell TypeScript that a property is optional, it will expect it to be set. Adding ? to the property name on a type, interface, or class definition will mark that property as optional.
Optional chaining is a process for querying and calling properties, methods, and subscripts on an optional that might currently be nil . If the optional contains a value, the property, method, or subscript call succeeds; if the optional is nil , the property, method, or subscript call returns nil .
Optional chaining was introduced in ES2020. According to TC39 it is currently at stage 4 of the proposal process and is prepared for inclusion in the final ECMAScript standard. This means that you can use it, but note that older browsers may still require polyfill usage.
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.
100
Support now exists in [email protected]
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:
- Use a syntax that closely mirrors chained property access
- Offer a concise expression of a default value when traversal fails
- 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!
12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
