Encountering a Typescript TypeError in es2022 that is not present in es2021

I'm attempting to switch the target property in the tsconfig.json file from es2015 to es2022, but I am encountering an error while running tests that seem to only use tsc without babel:

Chrome Headless 110.0.5481.177 (Mac OS 10.15.7) TypeError: Cannot read properties of undefined (reading 'getSomeValue')

This is the code snippet causing the issue:

export class MyService {
    private xyz$ = this.otherService.getSomeValue().pipe(...

    constructor(private readonly otherService: SettingsService) {}
}

I suspect the error may be related to the new class fields features introduced in es2022, but I am unsure why it would be a problem in this scenario. It was working fine with es2021.

I'm not certain if modifying the tsconfig.json will help?

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2022",
        "module": "es2022",
        "resolveJsonModule": true
    }
}

Answer №1

Two interconnected problems are highlighted below:

It is my understanding that attempting to access a constructor parameter property within a class property should result in a use-before-init error, but the current TypeScript compiler does not produce this error.

class Example {
  // constructor initializing a field
  constructor(private param: Parameter){
  }

  // expected failure - accessing this.param before assignment
  x = this.param.x;
}

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

Unable to display bar chart on PHP webpage showing database number volumes using JavaScript

I'm currently working on generating a bar chart to show the number of bookings per month. I have two separate SQL queries that retrieve the data correctly, as confirmed by testing. However, when I try to run the file in my browser, nothing is displaye ...

Remove bulleted list from HTML using JavaScript DOM

My task involved deleting the entire "agent" array using the removeChild() function, requiring the id of a <ul> element. However, I faced an issue as I couldn't set the id for the "ul" due to using the createElement() function. //old code < ...

Preloading error alert message displayed during AJAX request

When I send an ajax request with a dropdown change, the loader div is shown using "before send". However, the issue is that the loader only displays for the first time, even though the ajax functionality works all the time. If you want to check this issue ...

Load pictures featuring a designated title

I have a collection of images stored in different categories: image-1-1.jpg image-2-2.jpg image-2-3.jpg image-2-4.jpg image-2-5.jpg image-3-1.jpg image-3-2.jpg image-3-3.jpg ... In addition, I also have links that correspond to each category: link 1 link ...

What could be the reason that data-bs-placement="right" is not functioning as expected?

I am facing an issue with the popover functionality in my project. No matter what value I set for data-bs-placement attribute, it does not display correctly. Can you help me understand why this is happening? <!DOCTYPE html> <html lang="en ...

Does the AJAX load more feature duplicate the existing data?

I've successfully implemented a PHP code that generates JSON data from WordPress posts in the database. By using AJAX, I'm able to load this JSON on my HTML page without any issues. Now, I want to enhance this functionality by adding a "Load Mo ...

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

Run the Ionic function only when the app is launched for the first time

I'm facing an issue with a function in Ionic storage that sets an array to default values. I only want this function to run the first time the app is launched on a user's phone, but currently it runs every time the app is opened because it's ...

What is the method for sending an axios post request using the application/x-www-form-urlencoded content type?

How can I successfully send an axios post request using application/x-www-form-urlencoded? I am trying to include a refresh token in the request, but currently an empty object is being sent. However, I have verified that the token exists when checking "us ...

Error Alert: "Invariant Violation" detected in a TypeScript program utilizing React

When attempting to implement the react-collapse component in my TypeScript application along with a custom d.ts file, I encountered the following error: Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a ...

Create a dynamic HTML table in React by leveraging arrays

I am working with two arrays: headings=['title1','title2'] data=[['A','B'],['C','D']] How can I efficiently convert this data into an HTML table that is scalable? title1 title2 A B ...

Express router route encountered a 404 Error

The first API endpoint is functioning correctly, however when attempting to access the second route, I am encountering a 404 error. Upon sending a GET request to http://localhost:3000/api/posts/, the response received is as follows: { message: "TOD ...

What is the process for extracting the paths of component files from an Angular ngModule file?

I've been on the lookout for automation options to streamline the process of refactoring an Angular application, as doing it manually can be quite tedious. We're working on reducing our app's shared module by extracting components/directive ...

Every time I refresh the page, my table is getting filled with blank rows

I created a simple example featuring a form and some PHP/JavaScript code. The JavaScript is used for form validation, while the PHP is utilized to update a MySQL table. function checkForm(){ var x = document.forms['form1']['first'] ...

jQuery sends ajax success to input type number

I am encountering an issue with the ajax success loading function when using input type number. Interestingly, when I switch the input type to text, it works perfectly fine. However, once I change the input type back to number, the loading ceases. <s ...

creating a project using Yeoman

I'm attempting to create a project using Yeoman from a template. I am able to successfully copy all files from the Portanova template folder, but I encounter an error when trying to copy a file from another template folder and add it to my project. Th ...

Tips on managing errors in a router with the help of middleware

Currently, I am utilizing node and express to create a server. However, there seems to be an issue where errors that occur within a router are not being properly handled, causing the entire server to crash: In my Server.js file: import SubRouter from &apo ...

What is the best way to specify the data type of a value within a map in TypeScript?

I need assistance defining the value of a key in a map as a key-value pair in TypeScript. map: { key: someStruct } Is it possible to declare the type of someStruct and initialize it simultaneously? What is the best approach for accomplishing this? ...

The information submitted through the form is not displaying on the console after being gathered using the post method in Express

When attempting to add products using a form on the admin page, the data (including an image file) is not being displayed in the console as expected. Instead, the following message appears: "{} POST /admin/add-product - - ms - -" Below is th ...

Using Chart.js to display JSON data in a graphical format

I am facing an issue and need some help. I have gone through various tutorials and questions, but none of them seem to address my specific problem. When making an ajax request to my PHP file, I receive a JSON response like this (as seen in the console log) ...