quasar
quasar copied to clipboard
Types of QUploader instance properties are missing
What happened?
The QUploader
scoped param is not fully typescript-ready. I used the official example for QUploader custom header and although some properties are already properly typed, others from the example are missing, notably:
- files
- queuedFiles
- uploadedFiles
- isUploading
- canAddFiles
- canUpload
- uploadSizeLabel
- uploadProgressLabel
What did you expect to happen?
The official custom header example (and others) should work as-is with TypeScript. All the properties available on scoped params should be properly typed.
Reproduction URL
https://github.com/paya-cz/quasar-scoped-param-typescript-issue
How to reproduce?
- Clone the repo.
- Look into
src/components/ExampleComponent.vue
using Visual Studio Code - Observe TypeScript errors in the
<template>
section
Notes:
- I didn't use Codepen / jsFiddle because they are not setup with TypeScript
- The project is just standard
npm init quasar
with Quasar v2, TypeScript, CLI+Vite - There is just one single commit beyond
npm init quasar
that you can inspect to see the diff, but it is just a copy/paste of the QUploader example
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
TypeScript Support
Platforms/Browsers
No response
Quasar info output
No response
Relevant log output
No response
Additional context
No response
QInput is also missing instance property types #11510. I am linking it here because they are related.
Fix will be available in Quasar v2.8
not fixed 2.8.2!
@paperisque it would have been more helpful if you share what's not fixed. But, isUploading
seems to be missing, so I added it in #14399. If something else is missing please let us know.
For anyone else that comes across this: Volar doesn't automatically pick up changes to node_modules
. So, make sure to restart VS Code or just the Volar extension after installing/upgrading dependencies. With 2.8.2, you will still get an error regarding isUploading
, but everything else will work properly. Starting from v2.8.3(not released yet), everything should work fine.
sorry, yes I meant "isUploading". I am waiting 2.8.3 for now I'm using:
interface LocalUploader extends QUploader {
isUploading: () => boolean;
}
...
const isUploading = (scope: QUploader) => {
return (scope as LocalUploader).isUploading;
};