After reading the article "Why I no longer use TypeScript with React and why you might want to switch too", I decided to work on a Vue CLI project using ES6 without TypeScript. Instead, I enabled type checking in Visual Studio Code by utilizing JSDoc / @type comments. To keep my JavaScript code separate from Vue code, I used the following method:
<script src="./MyComponent.js"></script>
When attempting to set the type for an Array prop in a component like this within MyComponent.js:
/**
* @typedef {object} MyCustomType
* @property {number} myNumberField
*/
export default {
props: {
/** @type {Array<MyCustomType>} */
resultCards: Array
}
};
I encountered a problem in Visual Studio Code with red underlines stating:
Type 'ArrayConstructor' is missing the following properties
from type 'MyCustomType[]': pop, push, concat, join, and 25 more.ts(2740)
If anyone knows of a solution to this issue, I would appreciate it. I prefer to stick with JavaScript over converting the project to TypeScript just for type checking. If no solution can be found, I may have to forego setting types for Vue props members.
For further information, check out Microsoft/TypeScript: JSDoc support in JavaScript
Edit: While TypeScript might provide a solution for Vue, I am focused on using plain JavaScript with JSDoc and leveraging type checks from VSCode.
Source:
To address this issue, consider casting the Object as a function that returns the interface, like so:
props: { testProp: Object as () => { test: boolean } }