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

An unconventional approach to conducting runtime checks on Typescript objects

I've been working on a server application that receives input data in the form of JavaScript objects. My main task is to validate whether these data meet certain requirements, such as: having all required fields specified by an interface ensuring th ...

typescripttypechecking

What is the most efficient method for examining dependencies in Yarn 2 (berry)?

Is there a way to check for vulnerabilities in Yarn 2 dependencies? In Yarn 1.x, you could run yarn audit, similar to npm audit. However, this command is not available in Yarn 2. According to this issue on the Yarn berry Github, it may not be implemented ( ...

javascripttypescriptnpmnpm-audityarnpkg-v2

Retrieve all the items listed in the markdown file under specific headings

Below is an example of a markdown file: # Test ## First List * Hello World * Lorem Ipsum * Foo ## Second List - Item 1 ## Third List + Item A Part of Item A + Item B ## Not a List Blah blah blah ## Empty ## Another List Blah blah blah * ITEM # ...

javascriptnode.jsregextypescriptmarkdown

Struggling with "Content" not being recognized in Typescript PouchDB transpilation errors?

I have been diligently working on an Ionic app for the past three months with no major issues during development or deployment to mobile devices. However, yesterday I encountered a frustrating NPM dependency problem while trying to deploy to mobile. In an ...

angulartypescriptionic-frameworknpmpouchdb

Distributing actions within stores with namespaces (Vuex/Nuxt)

I'm encountering an issue with accessing actions in namespaced stores within a Nuxt SPA. For example, let's consider a store file named "example.js" located in the store directory: import Vuex from "vuex"; const createStore = ...

javascriptvue.jsnuxt.jsvuex

Implementing b-tooltip from Bootstrap-vue on a b-table

Utilizing bootstrap-vue to display data on a b-table, I have truncated long text and display the original when hovering over it using the title prop. It works well with custom CSS, but I would like to implement b-tooltip. <b-table hover sticky-hea ...

apivue.jsbootstrap-vuetwitter-bootstrap-tooltip

Issue encountered while attempting to run an Angular project using the CLI: "Module not found - Unable to resolve 'AngularProjectPath' in 'AngularProjectPath'"

Just like the title suggests, I'm facing an issue with compiling my angular project. It seems to be having trouble resolving my working directory: Error: Module not found: Error: Can't resolve 'D:\Proyectos\Yesoft\newschool& ...

angulartypescript

VueJS / v-html is displaying a blank page (Bokeh-html)

Especially as a newcomer to VueJS, I am currently in the process of trying to showcase a local HTML file within the Vue Application. The method I'm using to fetch the HTML file involves Axios, here's how it goes: <template> <div> ...

javascripthtmljsonvue.jsbokeh

Is anyone able to assist with resolving the problem of `tsc` constantly monitoring `node_modules`?

Using the Expo platform has been a great experience for me. Here is a snippet from my tsconfig.json: { "compilerOptions": { "paths": { "@/*": [ "./src/*" ], ...

typescriptreact-nativeexpotscreact-native-gifted-charts

Is it possible to set up TypeScript npm packages to be installed in their original TypeScript format rather than JavaScript for the purpose of examining the source code?

Despite my lack of expertise in the inner workings of how a TypeScript library compiles itself to JavaScript before being placed in the node_modules directory, I have a question: Coming from a PHP background, I am accustomed to being able to explore any l ...

typescriptnpm

Loading components in Vue Composition API can be done by using the `import` statement followed by

Trying to install the vue3-burger-menu library, but the provided documentation is only compatible with the Options API. However, I am using the Composition API and need some assistance. The documentation provides the following code snippet: import { Slide ...

vue.jsvue-componentvuejs3

When using TypeScript's array intersection type, properties are not accessible when using methods like Array.forEach or Array.some. However, they can be accessed within a for loop

It was challenging to search for this problem because I may not have the correct technical terms, but I hope my example can help clarify it. Background: I am using query data selectors in react-query to preprocess query results and add some properties tha ...

arraystypescripttype-inferenceunion-typesintersection-types

Why do I keep receiving a <prototype> object for each API request?

Currently, I am utilizing JSONPlaceholder in conjunction with Angular as part of my learning process. While I have been following the documentation meticulously and obtaining the correct output, there seems to be an additional element accompanying each obj ...

typescriptrestfetch-apijsonplaceholder

Connect an Observable to the template with async binding

I've been attempting to link an Observable to a template variable in Angular using the following code: [class.active]="isBookmarked$ | async" During the ngOnInit function, I initialize the Observable: var promise = this.cacheService.getItem(this.bo ...

angulartypescriptasynchronousobservableangular-pipe

A unique column in the Foundry system that utilizes function-backed technology to calculate the monthly usage of engines over a

In my dataset of ‘Engine Hours’, I have the following information: Engine# Date Recorded Hours ABC123 Jan 21, 2024 9,171 ABC123 Dec 13, 2023 9,009 ABC123 Oct 6, 2023 8,936 XYZ456 Jan 8, 2024 5,543 XYZ456 Nov 1, 2023 4,998 XYZ456 Oct 1 ...

javascripttypescriptpalantir-foundry

Fixing the Mixed Content Block Error in a Vuejs + Laravel Application

I have successfully deployed both the frontend and backend on a shared hosting platform. However, upon calling the API, I encountered errors in the browser console. xhr.js:210 Mixed Content: The page at 'https://front.thecomicden.com/' was loaded ...

laravelapivue.jsfrontendbackend

Can a standard tuple be matched with its corresponding key?

This code snippet showcases a function that can recognize that the key "banana" cannot have the value "red": type Fruits = { banana: 'yellow' | 'green' strawberry: 'red' } const fruit = <K extends keyof Fruits>(modu ...

typescript

Arrange the data in the table to ensure that it is organized neatly into the appropriate columns

I am currently working on a project that involves creating a table to display user answers for purchased tickets under the corresponding questions. If a question has not been answered, I want to show a dash symbol instead. However, I am encountering an is ...

javascriptarraysvue.jshtml-table

What is the best way to compare two arrays that have elements of different data types?

Can someone help me compare two arrays in TypeScript to see if they are identical? I'm having trouble with the current code. Here's what I have: let props:(string|boolean)[]=['abc','def',true,false,'xyz'] let propsCo ...

javascriptarraystypescriptcompare

What's the best way to prevent Vue from being loaded while working with Elixir?

Currently, in my Laravel 5.3 project, I am utilizing Elixir to compile both my Sass and JS files. Within my /resources/assets/js/app.js file, there are just two lines of code: require('./bootstrap'); require('./search'); The search.j ...

phplaravelvue.jslaravel-5.3