Writing TypeScript, Vue, and playing around with experimental decorators

After creating a Vue project through Vue-CLI v3.0.0-beta.15, the project runs smoothly when using npm run serve. However, TypeScript displays an error message stating that support for decorators is experimental and subject to change in a future release, but strangely, this error only appears inside the editor.

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

Attempts to fix the issue:

  1. Ensured that experimentalDecorators is set to true in my tsconfig.json file, as Vue does by default.

  2. Created a jsconfig.json file with the following options:

    {
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

  3. Attempted to change settings in VSCode using 

    "javascript.implicitProjectConfig.experimentalDecorators": true

Using the Vetur extension with VSCode led to posting an issue on their repository, yet the same error persists even without extensions in Visual Studio, indicating a possible issue recognizing the tsconfig.json file.

The steps taken to generate the project were:

  1. mkdir experiment && cd $_
  2. npm init
  3. npm install -D @vue/cli
  4. ./node_modules/.bin/vue create dashboard

  5. Selected the following options:

    • Required features: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
    • Use class-style component syntax? Yes
    • Auto-detected polyfills with Babel and TypeScript? Yes
    • CSS pre-processor choice: SCSS/SASS
    • Linter config choice: TSLint
    • Additional lint features: Lint on save
    • Unit testing solution: Mocha
    • E2E testing solution: Cypress
    • Configuration preference for Babel, PostCSS, ESLint, etc.: Dedicated config files
    • Save as a preset for future projects? No

  6. Navigated to dashboard/src/views/Home.vue

Appearances of the project in Visual Studio:

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

Differences are noted in the appearance in VSCode:

https://i.stack.imgur.com/5ejTt.png

typescriptvue.jsvisual-studio-codevetur

Answer №1

Did you take a look at this specific post?

Perhaps it would be beneficial to try the following steps: Navigate to File => Preferences => Settings (or use Control+comma) to open the User Settings file. Then add "javascript.implicitProjectConfig.experimentalDecorators": true

UPDATE:

Regarding your initial example, it seems that your project is within the experiment directory, but the tsconfig.json file is in a subdirectory rather than the root directory. To resolve this issue, consider opening vscode with the dashboard as the root folder of your project and restarting the editor.

Answer №2

After discovering that I needed to create a jsconfig.json file at the root of the folder where the tsconfig.json file is located, the error in Visual Studio disappeared. However, despite setting various options, the error still persisted in VSCode. It appears that this issue may be related to a Veturbug, rather than a problem with VSCode, TypeScript, or configuration settings.

To resolve the issue in VSCode, I found that opening the Dashboard folder instead of the Src folder (which is the actual project root) seemed to "fix" the problem. This suggests that Vetur may not properly detect the tsconfig.json file when it's nested within other directories.

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

An endless cascade of dots appears as the list items are being rendered

Struggling to display intricately nested list elements, Take a look at the JSON configuration below: listItems = { "text": "root", "children": [{ "text": "Level 1", "children": [{ "text": "Level 2", "children": [{ "text": ...

angulartypescript

Enhance the Nuxt 3 experience by expanding the functionality of the NuxtApp type with

When I include a plugin in my NuxtApp, it correctly identifies its type. https://i.stack.imgur.com/UFqZW.png However, when I attempt to use the plugin on a page, it only displays the type as "any." https://i.stack.imgur.com/hVSzA.png Is there a way for ...

typescriptpluginsnuxt.js

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

Currently, I am attempting to set an initial state (items) to an array of objects or retrieve the same from localStorage. However, I am encountering the following error. Type 'number' is not assignable to type '{ id: string; price: number; ...

javascripttypescriptreduxnext.js

Transform leaflet marker plugin into Typescript format

I recently discovered a leaflet extension that conceals map markers if they fall outside the boundaries of the current view map. import L from 'leaflet'; L.Marker.MyMarker= L.Marker.extend({}).addInitHook(function (this: ILazyMarker) { this ...

typescriptvue.jsleaflet

What is the best way to retrieve an empty instance using a getter in Vuex?

My store has a default setting that returns undefined for a specific attribute: // store.js export const state = { locationLoading: false, locationsLoading: false, locations: [], location: undefined, <-- }; In my component, I am utiliz ...

vue.jsvuejs2vuelidate

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

cssvue.jssass

The typescript-eslint-parser does not officially support this version of TypeScript

I recently acquired an outdated AngularJs application that still relies on the legacy tools: bower and grunt. Upon executing grunt serve --reload, I encounter the following warning message: WARNING: You are currently running a version of TypeScript which ...

typescriptgruntjseslint

a tutorial on linking component data to a prop value

Is there a way to connect the searchString value in my Vue component to the item value in the html template it uses? I need to pass this value to the method called in my Ajax request. Vue: Vue.component('user-container-component', { props: ...

javascriptvue.js

Tips for configuring Angular 2 to send all requests in the form of application/x-www-form-urlencoded

My experience with Angular 1 has helped me in understanding how to implement a similar solution, but I'm stuck on the final step. Just like before, the backend developer for our application is set up to accept requests with type application/x-www-for ...

typescriptangular

Having trouble with CORS when trying to log in with Vue3/Axios on Flask backend

I am currently working on integrating a login system using Vue3/Axios. On the backend, I am utilizing Flask with CORS configured. crs.init_app(app, supports_credentials=True, origins=["http://127.0.0.1:3000"], resources={r"/api/v1/*"} ...

vue.jsflaskaxiosvuejs3flask-cors

Navigating through pages. Learning to jump between different sections by simply clicking on numbers

Can you guide me on how to link a button from a page numbered cycle so that it opens a specific page? I have figured out navigation using arrows, but switching between pages is tricky for me. The data is sourced from an API with a total of 98 posts availab ...

vue.jspagination

Explaining the functionality of reserved words like 'delete' within a d.ts file is essential for understanding their

I am currently in the process of generating a d.ts file for codebooks.io, where I need to define the function delete as an exported top-level function. This is what my codebooks-js.d.ts file looks like at the moment: declare module "codehooks-js" ...

typescript

What is the best way to set up environments for Google App Engine (GAE

After developing a web app with server and client components, I decided to deploy it to Google Cloud using App Engine. Although the deployment process was successful, the main issue lies in the non-functioning env_variables that are crucial for the applic ...

reactjstypescriptexpressgoogle-app-enginegoogle-cloud-platform

Implement Stripe API mocking using Jest in Node.js with Typescript

I'm having trouble simulating the Stripe API for testing purposes. Although I don't have much experience with mocking functions using jest, I've already extensively researched how to mock the Stripe API without success. My file structure is ...

node.jstypescripttestingjestjsstripe-payments

In TypeScript, leveraging the spread operator to determine the largest value in an array containing nullable numbers

Having an array of nullable numbers presented in the following way: let myArray : Array<number | null> = [1,2,null,4,null,5]; let maximumOfMyArray = Math.max(...myArray); // Type null is not assignable to type number I am content with JavaScript tre ...

typescript

Finding a solution for duplicate date selections in NextJS using react-calendar

I am currently working on a calendar component using NextJS, typescript, tailwindcss, and the react-calendar library. I have encountered an issue with duplicate dates appearing in the calendar when selecting a date range. Although I have managed to handle ...

reactjstypescriptnext.jstailwind-cssreact-calendar

Encountering a 500 error while attempting to deploy a Django Rest-Vue project on Heroku

After successfully deploying my first project to Heroku, I encountered an issue with consuming the API. The API endpoint is located at https://segmentacion-app.herokuapp.com/cluster/, and the frontend can be accessed at https://cluster-app-wedo.herokuapp.c ...

djangovue.jsherokudjango-rest-framework

Styling a child component with multiple root nodes is not possible using parent scoped styles

I am trying to style a whole component from within another component in Vue 3 + Vite. I have attempted to add a class to the component tag, but it is not having any effect. <script setup> import HelloWorld from './components/HelloWorld.vue' ...

vue.jsvuejs2vue-componentvuejs3vite

If every single item in an array satisfies a specific condition

I am working with a structure that looks like this: { documentGroup: { Id: 000 Children: [ { Id: 000 Status: 1 }, { Id: 000 Status: 2 ...

htmlangulartypescript

"Utilizing the Power of Typescript with Koa-Router and Passport for a

As a beginner in Typescript, I am facing challenges while trying to integrate koa-router and koa-passport. I have installed all the necessary @types\ packages. import Koa from "koa"; import Route from "koa-router"; import passport from "koa-passport" ...

node.jstypescriptpassport.jskoa2koa-router