33

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

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

cwtuan
  • 1,718
  • 1
  • 18
  • 20

3 Answers3

20

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.

Ryan Cavanaugh
  • 209,514
  • 56
  • 272
  • 235
  • I'm sorry but I'm genuinely curious, how can the syntax of something like "user.address?.street" ever really change at this point? You have a question-mark before the period to check if address is not null before you check for a street. Sure maybe some behind the scenes code might change, but for a user implementing this -what could go wrong? No offense I'm just really curious – SeanMC Jul 20 '18 at 14:10
  • See https://github.com/tc39/proposal-optional-chaining/issues/51 , https://github.com/tc39/proposal-optional-chaining/issues/3 , https://github.com/tc39/proposal-optional-chaining/issues/65 for examples – Ryan Cavanaugh Jul 23 '18 at 03:28
  • 2
    any news, one year later? – Daniel Santos Sep 05 '18 at 12:00
  • 3
    The TC39 committee is *still* arguing about syntax and behavior – Ryan Cavanaugh Sep 05 '18 at 15:09
  • 1
    I'll just mention here in case you are interested — there are a few utility _functions_ that try to offer a typesafe alternative now, like [typesafe-get](https://github.com/pimterry/typesafe-get), [optional-chain](https://github.com/yayoc/optional-chain) and (my) [get-optional](https://github.com/noppa/get-optional). None of them is the same as a natively supported operator, of course, but they could be helpful anyway. – noppa Sep 05 '18 at 22:31
  • just minor comment against your statement "in the future **without warning**". I don't think they (the babel team) will ever change the behaviour without warning – Sang Oct 27 '18 at 07:39
  • 1
    You have to consider the case where you say "Oh, all our runtimes support all the syntactic features we were using, so we can turn off downleveling" and you end up getting different behavior – Ryan Cavanaugh Nov 03 '18 at 13:40
  • SUPPORT IS HERE! See https://stackoverflow.com/a/58221278/6502003 – protoEvangelion Oct 15 '19 at 22:13
12

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!

protoEvangelion
  • 4,355
  • 2
  • 29
  • 38
  • As a bonus if you'd like to fix VS Code linting which uses typescript, point to a typescript v >= 3.7.0-beta in `settings.json` with `"typescript.tsdk": "${npm global dir}/lib/node_modules/typescript/lib"` – protoEvangelion Oct 15 '19 at 22:12
6

Typescript 3.7 beta has now support for Optional chaining

You can now write code like this:

let x = foo?.bar?.baz;
José Salgado
  • 981
  • 10
  • 25