typescript - VS Code : Type 'ArrayConstructor' is missing the following properties from type 'MyCustomType[]' 中的 Vue Array Prop JSDoc TypeScript 错误

Question

受“Why I no longer use TypeScript with React and why you might want to switch too”上“使用 JSDoc 进行类型检查”部分的启发，我正在使用 Vue CLI 创建的带有 ES6 的项目，但没有 TypeScript 编译或 TypeScript 代码。

我在 Visual Studio Code 中打开了“检查 JS”设置，它允许您像检查 TypeScript 一样检查您的 JS 文件。通过 JSDoc/@type 注释为 Visual Studio 代码“启用”类型检查。我使用以下代码将我的 JS 代码与我的 Vue 代码放在一个单独的文件中:

<script src="./MyComponent.js"></script>

如果我尝试像这样在组件上设置 Array prop 的类型: 我的组件.js

 /**
 * @typedef {object} MyCustomType
 * @property {number} myNumberField
 */

export default {
  props: {
    /** @type {Array<MyCustomType>} */
    resultCards: Array
  }
};

我在 Visual Studio Code 中遇到以下问题(红色下划线):

Type 'ArrayConstructor' is missing the following properties 
from type 'MyCustomType[]': pop, push, concat, join, and 25 more.ts(2740)

有人知道解决这个问题的方法吗？我想将我的代码保留为 JavaScript，这样我就不必将项目转换为 TypeScript 来进行类型检查。如果没有解决方案，我可能会忽略尝试为 Vue Prop 成员实际设置类型。

另请参阅:Microsoft/TypeScript: JSDoc support in JavaScript

编辑:如果在 Vue 中使用 TypeScript，我认为以下链接会有答案:但我正在尝试使用纯 JavaScript 和 JSDoc，然后使用 VSCode 的类型检查。

来自 https://frontendsociety.com/using-a-typescript-interfaces-and-types-as-a-prop-type-in-vuejs-508ab3f83480

cast the Object as a function that returns the interface, like this:

props: {   testProp: Object as () => { test: boolean } }

Answer 1

又搜索了一些，这次我在这里找到了答案:https://blog.usejournal.com/type-vue-without-typescript-b2b49210f0b

我需要将上面的代码片段更改为:

export default {
  props: {
    /** @type {{ new (): MyCustomType[] }} */
    resultCards: Array
  }
};

另一种有效的语法(我更喜欢)是:

export default {
  props: {
    /** @type {{ new (): Array<MyCustomType> }} */
    resultCards: Array
  }
};