openlang

Vue.js data property typing fails

Can somebody explain the syntax for assigning a type to vue.js data properties (the application uses typescript)? What I'm after looks something like this:

@Component({
    data() {
        return {
            groups: Array<GroupInfo> = []
        }
    }
})

However, vue treats the type like a value, leaving me confussed about the right approach.

The conversation continues 2

Follow the reasoning
  1. Permalink

    Putting : before a type in the usual manner won't work here, since it clashes with the key: value syntax of JavaScript object literals. Instead, rely on type inference, asserting that the initially empty array [] has type GroupInfo[]:

    @Component({
        data() {
            return {
                groups: [] as GroupInfo[]
            }
        }
    })
  2. Permalink

    Consider class-style components (https://v2.vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Component%E2%80%8C%E2%80%8Bs) through vue-class-component, which let those declarations become properties of the class and work nicely with Typescript.

    import Vue from 'vue'
    import Component from 'vue-class-component'
    
    // @Component marks this class as a Vue component
    @Component({
        // Component options can all be supplied here
        template: '<button @click="notify">Click!</button>'
    })
    export default class NoticeComponent extends Vue {
        // Instance properties can hold the initial data
        greeting: string = 'Hello!'
    
        // Instance methods can provide component methods
        notify (): void {
            window.alert(this.greeting)
        }
    }

Other sides of the same question

  1. Making the sender appear as a label instead of an email address using Java Mail

    Im sending messages through the Java Mail API. On arrival, the inbox displays the address that sent the message. Id like some…

    Replies 2Latest activity java
  2. Dynamics CRM access from TypeScript

    Because my CRM code runs in a webresource, I have to write to retrieve the entity's data. Regrettably, that expression fails…

    Replies 2Latest activity typescript
  3. What date formatting does a Gleam HTTP response header need?

    I want to send a Date header. The required format looks like this: This is my current attempt:

    Replies 3Latest activity gleam