如何修复TypeScript中Object is of type 'unknown'类型报错问题

报错原因 #

该报错是TypeScript类型校验触发的，Vue中$refs对象下的绑定属性默认没有预置明确类型，会被TS推断为unknown类型，因此无法直接调用classList等DOM元素专属的属性和方法。

可用解决方案 #

• 临时解决方案：使用类型断言明确指定元素类型
  直接对this.$refs.task1做类型断言，告诉TS该值是DOM元素类型，同时建议把$nextTick的回调改为箭头函数，避免普通函数内部this指向异常，修改后代码如下：

  mounted () {
    this.$nextTick(() => {
      (this.$refs.task1 as HTMLElement).classList.add('increase')
    })
  }
  

• 生产环境推荐方案：提前声明$refs的类型
  在组件定义时就声明所有$refs绑定的元素类型，后续所有位置调用都不需要再加类型断言，可维护性更高，示例如下：

  export default Vue.extend({
    // 提前声明$refs下所有绑定元素的类型
    $refs: {
      task1: HTMLElement
    },
    mounted () {
      this.$nextTick(() => {
        // 这里直接调用不会触发类型报错
        this.$refs.task1.classList.add('increase')
      })
    }
    // 其他组件配置...
  })
  

内容的提问来源于stack exchange，提问作者Victor Zhvanetskiy