Nuxt(Bridge+TypeScript)组件报TS2339属性active不存在如何解决

问题原因 #

你使用的是Vue 2的选项式API搭配TypeScript，默认情况下TypeScript无法自动合并data、methods等选项的类型，因此静态检测时识别不到this上挂载了data返回的active属性，才会抛出TS2339错误。代码运行正常是因为Vue运行时确实会把data的属性挂载到实例上，只是静态类型检测阶段没有识别到而已。

解决方案 #

方案1：用Vue.extend包裹组件定义（最适配Vue2选项式的写法） #

这是Vue 2官方针对TypeScript场景提供的工具方法，能自动合并各选项的类型，让TS正确识别this上的属性，修改script部分代码即可：

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data(){
    const active:boolean=false;
    return{
        active
    }
  },
  methods: {
    toggle():void{
       this.active= !this.active
    },
  },
});
</script>

方案2：使用defineComponent（适配Nuxt Bridge场景） #

Nuxt Bridge默认集成了Composition API支持，你也可以用defineComponent包裹组件，效果和Vue.extend一致：

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  data(){
    const active:boolean=false;
    return{
        active
    }
  },
  methods: {
    toggle():void{
       this.active= !this.active
    },
  },
});
</script>

方案3：改用组合式API写法（彻底避免this类型问题） #

如果愿意尝试组合式API，可以完全规避this相关的类型推断问题，写法更简洁：

<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const active = ref(false)
    const toggle = () => {
      active.value = !active.value
    }
    return {
      active,
      toggle
    }
  }
});
</script>

内容的提问来源于stack exchange，提问作者Hung Om