Why are certain typescript 3.7 features not accessible when targeting ESNext?

Currently, I am utilizing bigint literals within my Angular project which are only available in ESNext. However, it seems that the null-coalescing operator mentioned here is not accessible when targeting ESNext.

this._id = id ?? Util.makeGuid()

This line of code is generating an error TS1109 : Expression expected during compilation and a red squiggly line appears under the second question mark.

I find this perplexing. Isn't ESNext supposed to target the latest version of JavaScript? Why aren't these new features available?

As an illustration, you can test this code in the TypeScript playground, where it runs smoothly when set to V3.7.2 and targets ES2017.

class Foo {
    name: string;
    constructor(name?: string) {
        this.name = name ?? "I am Foo";
    }
}

let f = new Foo();
alert(f.name);

However, if you switch the "Config" tab to target ESNext, the code will fail with a syntax error in the console.

The version of Chrome I am using is:

Google Chrome is up to date
Version 79.0.3945.130 (Official Build) (64-bit)

For any skeptics, here are some screenshots:
https://i.sstatic.net/6SuXe.png

Answer №1

Why aren't the new features available in ESNext, even though it's supposed to target the latest javascript version?

The error code `TS1109` indicates that the compiler used didn't recognize the TypeScript syntax because it is not supported in that particular version. As a result, the compiler rejected the TypeScript code as invalid before determining which JavaScript version should be used for transpilation.

targeting ESNext

The `--module` compiler option influences how the output JavaScript code is generated by a compiler that was able to transpile the TypeScript code. Specifically, it affects the module code generation.

To enable support for the nullish coalescing operator, you need to install TypeScript version 3.7.x and ensure that your development environment (e.g., Visual Studio or Visual Studio Code) uses this version for your project. Follow the steps mentionedhere.

P.S.
Upon reviewing the `class Foo` code you provided, I found that using TypeScript compiler version 3.6.3 triggers a syntax error, which manifests as a red squiggly line under the second question mark when checked in the playground.

a little red squigly under the second question mark.

However, with the compiler set to version 3.7.2, the code compiles successfully with no issues when the Module setting under Config is set to any option including ESNext.

demonstrates this problem in TypeScript playground when version is set to 3.72 and target is set to ESNext

While using Chrome version 79.0.3945.13, I was unable to reproduce the issue you encountered in the TypeScript playground. It may be a compatibility issue between the playground and your browser.

P.P.S.

Try setting not the module setting but the target setting to ESNext

Changing the Target setting to ESNext will not impact how the compiler handles TypeScript code. With Target=ESNext, the nullish coalescing operator is accepted with TypeScript version 3.7.2 and rejected with version 3.6.3. Although the compiler can transpile TypeScript into JavaScript without errors, running the code may trigger a runtime error due to the lack of browser support for ESNext features.

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

Developing JSON objects with Typescript

What is the best approach to generate and store an array of JSON objects when a new item is added? The issue I am currently facing is: Is it necessary to create a class object before saving JSON objects, or can they be saved directly? What method shoul ...

Enhancing the aesthetic appeal of Angular2 Google Maps

Hey there, I'm a newcomer to Angular2/Typescript and I've been working on styling a map in my Angular2 project. I integrated a map using the Angular2 Google Maps Components, but I'm having trouble with applying styles through the undocumente ...

Error: Can't access the 'http' property because it's undefined in Angular 2

Recently, I successfully integrated the gapi client into my Angular 2 application. However, I am now facing an issue where my http object is showing as undefined and I can't seem to figure out why. Here's the snippet of code that's causing ...

What steps do I need to take to deploy an Angular 4, instead of Angular 2, application on IIS

Despite numerous attempts, I struggled to run a simple "Hello world" application in Angular 4 on IIS. All my efforts resulted in a blank page with no errors. The only successful methods I found were: 1- Building the application using the "ng build" CLI ...

Normal arrays and arrays generated by back-ticks both serve the same purpose of storing multiple values

There are two methods I am using to create an array. The first method involves creating an array in a traditional way. The second method involves creating an array using backticks function. let array=["1234"]; function createArrayByBakticks(obj) { re ...

NPM: There are no valid TypeScript file rules specified

Currently working on a small project using React.JS. Whenever I execute : npm run start, the following message gets logged: Starting type checking and linting service... Using 1 worker with 2048MB memory limit Watching: /Users/John/Projects/myProject/src ...

Bringing in the Ionic ToastController to a TypeScript class

I'm unsure if it's feasible or wise, but I am currently developing an Ionic 3 project and I want to encapsulate "Toast" functionality within a class so that I can define default values and access it from any part of the application. Is there a ...

Submitting information to a server

I have a simple Angular 6 app with follow and unfollow buttons. When you click follow, the number increases. I want to save these follower numbers to a JSON server. Here is the link to the JSON server documentation: JSON Server Documentation To see a dem ...

Requesting Next Page via Angular GET Method for Paginated API

Having trouble loading data from a paginated REST API using the code below. Any suggestions for a better approach are welcome! component.ts import { Component, OnInit } from '@angular/core'; import {HttpClient} from '@angular/common/http&a ...

Issue encountered when attempting to deploy a node/express API with now.sh

Currently, I am in the process of deploying a node/express API with multiple endpoints on now.sh. I am seeking guidance on properly configuring the now.json file for this deployment. In order to provide a visual representation of my project's comple ...

TSX implementation of a paginator with an ellipse in the center

Looking to add ellipses in the Pagination, specifically when there are more than 10 pages (e.g., 1 2 3 4 ... 11 12 13 14). I've tried various methods but need guidance as a beginner. Can anyone suggest changes based on my code to help me achieve this? ...

Tips for testing a mapbox popup using jasmine testing?

I encountered an issue with my mapbox popup while using jasmine and attempting to write a unit test for it. Here is the function in question: selectCluster(event: MouseEvent, feature: any) { event.stopPropagation(); this.selectedCluster = {geo ...

Tips for resolving SyntaxError: Unable to utilize import when integrating Magic with NextJS in a Typescript configuration

Looking to integrate Magic into NextJS using TypeScript. Following a guide that uses JavaScript instead of TypeScript: https://github.com/magiclabs/example-nextjs Encountering an issue when trying to import Magic as shown below: import { Magic } from &qu ...

Retrieving the keys from an object that has already been entered and converting them into types in TypeScript

const obj1 = { foo: 'bar', goo: 'car', hoo: 'dar', ioo: 'far' } as const const obj2 = { koo: 'gar', loo: 'har', moo: 'jar', noo: 'kar' } as con ...

Creating an instance of a class using a class decorator, with or without the 'new'

Seeking alternatives to creating class instances without using the new keyword in TypeScript, I came across this excellent solution that works seamlessly in JavaScript. The code found in the repository mentioned https://github.com/digital-flowers/classy- ...

Encountering problem with '@datadog/browser-rum' compilation related to the 'allowedTracingOrigins' attribute

I'm facing a typing problem with the @datadog/browser-rum library: Error: node_modules/@datadog/browser-rum-core/src/domain/configuration.ts:100:3 error TS2322: Type '{ applicationId: string; version: string; actionNameAttribute: string; premium ...

The global declaration of Typescript is only accessible within the node_modules/@types directory

Scenario As I develop an npm package using Typescript, I include types that are shipped alongside the library in the following structure: my-package |- index.js |- index.d.ts |- package.json The index.d.ts file includes global declarations like: declare ...

include the ReactToastify.css file in your project using the import statement

Error in file path C:\Users\User\Documents\GitHub\zampliasurveys_frontend\node_modules\react-toastify\dist\ReactToastify.css:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){:ro ...

Implementing an import statement in an Electron renderer script

After following the Electron typescript quick-start code structure by cloning the repo, everything worked fine. However, when attempting to split my code into multiple .ts files and import them into the renderer script, I encountered an issue. Upon adding ...

Struggling with parsing JSON in TypeScript/React because of type issues

Upon receiving an API response, I would like to parse the data since it is in the form of an array of objects. Here's an example of how the JSON looks: { "totalSize": "56", "sortedKeys": [ { & ...