TypeScript를 사용하여 Vue.js에서 비반응 인스턴스 속성을 지정하는 방법

TypeScript를 사용하여 Vue.js에서 비반응 인스턴스 속성을 지정하는 방법

이행하고 있습니다.Vue.js컴포넌트를 TypeScript에 추가합니다.안내에 따라서, 나는 그것을 사용하려고 했다.Vue.extend()내 컴포넌트를 위해.구성 요소는 다음과 같습니다.

import Vue from 'vue';

const Component = Vue.extend({
  // type inference enabled

  created() {
    // `y` is non-reactive property
    this.y = 20; // TYPESCRIPT THROWS ERROR
  }

  data() {
     return {
        // x is reactive property
        x: 10
     };
  }

});

위의 예에서 나는 자산이 있다.x반응성이 있고y비표준 속성으로 지정됩니다.하지만, 나는 단지 부동산에 대한 유형 추론을 얻을 수 없다.yTypeScript에서 증강 기능이 동작하기 때문입니다.

구성 요소를 정의하는 데 단순 개체 내보내기를 사용할 수 없습니다. 두 구성 요소 모두에 대해 형식 오류가 발생하기 때문입니다.y그리고.x.

이제 이 파일을 JS로 유지하거나 코드를 이동해야 합니다.vue-class-component내가 이 일을 처리할 수 있게 해주지하지만, 저는 이사가기 꺼려집니다.vue-class-component라이브러리 레벨의 코드이기 때문입니다.

어떻게 하면 좋을지TypeScript행복할까?

가장 간단한 해결책은 다음과 같습니다.

  data() {
     return {
        // x is reactive property
        x: 10
     } as any as { x: number; y: number };
  }

단, 이를 위해서는 모든 속성을 명시적으로 정의할 필요가 있습니다.data.

---

또는 다음 도우미를 사용할 수도 있습니다.

function withNonReactive<TData>(data: TData) {
    return <TNonReactive>() => data as TData & TNonReactive;
}

다음과 같이 합니다.

  data() {
     return withNonReactive({
        // x is reactive property
        x: 10
     })<{
        // non-reactive properties go here
        y: number
     }>();
  }

TypeScript 오류를 제거하는 한 가지 방법은 다음 속성을 정의하는 것입니다.

data() {
    return {
       nonReactive: {} as any
    }
}

그런 다음 생성된 오브젝트에 비메모리 속성을 추가합니다.

created() {
    this.nonReactive.foo = {}
}

다른 방법은 컴포넌트용으로 typecript shim 파일을 작성하는 것입니다.

기능 래퍼 없는 솔루션

Vue.extend({
  data() {
    const reactive = {
      name: 'Jack Sparrow',
    }

    return reactive as typeof reactive & {
      nonReactiveProperty: string;
    }
  },
})

언급URL : https://stackoverflow.com/questions/48071279/how-to-specify-non-reactive-instance-property-in-vue-js-using-typescript