How to use constructor options for a typescript vue class?

Question

Given the following code snippet

an compile error is given

ERROR 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) {

Are there any way to use constructor options in vue/typescript ? such i get intellisense on my jsx markup?

If you don't use class components this works pretty well (lightly tested) github.com/wonderful-panda/vue-tsx-support. Not sure about class component support — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented May 23, 2019 at 8:51
I found that also, and looked over the code base and was like. How is so much code needed to support this and was thinking that it must be outdated. I really wanna stick with classes in typescript (thats the world i come from). I provied a solution below that seems rather simple and works. — Poul K. Sørensen
– Poul K. Sørensen, Commented May 23, 2019 at 8:53
I am starting a Vue project and am considering between the two.. unfortunately there seems to be no community support behind clas components (jsx is also pretty weakly supported but at least it seems workable) — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented May 23, 2019 at 8:56
You might be interested in this: It appears class components will be dropped: github.com/vuejs/rfcs/pull/17#issuecomment-494242121 — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented May 23, 2019 at 11:47
thanks for the link. interesting. But using typescript and @component decorators, is it not just synthetic sugar and it compiles to something that vue understands ? I just started a project also, and found that i got tsx and components to work very quickly without major issues. — Poul K. Sørensen
– Poul K. Sørensen, Commented May 23, 2019 at 13:11

Poul K. Sørensen · Accepted Answer · 2019-05-23 08:52:04Z

1

Here is one 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> {
}

Type checking is ensuring that the interface properties are implemented and provide intellisense for tsx elements.

answered May 23, 2019 at 8:52

Poul K. Sørensen

17.7k24 gold badges141 silver badges296 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use constructor options for a typescript vue class?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related