TypeScript 数据结构 VueJS答案

【问题标题】：TypeScript datastructure VueJSTypeScript 数据结构 VueJS
【发布时间】：2018-08-23 00:55:42
【问题描述】：

我像这样将一些数组绑定到我的组件

<my-component :filters="columnFilters"></my-component>

与

columnFilter: ["name", "surname", "hours"]

在 MyComponent.vue 中，我将 filters 作为具有默认功能的 Array 类型的道具。

现在，当我想在 计算属性 中使用一个简单的 forloop 来迭代 filters 中的项目时：

for(var name of this.filter)
{
   console.log(name);
}

TypeScript 不让我这么做，因为他认为 this.filter 是任何东西

编辑

问题是我在 Vue.js 中的所有 props 都被视为 any 类型，即使它们是这样定义的：

filter: {
  type: Array,
    default: function() {
      return [];
    }
  }

所以打字稿的编译器不会编译，因为他看不到过滤器是数组类型的。有没有办法让他明白？

【问题讨论】：

for in in javascript over an array 为您提供数组元素的索引。使用for of（较新的 ES6 语法）或常规 for 循环。
对于 Array 类型的作品，我使用了带有内部数组类型的 VueJS 类型，但实际上它是一个观察者集合，这就是我找不到关于这个集合的任何文档的全部意义
你不需要担心它是被观察到的——这是 Vue 包装数据以使其具有反应性。
如果我这样做：for(var name of this.filters) 我有例外 Type '(() => any) | ComputedOptions' 不是数组类型或字符串类型。
也许我需要更改我的编译器选项

【解决方案1】：

找到一种方法来告诉我的道具类型，只需创建一个具有正确类型的新变量并在我使用道具的函数内部进行强制转换：

let filters: string[] = this.filters as string[];

解决了问题，但还是有点难看

【讨论】：