Vue + TypeScript 单文件组件定义出现TS2339类型错误求助

嘿，我明白你现在的困扰——关掉noImplicitThis虽然能暂时消掉TS2339错误，但VSCode的自动补全直接废了，这太影响开发效率了。其实这个问题的根源是你用的Vue 2.5和TypeScript 2.8的组合里，Vue.extend没法自动从props选项里推断出组件实例上的属性类型，尤其是在strict模式开启的情况下。下面是针对你当前版本的完美解决办法：

1. 显式定义Props接口，给Vue.extend传泛型参数 #

修改你的组件代码，先写一个对应props的TypeScript接口，然后把这个接口作为泛型参数传给Vue.extend，这样TypeScript就能准确识别this上的options属性了：

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

// 先定义props的类型接口，这里可以把any换成你实际需要的具体类型
interface TestComponentProps {
  options: Array<any>
}

export default Vue.extend<TestComponentProps>({
  name: 'TestComponent',
  props: {
    options: {
      type: Array,
      default: () => [],
    }
  },
  computed: {
    getOptions() {
      return this.options // 现在TS能正确识别这个属性，不会报错了
    },
  }
})
</script>

为啥这样管用？ #

在TypeScript 2.8和Vue 2.5的搭配里，Vue.extend的泛型参数就是用来告诉TS组件的props类型的。一旦你显式传递了这个接口，TS就能准确推断出组件实例的完整类型，包括props、computed这些属性，既解决了报错，又能保住VSCode的自动补全。

2. 检查tsconfig.json的类型配置 #

看看你的tsconfig.json，确保已经包含了Vue的类型定义。虽然Vue 2.5自带类型，但如果项目没自动识别到，可以在compilerOptions.types里加上vue：

{
  "compilerOptions": {
    // ... 其他现有配置
    "types": ["node", "jest", "vue"]
  },
  // ... 其他现有配置
}

另外确认include数组已经正确覆盖了所有.vue和.ts文件，这能保证TypeScript能处理你的单文件组件。

3. 关于版本的小提醒 #

你用的ts-loader 3.5.0适配Webpack 2是没问题的，但如果之后有升级计划的话，Vue 2.6+搭配TypeScript 3.x+对单文件组件的类型支持会更友好，甚至可以用defineComponent来简化写法。另外，strict: true是非常推荐的配置，能帮你提前发现很多潜在问题，千万别为了省事随便关掉它。

按照上面的方法改完，你就可以把noImplicitThis恢复成true（因为strict: true已经包含了这个设置），同时享受完整的类型检查和自动补全功能啦。

内容的提问来源于stack exchange，提问作者Rui Martins