The PropTyped property is of an undefined data type

My goal is to create a custom type for an object property, but I am encountering some issues with the connection. Any suggestions on how to resolve this would be greatly appreciated :-)

import {
    defineComponent,
    PropType
} from 'vue'

interface IconType {
    class: string
    file: string
}

export default defineComponent({
    props: {
        icon: {
            icon: Object as PropType<IconType>,
            required: true
        }
    },
    setup (props) {
        // TS2571: Object (props.icon) is of type 'unknown'.
        const iconPath = `map.svg#${props.icon.file}`

        return {
            iconPath
        }
    }
})

The TypeChecker indicates that the icon is being treated as type any: https://i.sstatic.net/oQhQh.png

typescriptvue.js

Answer №1

Make sure to specify the data type for the props parameter. For example:

interface Props {
  icon: {
    icon: PropType<IconType>;
    required: boolean;
  }
}

Then, in the setup section, you can reference it like this:

setup (props: Props) {

Additional information: The props object directly below export default defineComponent({ is utilized by Vue to determine valid input properties for the component. However, the above TypeScript code is necessary for determining their types.

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

Retrieving an Observable within an Observable is a feature found in Angular 9

Seeking a solution to return an Observable nested within another Observable. Although I've tried using the pipe and map operators, it doesn't appear to be functioning correctly for me. What could be causing the issue? My development environment ...

angulartypescriptrxjspipeobservable

What could be the reason behind the DOM update failure in VueJS this time?

After thorough research, I have gone through all similar posts but none of the solutions seem to address my particular issue. Specifically, the problem lies in updating the table with the id "table". HTML: <section id="body"> <div class="con ...

javascriptjqueryajaxvue.js

Utilizing Angular to convert a string array into an array of enum values through an HTTP GET request

I have a list of different user roles defined in my typescript code: enum UserRole { CONSULTANT, MANAGER, ... } There is a REST endpoint /users/id/roles that returns an array of strings representing the roles of a specific user: [ "CONSU ...

javascriptangulartypescriptenumstype-conversion

How can VueJS dynamically incorporate form components within a nested v-for loop?

I've encountered a challenge while working on my project. Here is the form I'm currently using: https://i.sstatic.net/LyynY.png Upon clicking the 'New Deal Section' button, a new section like this one is created: https://i.sstatic.n ...

javascriptvue.js

TS2339 Error: The express "Application" type does not have the property 'use'

We encountered some unexpected errors with one of our older micro-services (Node.js V10 + Typescript V7.0.1) recently, leading to the following issues: return new TSError(diagnosticText, diagnosticCodes) TSError: ⨯ Unable to compile TypeScript: src/app.t ...

node.jstypescriptexpressnode-modules

Retrieve the predetermined value from the dropdown menu option

I currently have two classes with a mapping structure as follows: User *--------------------1 Sexe Users are listed in the file list-users.component.html. When selecting a user for modification, I am redirected to the modify-user.component.html B ...

angulartypescriptangular6

Navigating through pages using Nuxt UI-pagination

Having some trouble with setting up the pagination feature from Nuxt UI. Despite trying to research through documentation and videos, I can't seem to figure out how to connect my data to the component. <template> <div> ...

javascriptvue.jspaginationnuxt.jsvue-component

When I utilize the redux connect function, the class information in my IDE (PhpStorm/WebStorm) seems to disappear

When I use the connect function from redux, it seems to hinder my IDE (PhpStorm) from "Find Usages" on my classes. This is likely because connect returns any, causing the type information from the imported SomeClass file to be lost. export default connect ...

javascripttypescriptreduxphpstormwebstorm

Transforming a TypeScript data type into a comparable type

I'm facing a challenge with two interfaces that represent the data returned by an API and the actual data itself. interface APIModelCommon { id: number createdAt: string updatedAt: string } interface ModelCommon { id: number creat ...

typescript

Send a GET request to the API with an incremented value in the last parameter

Currently, I'm facing an issue with accessing data using pagination and lazy loading. The pagination system works fine for the first request, but the last parameter increment at the end of the page is not functioning as expected. For instance, when I ...

javascriptvue.js

Encountering a white screen when attempting to pass props in history mode with Vue Router

During my Vue Router development process, I encountered a situation where one of my routes required a prop with an ID. To address this, I added the necessary configuration: const routes = [ { path: '/user/:id', name: 'user', ...

vue.jsvue-router

"Encountering issues with Vue router when attempting to navigate to the same

If you'd like to access the code snippet, it is available on this jsfiddle link. Apologies for not directly sharing the code here; unfortunately, StackOverflow's code block feature is currently resulting in a Server Error in '/' Applica ...

vue.jsvue-router

How to transfer data from a component to an external JavaScript file?

I'm facing a challenge with using my component's data in an external JavaScript file that contains my Dropzone configuration. I attempted to use Function.prototype.bind without success: export const dropzoneConfig = { url: api.http.baseUrl + ...

vue.jsvuejs2dropzone.js

Changing the progress bar by clicking on the next or previous button

Is there a way to implement functionality that toggles the progress bar data at the bottom to show either the first or second circle when clicking next/previous buttons? Perhaps a change in the architecture is needed. Should the logic be implemented in t ...

formsvue.jsinputvuextoggle

Vue Components failing to display or refresh

Currently in my Laravel 5.4 project, I am facing an issue where Vue components are not displaying or updating as expected. To troubleshoot, I initiated a new project and set up a route /chat in the web.php file. This is how my chat.blade.php file looks li ...

laravelvue.jsvuejs2vue-component

How can I transform the overall value into a percentage in Vue.js or JavaScript?

Is there a way to create a progress bar in VueJS 3 with Nuxt Js by converting the total value to a percentage and displaying it as a style width value? For example, if 40% out of 100% equals 400USD out of 1000USD, can we achieve this using a function in an ...

javascriptarraysvue.jsnuxt.jsvuejs3

Utilize only the necessary components from firebase-admin in Cloud Functions with Typescript

When I looked at my transpiled code from cloud functions, I noticed the following TypeScript import: import { auth, firestore } from 'firebase-admin'; It gets transpiled to: const firebase_admin_1 = require("firebase-admin"); Upon further exa ...

typescriptfirebasegoogle-cloud-functionsfirebase-admin

Nuxt3 - TS2339: The 'replaceAll' property is not found on the 'string | string[]' type in Nuxt3

Hey there! I've been experimenting with the replaceAll() method within my Nuxt3 project and encountered a strange error. Folder Structure ───pages │ └───Work │ │ index.vue │ │ [Work].vue Template <templat ...

htmltypescriptvue.jsnuxtjs3

Update the sebm-google-map-marker component with the help of an Angular2 directive

Currently, I am utilizing angular2-google-maps to construct a Google map with markers. My goal is to customize a marker by incorporating the user's social media profile picture. To achieve this customization, I plan to refer to the following resource ...

angulartypescriptangular2-directivesangular2-google-maps

VueJs: Finding the corresponding value of a data object

Is there a way to extract data from an object in Vue? This is the format of my data: datasets: [{ text:"Cars", value: "[1,2,3]" }, { text:"Trains", value: "[1,4,10] } ] When I receive information from route props like this: this.selectedText= this ...

javascriptvue.js