Guide to utilizing constructor options with a TypeScript Vue class

Question

Guide to utilizing constructor options with a TypeScript Vue class

When reviewing the code snippet provided at https://i.sstatic.net/vfDZc.png, a compilation error occurs.

An error is displayed in C:/dev/AscendXYZ/Ascend.Wammo.RadarIngestor/apps/Ascend.Wammo.Dashboard/src/components/BirdControlMap.tsx
32:1 Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof MapLayout': extend, nextTick, set, delete, and 9 more.
    30 | }
    31 |
  > 32 | @Component
       | ^
    33 | export default class MapLayout extends Vue {
    34 |
    35 |     constructor(options: MapLayoutOptions) {

Is there a way to utilize constructor options in vue/typescript so that intellisense can be applied to jsx markup?

typescript vue.js

Answer 1

Answer №1

Presented here is a potential solution.

interface MapLayoutOptions{
    subscriberId: string;
    radarId: string;
    zoneGroupId: string;
    interval: number;
    apiEndpoint: string;
}

export abstract class TsxComponent<P> extends Vue {
    private vueTsxProps!: Readonly<{}> & Readonly<P>;
}

declare global {
    namespace JSX {
        interface ElementAttributesProperty { vueTsxProps: {}; }
    }
}

@Component
export default class MapLayout extends TsxComponent<MapLayoutOptions> {
}

The validation process ensures that the properties defined in the interface are properly implemented and offers autocomplete suggestions for tsx elements.

Answer 2

Presented here is a potential solution.

interface MapLayoutOptions{
    subscriberId: string;
    radarId: string;
    zoneGroupId: string;
    interval: number;
    apiEndpoint: string;
}

export abstract class TsxComponent<P> extends Vue {
    private vueTsxProps!: Readonly<{}> & Readonly<P>;
}

declare global {
    namespace JSX {
        interface ElementAttributesProperty { vueTsxProps: {}; }
    }
}

@Component
export default class MapLayout extends TsxComponent<MapLayoutOptions> {
}

The validation process ensures that the properties defined in the interface are properly implemented and offers autocomplete suggestions for tsx elements.

Guide to utilizing constructor options with a TypeScript Vue class

Answer №1

Similar questions

The function is not defined for this.X in TypeScript

Utilize Firebase Realtime Database to generate new data entries using triggers

Missing "this" after initialization? (typescript/node/express)

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

exploring the ins and outs of creating computed properties in TypeScript

Invoke a function in a different component by utilizing the composition API

Vue: Issue with v-for rendering images as strings

Angular 8: Issue with PatchValue in Conjunction with ChangeDetector and UpdateValue

Unable to transfer the form value to the service and City value cannot be updated

Conceal mat-table column when form field is empty

Typescript types can inadvertently include unnecessary properties

How can I showcase a child element's v-model as the v-model of a Vue component?

Determine parameter types and return values by analyzing the generic interface

return to the original secured page based on the most recent language preference

Access to the server has been restricted due to CORS policy blocking: No 'Access-Control-Allow-Origin'

What is the reason that {a: never} is not the same as never?

Having trouble accessing specific results using Firestore's multiple orderBy (composite index) feature

Create a new project using Firebase Functions along with a Node.js backend and a React.js frontend

You cannot invoke this expression while destructuring an array of React hooks in TypeScript

When directly mutating a mutable prop, the computed set handler does not get triggered