I have a question while developing a vue.js project using typescript.

I want to use the progress bar like the demo below, but it is not possible to use because it this library does not support typescript.

http://hilongjw.github.io/vue-progressbar/index.html

Can someone tell me which library to use?

thank you.

CodePudding user response：

TypeScript is incrementally adoptable. Which means you can slowly transition a JS project to TS, you don't have to do it all at once.

Also, TS it's a superset of JavaScript. Which means that, under the hood, it's still JavaScript and you can use JavaScript modules inside of it.

Here's what you can do when you find a JS module and want to use it inside a TS project:

• check if someone else has published @types/your-module package, declaring all types of the module (where your-module needs to be the actual package name of the JS package). If existing, install it in devDependencies and TS will pick it up

• if first option is not available, create a types.d.ts in your src folder and insert a line there declaring the module. e.g:

  declare module 'your-module';

This will tell TS: Sorry, no type definitions are available for this package, but I still want to use it. So TS won't throw any errors related to the package.
The most interesting part is that most IDEs will actually bypass this and will infer types from package's exports, which, in most cases, will give you autocomplete suggestions.
IDEs have gotten better at auto-inferring types, as of late.

Side note: for your particular case, you can extend the "custom" types definition with this definition. Not official and probably not complete, but better than the basic declare module "vue-progressbar" (which would work, btw).
Another note: you only need the module "vue/types/vue" declaration in Vue2, it's not necessary if you're using Vue3.