vue 这种类型推断在数据方法中不起作用,

u0sqgete 于 5个月前发布在其他

关注(0)|答案(3)|浏览(71)

版本

2.6.14

复现链接

复现步骤

使用 vue create 创建一个 Vue 应用，无论是 2.x 还是 3.x 都可以，只要它是 TypeScript 并且使用了对象风格的组件语法。然后前往 HelloWorld.vue,在 props 定义的下方粘贴以下代码：

data (): { hellStringType: string, hellNumberType: number, hellInvalid: string} {
    debugger;
    return {
      hellStringType: this.getNumber(),
      // should fail due to field type and return type not matching
      hellNumberType: this.getNumber(),
      // should fail due to there being no such function
      hellInvalid: this.buildSomethingElse(),
    }
  },
  methods: {
    getNumber (): number {
      return 42
    }
  }

预期结果

方法调用的类型推断应该正常工作，因此编译应该失败。

实际发生的情况

类型推断不起作用，无效的代码可以正常编译。类型推断仅对 props 有效。在浏览器中运行带有调试语句的代码时，可以访问到调用的方法。

vue

来源：https://github.com/vuejs/vue/issues/12427

3条答案

按热度按时间

tcomlyy61#

我也有这个问题。

赞(0）回复(0）举报 5个月前

xzlaal3s2#

我遇到了同样的问题

interface IDropdownItem {
  selector: string,
  handler: number,
  title: string,
}

interface HeaderData {
  isShowDropdown: boolean
  dropdownItems: Array<IDropdownItem>
}

我有这样的接口来描述数据

data(): HeaderData {
    return {
      isShowDropdown: false,
      dropdownItems: [
        {
          selector: 'SELECTOR-1',
          handler: '123',
          title: 'TITLE-1',
        },
        {
          selector: 'SELECTOR-1',
          handler: '123',
          title: 'TITLE-1',
        },
      ]
    };
  },

在这种情况下，TypeScript会高亮显示"handler"字段的错误类型