openlang
웹, 그래픽, 게임

Vue.js 데이터 속성의 타입 지정이 안 돼요

이어지는 대화 2 ↓

vue.js 데이터 속성에 타입을 지정하는 문법을 설명해 주실 분 있나요(애플리케이션은 typescript로 작성하고 있어요)? 제가 원하는 건 대략 이런 모양이에요:

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

그런데 vue가 타입을 값처럼 취급해서 어떻게 해야 할지 혼란스러워요.

영어에서 번역원문 보기

이어지는 대화 2

서로의 근거를 따라

  1. 평소처럼 타입 앞에 :를 놓으면 여기서는 동작하지 않습니다. JavaScript 객체 리터럴의 key: value 문법과 충돌하기 때문입니다. 대신 처음에는 빈 배열인 []가 GroupInfo[] 타입이라고 단언해서 타입 추론을 이용하세요:

    @Component({
    data() {
        return {
            groups: [] as GroupInfo[]
        }
    }
})
    영어에서 번역원문 보기

  2. vue-class-component를 통한 클래스 스타일 컴포넌트(https://v2.vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Component%E2%80%8C%E2%80%8Bs)를 고려해 보세요. 이렇게 하면 그 선언들을 클래스 속성으로 옮길 수 있고 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)
    }
}
    영어에서 번역원문 보기

같은 질문의 다른 갈래

  1. 웹, 그래픽, 게임

    Java Mail에서 이메일 주소 대신 발신자 이름을 표시하기

    Java Mail API로 메시지를 보내고 있어요. 도착한 메일의 받은편지함에는 보낸 주소가 표시돼요. 그 발신자 주소 대신 텍스트를 보여 주고 싶어요. facebook에서 오는 메일은 받은편지함에 "mailbox@faceb…

    답글 2java
  2. 웹, 그래픽, 게임

    TypeScript에서 Dynamics CRM에 접근하기

    CRM 코드가 웹 리소스 안에서 실행되다 보니 엔터티 데이터를 가져오려면 이렇게 작성해야 해요. 그런데 typescript로 작성하면 이 표현식이 컴파일되지 않아요. 지금은 Xrm.Page 앞에 window.parent를..…

    답글 2typescript
  3. 웹, 그래픽, 게임

    Gleam HTTP 응답 헤더에는 어떤 날짜 형식이 필요한가요?

    Date 헤더를 보내고 싶어요. 필요한 형식은 다음과 같아요: 지금까지 시도한 코드는 이거예요:

    답글 3gleam