Enhanced assistance for optional chaining operator available in Visual Studio Code

React Native 0.56 now supports the Optional Chaining Operator with ?.

Unfortunately, the latest stable version of VS Code does not recognize this syntax and displays a TypeScript validation error:

[ts] Expression expected.

No compile-time or eslint errors are shown.

How can I resolve this issue?

Updated on 2019/12/11:

Optional chaining is officially supported by TypeScript version 3.7!

If you still encounter this error, it might be because the TypeScript library in your VSCode is below version 3.7.

You can easily fix this by installing a newer version of TypeScript (>= 3.7) as a dev dependency in your workspace (via npm or yarn).

Then, go to the command palette, type tstv, and switch the TypeScript version used for JS and TS features from VS Code's Version to Workspace's Version (ensure it's >= 3.7) and you're all set!

This feature is truly amazing - thank you all and happy coding!

typescriptvisual-studio-codebabeljs

Answer №1

Visual Studio Code version 1.41 has introduced support for optional chaining in JavaScript and TypeScript files. This feature includes syntax highlighting and IntelliSense.

If you are using VS Code 1.41 or later and encounter issues with optional chaining, consider the following troubleshooting steps:

  • Review your installed extensions to ensure they fully support optional chaining, as certain extensions may not recognize this feature causing errors or incorrect syntax highlighting

  • If you have configured a workspace typescript version, verify that it is at least TypeScript 3.7+

Answer №2

To experience the latest features, consider installing JavaScript and TypeScript Nightly from the Visual Studio Marketplace. After installation, remember to restart VSCode.

Answer №3

After troubleshooting, I successfully resolved the issue by disabling js/ts validation in vscode json settings:

"javascript.validate.enable": false

It may be necessary to add eslint-plugin-babel for eslint rules.

{
  "plugins": [
    "babel"
  ],
  "rules": {
    "babel/new-cap": 1,
    "babel/camelcase": 1,
    "babel/no-invalid-this": 1,
    "babel/object-curly-spacing": 1,
    "babel/quotes": 1,
    "babel/semi": 1,
    "babel/no-unused-expressions": 1,
    "babel/valid-typeof": 1
  }
}

Answer №4

Until I removed the extension JavaScript and TypeScript IntelliSense, this issue persisted for me.

If you're still facing the problem, consider uninstalling old plugins. You could also experiment with the vscode insiders version to see if that resolves it. In my case, it worked seamlessly without any additional modifications needed.

Answer №5

To enhance my code, I must include the 

"tslint-config-prettier"
in the tslint.json configuration file

This snippet shows part of my tslint.json setup

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-prettier"  # ----> This line
  ],
  "jsRules": {},
  "rules": {
    "semicolon": false,
    "quotemark": [true, "single"],
    "prefer-for-of": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "interface-name": false,
    "callable-types": false,
    "no-console": false,
    "no-bitwise": false,
    "variable-name": [
      true,
      "allow-leading-underscore",
      "allow-snake-case"
    ]
  },
  "rulesDirectory": []
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular2 Uniqueness Validator: Ensuring Data Integrity

Within my Angular2 form field, I am trying to ensure that the inputted value does not already exist. The challenge lies in accessing instance members within my custom validator function, codeUnique(). Upon execution, "this" refers to either FormControl o ...

angulartypescript

Tips for incorporating a svg file into your React project

I am facing an issue with my custom React, Typescript, and Webpack project. I am trying to import a basic .svg file and utilize it in one of my components. However, Typescript is throwing the following error: Cannot find module I have tried installing s ...

reactjstypescriptsvgwebpackimport

The "ng2-CKEditor" package is experiencing compatibility issues with TypeScript in Angular 2

Currently, I am in the process of setting up CKEditor in my angular2 application. My backend platform is node.js and for this purpose, I am utilizing the ng2-CKEditor npm module. Below, you can find snippets from respective files. index.html:: <html& ...

node.jsangulartypescriptckeditormean-stack

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

I'm currently using Angular in combination with the highcharts boxplot API. While I am aware that I can manually set the max value of the y-axis in the chart configuration, such as: max: 100, tickInterval: 10. There's now a need for me to dynami ...

javascriptangulartypescripthighchartsboxplot

Utilize an Angular HttpInterceptor to invoke a Promise

I have an angular HttpInterceptor and I am in need of invoking an encryption method that is defined as follows: private async encrypt(obj: any): Promise<string> { However, I am unsure of how to handle this within the HttpInterceptor: intercept(req ...

angulartypescriptobservablees6-promise

Maximizing Jest's potential with multiple presets in a single configuration file/setup

Currently, the project I am working on has Jest configured and testing is functioning correctly. Here is a glimpse of the existing jest.config.js file; const ignores = [...]; const coverageIgnores = [...]; module.exports = { roots: ['<rootDir&g ...

javascriptnode.jstypescriptamazon-dynamodbjestjs

What steps are necessary to integrate barrel file imports with my Angular 2 application?

Following the Angular 2 style guideline 04-10 Create and Import Barrels can be challenging, as it may lead to unexpected file loading issues. When running my app, I noticed that Angular attempts to load a non-existent file named "my-component-name-here.js" ...

angulartypescriptsystemjs

"Resulting in 'undefined' due to an asynchronous function call

Encountering an issue with async method implementation. In my authServices, there is a loginWithCredential function which is asynchronous: async loginWithCredential(username, password){ var data = {username: username, password: password}; api.pos ...

typescriptreact-nativepromiseecmascript-6

In TypeScript, an interface property necessitates another property to be valid

In the scenario where foo is false, how can I designate keys: a, b, c, bar as having an undefined/null/optional type? Put simply, I require these properties to be classified as mandatory only when foo is true. interface ObjectType { foo: boolean; a: nu ...

javascriptangularjsreactjstypescriptredux

Struggling with TypeScript compilation in a Vue.js project? Encounter error code TS2352

Here is my code snippet from window.ts import Vue from 'vue' interface BrowserWindow extends Window { app: Vue } const browserWindow = window as BrowserWindow export default browserWindow Encountering a compilation error Error message: TS2 ...

typescriptvue.jswebpack

Attempting to map an object, however it is showing an error stating that the property 'title' does not exist on type 'never'

While attempting to retrieve data from the Bloomberg API, I encountered an issue when trying to extract the title from the response object. The error message received was: Property 'title' does not exist on type 'never'. Below is the co ...

typescriptnext.js

Adding animation to rows in ngx-datatable: A Guide

I am looking to stack the rows of my data table (ngx) one after the other in a vertical fashion. I want to incorporate [@datatableAnimation], but I'm unsure where to place it. When adding it to <ngx-datatable [@datatableAnimation]>, it only af ...

angulartypescriptngx-datatable

The declaration module in Typescript with and without a body

I am facing an issue with importing a .mdx file. When I include the following in my mdx.d.ts: /// <reference types="@mdx-js/loader" /> import { ComponentType } from "react"; declare module '*.mdx' { const Component: ...

typescriptmdxjs

The best approach for sending parameters to the parent class in TypeScript for optimal efficiency

What's the optimal solution to this problem? I really appreciate how we can specify attributes in the constructor and TypeScript takes care of handling everything to assign values to the props in JavaScript - like I did with 'department' her ...

javascripttypescriptoopinheritance

Typescript Declarations for OpenLayers version 6

The package @types/openlayers found at https://www.npmjs.com/package/@types/openlayers only provides type definitions for version 4.6 of OpenLayers. This is clearly stated in the top comment within the file index.d.ts. If types for OpenLayers 6 are not av ...

typescriptnpmopenlayersopenlayers-6

Troubleshooting issue with getServerSideProps not functioning in Next.js while utilizing Next-redux-wrapper and TypeScript

When attempting to trigger an action as outlined in the documentation using the getServerSideProps function with the help of next-redux-wrapper store and redux-thunk, I am encountering the following TypeScript error: ts(2322): Type '({ req }: GetServe ...

typescriptreduxnext.jsredux-thunknext-redux-wrapper

Angular 5 is throwing an error that says: "There is a TypeError and it cannot read the property 'nativeElement' because it

Being aware that I may not be the first to inquire about this issue, I find myself working on an Angular 5 application where I need to programmatically open an accordion. Everything seems to function as expected in stackblitz, but unfortunately, I am enco ...

javascriptangulartypescript

What could be causing the malfunction of getter/setter in a Vue TypeScript class component?

Recently delving into the world of vue.js, I find myself puzzled by the unexpected behavior of the code snippet below: <template> <page-layout> <h1>Hello, Invoicer here</h1> <form class="invoicer-form"> ...

typescriptvue.jsvue-class-components

Guide on setting up @types from an NPM module containing the "@" symbol in its title

Installing the node package is easy npm install @gamestdio/timer --save But when attempting to add the corresponding types npm install @types/@gamestdio/timer --save An error occurs Invalid package name "@types/": name can only include URL-friendly ch ...

node.jstypescriptnpm

Error in vue3 with typescript: unable to assign a ComputeRef<number[]> argument to an iterable<number> in d3.js

This code snippet was originally sourced from an example at https://medium.com/@lambrospd/5-simple-rules-to-data-visualization-with-vue-js-and-d3-js-f6b2bd6a1d40 I attempted to adapt the example to a TypeScript/Vue 3 version, and below is my implementatio ...

typescriptvuejs3