VS Code 中的 Vue Array Prop JSDoc TypeScript 错误：“ArrayConstructor”类型缺少“MyCustomType []”类型中的以下属性

Posted 2023-03-13

【中文标题】VS Code 中的 Vue Array Prop JSDoc TypeScript 错误：“ArrayConstructor”类型缺少“MyCustomType []”类型中的以下属性

【英文标题】：Vue Array Prop JSDoc TypeScript error in VS Code: Type 'ArrayConstructor' is missing the following properties from type 'MyCustomType[]'

【发布时间】：2019-09-19 10:43:33

【问题描述】：

受“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 中打开了“Check JS”设置，它允许您像输入 TypeScript 一样检查您的 JS 文件。通过 JSDoc / @type cmets 为 Visual Studio Code “启用”类型检查。我使用以下内容将我的 JS 代码与我的 Vue 代码放在一个单独的文件中：

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

如果我尝试在这样的组件上设置 Array 道具的类型： 我的组件.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 道具成员实际设置类型。

另见：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

将 Object 转换为返回接口的函数，如下所示：

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

【参考方案1】：

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

我需要将上面的 sn-p 更改为：

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

另一种也有效的语法（我更喜欢）是：

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