Incorporate an imported type as a nested component within an interface, and subsequently utilize the interface as properties within the Vue3 script

While this may appear to be a straightforward question, I have not been able to find any discussions on this topic.

Currently using Vue3 with script setup

Objective:

In short: I am attempting to utilize a child type definition to specify one key of an interface object and then apply it as props within a component. However, I am encountering a TypeScript error (shown in the first image).

The issue arises when importing a type file (Platform.ts) into an interface file (CardProps.ts), followed by importing and utilizing the interface as props for a card component (PromptCard.vue). No error occurs if I exclude the child type Platform with unions from the CardProps interface.

TS Error:

Despite rendering correctly, VSCode displays the following error: https://i.sstatic.net/Lpg7K.jpg

I recently came across a VueSchool tutorial mentioning that imported interfaces cannot be used for props (requiring them to remain in the same file). However, despite this warning, everything seems to be functioning properly. Could this error be the reason behind such instruction?

Platform type

https://i.sstatic.net/Oehh7.jpg

Child type inside of CardProps interface

https://i.sstatic.net/HdZVe.jpg

Passing props to Card from Market page

https://i.sstatic.net/rANu6.jpg

Card Component (PrompCard.vue)

https://i.sstatic.net/tRWkE.jpg

typescriptvuejs3vue-script-setup

Answer №1

By simply importing the Platform type and referencing it as platform: '' as Platform, I was able to enable intellisense and remove the error. Special thanks to @Duannx for providing the helpful hint that led me to this fix.

https://i.sstatic.net/axwnO.jpg

Check out the code snippet below:

<template>
  <div class="market-wrapper">
    <h4>MARKETPLACE</h4>

    <div class="card-grid">
      <div v-for="card in cards" :key="card.id">
        <PromptCard :content="card" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import PromptCard from '@/components/PromptCard.vue'
import type Platform from '@/types/Platform'
import { reactive } from 'vue'

const cards = reactive([
  {
    id: 1,
    title: 'Card Title',
    description: 'Description',
    image: '123',
    platform: 'Facebook' as Platform
  },
  {
    id: 2,
    title: 'Card Title2',
    description: 'Description2',
    image: '123',
    platform: 'Twitter' as Platform
  }
])
</script>

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

What could be causing the issue with the variable appearing as undefined in

My class has a property: public requestLoadPersonal: Personal[] = []; As well as a method: private filterByGender(selectedValue: any): void { console.log(this.requestLoadPersonal); this.requestLoadPersonal = this.requestLoadPersonal.filter( ...

javascripttypescript

Tips for effectively implementing ng-bootstrap in Angular 18

After upgrading my angular app to the latest version, Angular 18, I encountered an issue where there is no compatible version of ng-bootstrap available for Angular 18. While trying to resolve dependencies, I came across the following errors: npm error Fou ...

angulartypescriptng-bootstrapangular18

What is the process for exporting a class and declaring middleware in TypeScript?

After creating the user class where only the get method is defined, I encountered an issue when using it in middleware. There were no errors during the call to the class, but upon running the code, a "server not found" message appeared. Surprisingly, delet ...

javascriptangularjstypescriptexpressrouting-controllers

Ways to update a component upon becoming visible in Angular

Within my Angular 4.3.0 project, the header, left panel, and right panels are initially hidden on the login page until a successful login occurs. However, once they become visible, the data is not pre-loaded properly causing errors due to the ngOnInit meth ...

javascriptangulartypescript

Time grid - powered by momentjs and typescript

https://i.sstatic.net/Xzggb.png Welcome! If you're looking to add a day picker in a calendar, keep reading for my solution. ...

typescriptmatrixcalendarmomentjs

Creating a JSX.Element as a prop within a TypeScript interface

I need to create an interface for a component that will accept a JSX.Element as a prop. I have been using ReactNode for this purpose, but I am facing issues when trying to display the icon. How can I resolve this issue? export interface firstLevelMenuItem ...

javascriptreactjstypescript

leveraging third party plugins to implement callbacks in TypeScript

When working with ajax calls in typical javascript, I have been using a specific pattern: myFunction() { var self = this; $.ajax({ // other options like url and stuff success: function () { self.someParsingFunction } } } In addition t ...

javascriptajaxtypescript

Error message: "Lazy-loaded modules encounter a TypeError stating that '' is not a function when accessed through NGINX."

Hey, I've got some distribution files for you to check out: AOT-enabled dist with Lazy Modules No AOT Lazy Modules dist AOT without Lazy Modules dist Here's what's been going on: When served locally with webpack-dev-server or live-serve ...

angulartypescriptwebpackaot

Are you searching for ways to convert an object into an array?

I have a dynamically built object and I need to extract specific fields (the dynamic ones) from it and convert them into an array. In the following code snippet, my goal is to convert towers[X] into an array of objects. {id: "", description: "Teste", tow ...

arraysjsonangulartypescript

A problem occurred while compiling the 'SharedModule' template: The expression form is not compatible with the current system

In creating this share module, I have included the following components: @NgModule({ declarations: [ , DateToPersian , EnumToArrayPipe , SearchWtihInput , ConvertbytePipe , ArraySortPipe , MonySplitePipe , IsEllipsisActiveDir ...

javascriptangulartypescript

Establish a connection with MongoDB and make changes to the data

I am facing an issue while trying to update values stored in MongoDB. I thought of using mongoose to view and edit the data, but it seems like I'm encountering an error along the way. Has anyone successfully implemented this kind of task before? impo ...

databasereactjsmongodbtypescriptmongoose

Is there a way to add zeros at the beginning of ZIP codes that have only 3 or 4 digits using LODASH or Typescript?

Looking at the JSON data below, it includes information on USPS cities, states, counties, latitude, longitude, and zip codes. With over 349,000 lines of data, it's very extensive. ... { "zip_code": 988, "latitude": 18.39 ...

jsontypescriptlodashangular13

How to Retrieve Rectangle Positions on a Canvas

I am facing a specific scenario: I have created a rectangle on the canvas. By using the mouse wheel, the user can zoom in and out based on the position of the mouse cursor. Below is the TypeScript code for zooming: this.context?.clearRect( 0, 0 ...

typescriptcanvasfrontend

The null error occurs when rendering with React's state array

When I try to call an API that emits JSON, I am encountering an issue. I call the promise API function in componentDidMount, set the state, and then call it in the render method, but it always returns a null error. I need assistance, please. Interface fo ...

javascriptjsonreactjstypescript

Is it possible for me to incorporate a portion of the interface?

Is it possible to partially implement an interface? export interface AuthorizeUser { RQBody: { login: string; password: string; }; RSBody: { authorizationResult: AuthorizationResult; }; }; class AuthorizeUserRQBody implements Authorize ...

typescript

Typescript error when using fill or justify prop in React-bootstrap with Typescript

Code import { useCallback, useState, useEffect } from 'react'; import { Tabs, Tab, Spinner, Alert } from 'react-bootstrap'; import { Categories } from '../../models/ICategory'; import IMovie from '../../models/IMovie&apo ...

reactjstypescriptreact-bootstrap

Change the type of an object to a different type

Within my class, I have set the type of range to IntervalRange. export class Test {range: IntervalRange;} Then, in the parent class, I initialize the value: export class TestInitializer { Create(){ return <Test>{ range: IntervalRange.i ...

javascripttypescriptcastingtype-conversion

Angular promise not triggering loop creation

I am encountering an issue with a particular function handleFileInput(file: any) { let promise = new Promise((resolve, reject) => { this.uploadFileDetails.push({ filename:this.FileName,filetype:this.FileType}); ... resolve(dat ...

angulartypescript

The address :::3000 is already in use by NestJS

While attempting to deploy my NestJs server on a C-Panel hosting, I have encountered an issue. Despite properly installing all node_modules and ensuring every project file is in place, the server fails to start and continuously displays the following error ...

node.jstypescriptcpanelnestjs

Expanding Classes through Index signatories

My attempt at creating an abstract class is not going as smoothly as I hoped. I suspect my limited knowledge of TypeScript is the primary issue, even though this seems like a common scenario. The abstract class I'm working on is called Program. It co ...

typescript