Issues regarding ambient getters and setters

Recently, I encountered an issue with my open-source library called Firemodel. The library utilizes ES classes and getters/setters within those classes. Everything was working smoothly until my VueJS frontend code started flagging every instance of these getters/setters as errors.

Here's a glimpse of how the error appears:

https://i.stack.imgur.com/Zs8Xn.png

Upon inspecting the d.ts file in vs-code, the error is clearly highlighted. However, when I checked the same transpiled file from the Firemodel repository using vs-code, no error was detected.

Interestingly, when I transpile using tsc with Firemodel, no errors are reported. Even a consumer of Firemodel that also uses tsc for transpilation does not encounter any issues with Firemodel's generated *.d.ts files. On the other hand, the VueJS project, which relies on the default settings of Vue CLI, fails to build due to these errors as it uses Babel for transpilation.

This situation has led me to suspect that Babel might be the root cause, but I'm uncertain. Has anyone else faced this issue before? Any thoughts or suggestions?

typescriptvue.jsbabeljs

Answer №1

The issue seems to have been resolved by updating the local version of Typescript in the VueJS app to 3.7.x. Previously, it was on version 3.5.x, which is the default for new projects created using vue create ... and selecting the Typescript option.

It is worth noting that while this solution worked for me in multiple projects, I am still unsure as to the exact reason why it works. Could Babel be detecting the change and behaving differently? Or perhaps the VueJS build system is making adjustments?

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

The functionality of Angular/Typescript class.name appears to fail during a production build

Using Angular 5, I encountered an unusual problem with the class.name property. We have a TypeScript function as shown below: export class ApiService { public list<T>(c: new(values: Object)=> T) { var cname = c.name; .... } } When ...

javascriptangularjstypescriptangular5

Scrolling horizontally in Ionic framework

In regards to the response found on Ionic - Horizontal scroll tab for Categories, I have a question. I am curious about what needs to be included in the category.model. Can anyone provide some guidance? ...

angulartypescriptionic-framework

Creating a custom component results in an extended duration to 'eliminate' its children

1I am currently facing an issue with a time-table component created using vue.js. It contains approximately 200 nested child timeline components, making it quite complex (I wanted to share an image but lacked the reputation to do so). The main problem lie ...

javascriptperformancevue.js

Retrieving results from PostgreSQL database using pagination technique

When I'm pagination querying my data from a PostgreSQL database, each request involves fetching the data in this manner: let lastNArticles: Article[] = await Article.findAll({ limit: +req.body.count * +req.body.page, or ...

javascripttypescriptpostgresqlexpresssequelize-typescript

Angular Toaster Notification - There are currently no toaster containers set up to display notifications

Currently, I am utilizing the angular2-toaster library within my Angular application. It is quite straightforward - you simply define a toaster container in the template of your component: <toaster-container></toaster-container> Then, you ca ...

angulartypescriptangular-servicesangular2-toaster

Vue paginated select with dynamic data loading

My API has a endpoint that provides a list of countries. The endpoint accepts the following query parameters: searchQuery // optional search string startFrom // index to start from count // number of options to return For example, a request with searchQu ...

javascriptajaxvue.jsvue-select

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

htmlcssreactjstypescriptmaterial-ui

Does anyone know how to retrieve the application version or import the package.json file? Can't seem to find the solution on

I need to display the version from the package.json file in my Angular application. To import it, I allowed importing json by adding a few extra lines in tsconfig.json: { "compilerOptions": { "module": "commonjs", ...

jsonangulartypescript

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Just starting out with angular and having trouble generating or updating a table based on text boxes. The schema includes country, sales, and profit fields. There are two text boxes for the x-axis and y-axis inputs. The table should dynamically update when ...

javascripthtmlangularmongodbtypescript

Utilize an external stylesheet for your Vue web component to avoid inline styles

For my web component, I am utilizing the vue-cli-service to handle the building process. All styles associated with this component are consistently inlined within the javascript file. To create the web component: vue-cli-service build --target wc --name co ...

vue.jsvue-cli

Creating a dynamic multi-choice dropdown list with Django and Vue.js

I have been attempting to implement the Vue.js multiselect component from the following link: However, I am encountering an issue where instead of the expected multiselect dropdown, the output is not as desired and looks like this: https://i.sstatic.net/ ...

javascriptdjangovue.js

Swapping JSON: A Quick Guide

When my Angular code loads, a list of buttons (button 1, button 2, button 3, etc.) is displayed. Upon clicking any button, the console shows J-SON with varying values. Two additional buttons are present on the page for moving up and down. My dilemma arise ...

javascriptangulartypescriptswap

Utilizing a variable string name for a method in Typescript Vue

My objective is to trigger a different function based on the value of a variable. However, when working in VS Code, I receive an error message that states: 'method' implicitly has a type of 'any' because 'type1Func' and &apos ...

typescriptvue.jsvuejs2

Creating reusable TypeScript function argument types

There is a function that I have defined in the following way: function getRangeBounds(start: number, stop?: number, step?: number) { if (step === undefined) step = 1; const actualStart = start !== undefined && stop !== undefined ? start : 0; ...

typescript

A guide to dynamically display input fields according to the selected mat-radio button in Angular Material

I am currently utilizing angular material version 9.2.4 Within my project, I am implementing the angular material mat radio button with an input field. Each payment method will have its own corresponding input field. When the 'Cash' option is se ...

javascriptangulartypescriptangular-material

What is the best way to display a Vuex state based on a function being activated?

I have noticed similar questions on this topic but couldn't find a solution, so I decided to create my own. Here's the issue: I have an array named "allCountries" in the state, initially filled with 250 country objects. I am successfully render ...

javascriptvue.jsvuex

Why is the 'as' keyword important in TypeScript?

class Superhero { name: string = '' } const superheroesList: Superhero[] = []; const superheroesList2 = [] as Superhero[]; As I was exploring TypeScript, I stumbled upon these two distinct methods of declaring an array. This got me thinking w ...

typescript

Problem with Typescript: The type '{ x;y }' is required to have a '[Symbol.iterator]()' method

Just starting out with Typescript and tackling the task of converting a React project from JavaScript to TypeScript. I've been diving into various posts for guidance, but I feel like I'm going in circles. Any assistance would be greatly appreci ...

reactjstypescript

Reasons behind Angular HttpClient sorting JSON fields

Recently, I encountered a small issue with HttpClient when trying to retrieve data from my API: constructor(private http: HttpClient) {} ngOnInit(): void { this.http.get("http://localhost:8080/api/test/test?status=None").subscribe((data)=> ...

angulartypescripthttp

Issue with TypeScript Generics: The operand on the left side of the arithmetic operation must be of type 'any', 'number', or 'bigint'

I seem to be encountering an error that I can't quite decipher. Even though I've clearly set the type of first as a number, the code still doesn't seem to work properly. Can someone provide insights on how to fix this issue? function divide& ...

typescripttypescript-generics