Error: The 'trimLeft' property is not found on the 'string' type. Libraries included: ["dom", "es2018"]

When I run the code below, I encounter this Error:

let foo = '  foo  '
console.log(foo.trimLeft())
//foo.trimStart() works neither

I've noticed that many online solutions suggest editing my tsconfig.json to include es20whatever.

What's puzzling is that I can use ES2018 features like Promise.prototype.finally and rest spread. My VSCode even auto completes trimStart() for me, despite the fact that both the project and editor should be using the same tsconfig.json. However, this specific code snippet fails to compile.

Below is my tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "plugins": [
      {
        "name": "tslint-language-service",
        "configFile": "./tslint.json"
      }
    ],
    "paths": {
      "foo": ["projects/foo/src/public_api.ts"],
      "bar": ["projects/bar/src/public_api.ts"],
      "baz": ["dist/baz"]
    }
  }
}

This issue arises within a monorepo angular folder (as indicated above). It's possible that there could be an issue related to that structure, but I'm uncertain.

Answer №1

To utilize the latest features, ensure you incorporate the library "es2019.string". If this library is not available in your current version of TypeScript, consider updating to access these functionalities that were not present at the time this question was originally posed.

Answer №2

To ensure optimal functionality, make sure to update the typescript library version to "typescript": "~3.6.2". Don't forget to add "es2019" to the lib array in the tsconfig.json file. This adjustment should resolve any issues you may be experiencing.

"target": "es2015",
"typeRoots": [
  "node_modules/@types"
],
"lib": [
  "es2018",
  "es2019",
  "dom"
]

Answer №3

It seems like es2018 may not be the best option here. Consider switching to "es2016" instead.

{
  "compileOnSave": true,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./src",
    "sourceMap": false,
    "declaration": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": false,
    "experimentalDecorators": false,
    "target": "es6",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2016", "dom"],
    "plugins": [
      {
        "name": "tslint-language-service",
        "configFile": "./tslint.json"
      }
    ],
    "paths": {
      "app/*": ["src/app/*"],
      "test/*": ["src/test/*"]
    }
  }
}

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

Encountering TS 2694 Error while running the ng serve command

I'm encountering some troublesome errors while attempting to run my angular application. Honestly, I can't figure out what's wrong, so I'm hoping someone here can assist me. I didn't make any significant changes, just added a singl ...

Angular index.html file can include a conditional script

I am currently working on an Angular project, where the index.html serves as the main entry point for the application, just like in any other Angular project. This file contains important links and configurations. Within the HTML code snippet below, you w ...

TypeScript has two variable types

I'm facing a challenge with a function parameter that can accept either a string or an array of strings. The issue arises when trying to pass this parameter to a toaster service, which only accepts the string type. As a result, when using join(' ...

Having trouble running tests on Angular service that has a Console constructor parameter

Attempting to incorporate a logging service in my project, the name service implies its purpose. During initialization, a specific implementation of the logging service is selected. This implementation utilizes the console for logging messages. Ensuring t ...

Tips for effectively utilizing the drag and drop feature with the Table Component in Ant Design

Recently, I received a new project from another team, and my client is requesting some changes to the admin page. Specifically, they want to customize the order of data pulled from the database. For instance, they would like to arrange the job positions in ...

Transforming a singular function into a versatile, reusable function with the help of Typescript

In my component, I have a function dedicated to removing duplicate values from an array. const removeDuplicateScenarios = (scenariosList: Scenario[]): Scenario[] => { return _.filter(scenariosList, el => _.filter(scenariosList, e => e.id === el ...

Tips for assigning a JSON object as the resolve value and enabling autosuggestion when utilizing the promise function

Is there a way to make my promise function auto-suggest the resolved value if it's a JSON object, similar to how the axios NPM module does? Here is an example of how axios accomplishes this: axios.get("url.com") .then((res) => { Here, axios will ...

The page has been updated following a refresh

I'm currently working on developing an Instagram-inspired platform using Angular 6, but I've run into a puzzling issue. When I refresh the page in my home component, everything reloads correctly and displays all my posts as expected. However, if ...

Step-by-step guide on uploading an image file using Nextjs

I am attempting to achieve the following: Upload an image file to a Next.js application Process it using cjwbw/real-esrgan:d0ee3d708c9b911f122a4ad90046c5d26a0293b99476d697f6bb7f2e251ce2d4 Retrieve the enhanced version of the image Is there anyone who can ...

Steps to resolve the issue of receiving a warning while utilizing @babel/plugin-transform-typescript for compiling TypeScript code

Every time I compile TypeScript using @babel/plugin-transform-typescript, I encounter a warning. The issue seems to be caused by another plugin injecting "_class" without properly registering it in the scope tracker. If you are the creator of that plugin, ...

"Encountering a blank page in React Router when transitioning between separate projects

I've come across some discussions about a similar issue like this one, but I haven't been able to resolve my problem. In my initial project, I can smoothly navigate between its pages. However, when I created a second project hosted in a subdirec ...

Introduction to React with Typescript: Greeting the World

I am attempting to create a Hello World React application with Typescript. Below is the code I have written. Method 1 works without any issues, but method 2 throws an error. Method 1 - TypeScriptComponent.tsx import React from 'react' import Re ...

What is the best way to attach an EventListener to all DOM elements with a particular class?

Within my DOM, I have dynamically created spans that all have the class "foo". Utilizing TypeScript, I aim to attach an onClick event to each of these spans post-creation. Here is my current approach: var foos = document.body.querySelectorAll(".foo"); f ...

Fast + Vue3 + VueRouter Lazy Load Routes According to Files

I am currently working on implementing Domain-Driven Design (DDD) to Vue, and the project structure looks like this: src - App - ... - router - index.ts - Dashboard - ... - router - index.ts - ... The goal is for src/App/router/index.ts to ...

Updating color of an element in SVG and Angular2+ according to the background

In my svg element, I have a text element positioned after two rect elements. <svg id="floor-plan" width="300" height="100"> <rect width="300" height="100" fill="white"/> <rect width="50" height="50" fill="green"/> <text x="10" y="10" ...

Is it possible to utilize useRef to transfer a reference of an element to a child component?

When I want to mount something into the element with id tgmlviewer, I call it a viewer object. This process works smoothly when there is only one component of this kind. import React, { useEffect } from "react"; import { Viewer } from "../.. ...

Is it possible to loop through each row in a table using Cypress and execute the same actions on every iteration?

I have a frontend built with html/typescript that features a table of variable length containing action buttons in one of the columns. I am looking to create a Cypress test that will click on the first button of the first row, carry out a specific task, an ...

TypeORM is failing to create a table upon initialization

Recently, I delved into the realm of typescript and decided to explore TypeORM for backend development. My current project involves building a CRUD API using typeORM and postgreSQL. After configuring everything initially, I ran the application only to rea ...

Developing Angular PWAs with a focus on microfrontends

I have set up multiple microfrontends using an "app-shell" type of application for the domain root, with each microfrontend on the first path element. Each app is constructed as a standalone angular application utilizing shared libraries to reuse common co ...

The Power of Asynchronous Programming with Node.js and Typescript's Async

I need to obtain an authentication token from an API and then save that token for use in future API calls. This code snippet is used to fetch the token: const getToken = async (): Promise<string | void> => { const response = await fetch(&apos ...