Vue+TypeScript子组件访问props编译正常但抛出类型错误问题

这是Vue2 + TypeScript开发场景下的静态类型推断异常问题，和运行时代码逻辑无关：

• 运行时功能正常是因为JS执行阶段this会正确绑定到组件实例，确实可以访问到props中定义的modalVisible属性，且如果你的TS配置设置了宽松校验规则，类型错误不会阻断代码编译。
• 静态类型报错是因为你使用的@types/vue版本存在已知的上下文推断缺陷：当计算属性的getter采用get: function() {}的普通函数写法时，TS没有正确把this指向当前组件实例，反而错误推断为ComputedOptions类型，所以找不到props上定义的modalVisible属性。

另外你当前的代码还存在功能隐患：你给b-modal的visible属性用了.sync修饰符，组件会尝试主动修改_modalVisible的值，但你只定义了getter没有定义setter，部分场景下可能出现状态不同步的问题。

推荐优先选择方案2，同时解决类型报错和功能隐患：

• 方案1：修改getter的写法为ES6方法简写，大部分场景下可以修复类型推断异常

computed: {
  _modalVisible: {
    get() {
      return this.modalVisible;
    }
  }
}

• 方案2（最优）：补全计算属性的setter，符合.sync修饰符的双向绑定规范，同时自动修复类型推断问题

computed: {
  _modalVisible: {
    get() {
      return this.modalVisible;
    },
    set(val: boolean) {
      // 直接触发sync规范对应的update事件，不需要额外自定义toggle-visibility事件
      this.$emit('update:modalVisible', val);
    }
  }
},
methods: {
  // 该方法可直接省略，setter会自动处理所有显隐修改场景
  hideModal() {
    this._modalVisible = false;
  }
}

对应父组件调用时可以去掉自定义的@toggle-visibility监听，.sync修饰符会自动处理状态同步：

<add-new-event-group-modal 
  :modalVisible.sync="addNewVisibility" 
  :eventGroupApi="eventGroupApi" 
  :newEventGroup="newEventGroup"
></add-new-event-group-modal>

• 方案3：升级@types/vue到Vue2对应的最新版本，修复类型定义的已知推断bug。

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