38

I am trying to do optional chaining in Typescript + React Native.

Let's say I have the following interfaces:

interface Bar {
  y: number
}

interface Foo {
  x?: Bar
}

and I try to run the following:

 const test: Foo = {x: {y: 3}};
 console.log(test.x?.y);

VSCode will show an error under the ?. saying the following: Expression expected.ts(1109)

Do you have any idea why this is happening or how should I fix it? Thanks.

Toma Radu-Petrescu
  • 2,152
  • 2
  • 23
  • 57
  • 1
    @TitianCernicova-Dragomir oh damn, didn't know that. Thanks. (si salut! :D) – Toma Radu-Petrescu Feb 09 '19 at 22:46
  • 3
    optional chaining is currently in Stage 1 and the semantics are still being finalized, aswell as the fact that there are some competing proposals. Typescript will not implement anything below stage 3 | OR | may add things to the superset they think have 0% chance of ever becoming valid javascript (I.E static typing) – Shanon Jackson Feb 09 '19 at 22:57
  • 1
    Optional Chaining support might come to TypeScript in version 3.7.0. https://github.com/microsoft/TypeScript/issues/16#issuecomment-515160784 – Justin Noel Aug 08 '19 at 11:03
  • 1
    Optional Chaining is now supported in TypeScript 3.7.0-BETA – R. Gulbrandsen Oct 08 '19 at 07:45

4 Answers4

46

TypeScript 3.7 has been released, but the stable VS Code uses an older version.

Try ⌘ + Shift + p and choosing Select TypeScript Version. If it's not 3.7+, that's the issue. The easiest fix is to install the ms-vscode.vscode-typescript-next extension. It'll provide a nightly TypeScript version for VS Code to use (May require restarting VS Code FYI).

You'll want to remember to remove the extension when VS Code gets TypeScript 3.7+ by default.

See https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions for more details.

Austin
  • 1,369
  • 1
  • 13
  • 19
  • yes this is weird though, I had 3.8, but the compiler was using the local version (3.6) against my choice. Eventually just removed the local typescript and installed a newer version locally – Ayyash Apr 13 '20 at 17:46
18

For those who are wondering, optional chaining (the ? operator) is now available on TypeScript 3.7 (Beta), as of October 2019. You may install that version by running the following command:

npm install typescript@beta

This is how you may use the operator, as explained on the release notes.

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

Which is equivalent to 

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

Apart from Optional Chaining, other interesting features include Nullish Coalescing (the ?? operator).

Update (November 2019)

TypeScript's optional chaining is now officially available. Installing the latest version of typescript should allow you to access the cool new features.

npm install typescript

For those who are using VS Code, please refer to Austin's excellent answer on getting it to work with the new TypeScript version.

For those who are working with WebStorm, you will need to configure TypeScript to use your project's installed TypeScript version. 

Preferences -> Languages & Frameworks -> TypeScript

In addition, if you are using an older version of WebStorm, you may face an error/warning when you try to use the Nullish Coaslescing operator (??). To fix this, you will need to install WebStorm 2019.2.4, or any version that is newer than the above.

wentjun
  • 40,384
  • 10
  • 95
  • 107
0

find the typescript version using the command 

tsc -v

if it didn't match with the workspace version you need to install typescript latest version globally using following commands.

npm install typescript@latest -g

or 

npm update typescript@3.7 -g

Note: this is if you are working on a single project. If You are using multiple projects use the visual studio code extension . thanks @cameron

Najmus Saqib
  • 25
  • 2
  • 4
    I don't recommend installing typescript globally, since it potentially locks every project you're working on into the same version. Instead, you should use the version installed into the local `node_modules` by configuring your editor, referencing it in scripts, or using `$(npm bin)`. – Cameron Little Mar 31 '20 at 10:33
0

So I am on version 4.5.5 in 2022 and I encountered this. For me the problem was the wrong Prettier instaled in vscode, so if you get this error is worth checking the dropdown in the Output console who throws the error, typescript or prettier My issue in 2022

Eduard
  • 732
  • 1
  • 7
  • 20