Thanks for the great into Diana! Just to add a bit more, if you want to search for a type that is available you can go here definitelytyped.org, or just try to run the command below.
npm install --save-dev @types/the-package-name-you-are-trying-to-use
If it installs the package the types are available, otherwise you can use it untyped or as Diana suggested create your own. Also if the types are not available think about creating it yourself and giving back to the DefinitelyTyped community on GitHub. I contributed one and the developers were very helpful in reviewing it and providing suggestions on fixes.
Another think I wanted to add was using untyped packages in TSX (React). Depending on how the package was built you will probably have to define a very simple d.ts file just for the import work. In the example below I wanted to try out the dom-to-image-more library quickly to see if it would accomplish something I needed to do, there were no typings available and I didn't want to create them just to test it out.
- Create a "types" folder directly under the folder where you index.ts file is located. (not necessary but I like to keep all my type definitions together for my sanity)
- Create a new d.ts file, I give mine the same name of the package I am using. For example dom-to-image-more.d.ts
- You only need one line in your new dom-to-image-more.d.ts file to get started using the package.
declare module 'dom-to-image-more';
- Within your tsx file declare your import statement
import * as domtoimage from 'dom-to-image-more';​
- You should now be able to utilize the package (without types available) in your code.
domtoimage.toBlob(document.getElementById('pcfContainer')!, options).then(
(blob: Blob) => {
var controlArea = document.getElementById('pcfContainer');
popup.hide();
saveAs(blob, 'PCFControl.png');
});​
