Vue + TypeScript prop type issue: "'Foo' is intended as a type, but is being treated as a value in this context."

As a newcomer to TypeScript and the Vue Composition API, I encountered an error that left me puzzled:

I have a component that requires an api variable as a prop, which should be of type AxiosInstance:

export default defineComponent({
  props: {
    api: AxiosInstance,
(...)

However, when I attempt to specify the type of the prop as AxiosInstance, I receive the following error message:

TS2693: 'AxiosInstance' only refers to a type, but is being used as a value here.

This error is perplexing to me because I believe I am using types as values within this prop object. For example, I have another prop defined like so:

    fileExtensionFilter: {
      type: String,
      default: undefined
    },

How can I correctly specify the type for this api prop?

typescriptvue.js

Answer №1

After seeking advice from a colleague:

It turns out that when utilizing defineComponent(), it is necessary to utilize Vue's PropType helper, which can be found in the documentation here.

Thus, the amended code will resemble the following:

import {PropType} from 'vue'
export default defineComponent({
  props: {
    api: Object as PropType<AxiosInstance>,
(...)

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

Issue encountered while implementing search functionality with pagination in Laravel using Vue.js and Inertia

Recently, I have embarked on my journey to learn Laravel 8 along with vuejs and inertiajs. My current challenge involves creating a pagination search table. Despite diligently following tutorials, I keep encountering errors. Below is the code snippet for ...

laravelvue.jsinertiajs

What are some ways to conceal the v-btn component?

btn : false <v-btn value="false">1</v-btn> <v-btn v-model="btn">2</v-btn> I need to conceal the v-btn component. However, both v-btn 1 and 2 remain visible. Is there a solution for this issue? Thank you. ...

vue.jsvuetify.js

searchByTextContentUnderListItemAnchorTag

I would like to utilize the getByRole function for writing my test. However, I am encountering issues when using linkitem or 'link' as the role. It seems that I cannot find the desired element. // encountered error TestingLibraryElementError: The ...

javascripttypescriptunit-testingreact-testing-librarytesting-library

Resolving Hot-Reload Problems in Angular Application Following Upgrade from Previous Version to 17

Since upgrading to Angular version 17, the hot-reload functionality has been causing some issues. Despite saving code changes, the updates are not being reflected in the application as expected, which is disrupting the development process. I am seeking ass ...

angulartypescriptangular-clihot-reload

Autocomplete feature in Angular not showing search results

I am currently using ng-prime's <p-autocomplete> to display values by searching in the back-end. Below is the HTML code I have implemented: <p-autoComplete [(ngModel)]="agent" [suggestions]="filteredAgents" name="agents" (completeMethod)="f ...

javascriptangulartypescriptprimeng

Can the GitHub URL be utilized for installing TypeScript npm dependencies?

When working with an npm library written in TypeScript, the usual process involves writing the source code in TypeScript, pushing it to GitHub, then converting it to JavaScript and pushing the resulting JavaScript code to the npm repository. When adding ...

typescriptnpm

Enhancing webpack configuration with chainWebpack to customize infrastructure logging settings

I am working on the chainWebpack section within my vue.config.js. chainWebpack: config => { // Add "node_modules" alias config.resolve.alias .set('node_modules', path.join(__dirname, './node_modules')); ...

javascriptvue.jswebpackwebpack-chain

How can I utilize Luxon to calculate the total number of days that are equal to or greater than 30?

Looking at my current array structure const arr = [ { id: '1', name: 'thing1', createdAt: '2022-09-21T16:26:02Z', }, { id: '2', name: 'thing1', createdAt: '2022-11-21T16:20:20Z', } ...

javascripttypescriptluxon

The issue of returning a boolean value in an rxjs function leading to failure

Hey there, I am currently learning about rxjs and I want to create an observable that returns either true or false. This is my attempted code: checkLoggedIn(): Observable<boolean> { // Check with the server if the user is logged in if(this._tok ...

angulartypescriptrxjs

Dynamic scrolling feature for lists that moves horizontally

When working with a lengthy list, I encountered an issue with horizontal scrolling. It worked fine when the list was statically implemented as shown below. <div style="margin-top:100px;white-space: nowrap;"> <ul > <li style= ...

javascriptvue.js

What is the process for compiling a separate JS file using the Vue CLI?

Currently working on developing a Vue application using the Vue CLI, and I am in need of compiling a separate JS file along with the Vue solution. The desired compiled structure should look something like this... `-- dist |-- js | |-- main.js ...

vue.jsvue-cli

Utilizing Vue.js to activate click events from a specific class

My current project involves the use of vuejs. I am trying to create a method that will be triggered whenever an element with a specific class is clicked. Unfortunately, I'm experiencing some difficulties in setting this up in vuejs, even though I had ...

vue.js

What is the best way to update the value of a variable within a specific child component that is displayed using ngFor?

Hello there, I'm in need of some assistance with a coding issue. I have a parent component named "users-list" that displays a list of child components called "user" using *ngFor. Each component's class is dynamic and depends on various internal v ...

angulartypescript

Maximizing Jest's potential with multiple presets in a single configuration file/setup

Currently, the project I am working on has Jest configured and testing is functioning correctly. Here is a glimpse of the existing jest.config.js file; const ignores = [...]; const coverageIgnores = [...]; module.exports = { roots: ['<rootDir&g ...

javascriptnode.jstypescriptamazon-dynamodbjestjs

Ways to retrieve information from a specific key

I'm currently facing a challenge accessing specific data objects that are referenced by keys. In this particular scenario, the "applicant" data is nested within an Event object. My goal is to extract this data and create a new object from it. While I ...

javascriptvue.js

Challenge with the scope of 'this' in Typescript

Whenever I invoke the findFromList function from a component, it triggers this particular error message: ERROR TypeError: Cannot read property 'searchInArray' of undefined at push../src/app/shared/services/filter.service.ts.FilterService ...

angulartypescript

Error: The module '/@modules/vue.js' does not export a 'default' value as requested by the syntax

I'm encountering an issue with Vee Validate form validation in Vue.js. As a beginner, I am struggling to grasp the import syntax. After installing vee-validate using npm i vee-validate --save and placing it in my node_modules directory, I proceeded to ...

javascriptvue.jsnpmimportvee-validate

Troubleshooting error in Vue project: "hasOwnProperty" property or method not supported by object in IE11

While working on a vue app with vue advanced webpack template, I didn't pay much attention to Internet Explorer compatibility. However, today when I tried running the app on IE browser, I encountered some strange errors. https://i.stack.imgur.com/1e6 ...

highchartsvue.jsinternet-explorer-11babeljs

Guide on uploading an image file through ReactJS to an api integrated with NestJS utilizing the bytea datatype

I'm seeking guidance on how to correctly upload a file using ReactJS to an API built with NestJS. Here's what I have accomplished so far: In the API's swagger documentation, there is a post method specified for file uploads. Below is the t ...

reactjstypescriptapifile-uploadnestjs

Can anyone explain why the animation doesn't work when deleting a div?

Using vue.js 2.9 in my current project, I have set up animations for transitions and translations: transform: translate3d(0, 0, 0) &.move-enter-active, &.move-leave-active transition: all 0.2s linear &.move-enter, &.move-leave transfor ...

vue.jscss-transitions