Use Type Definitions for Popular Projects on npm with @types
Not all projects on npm ship with their own Type definitions. For example, neither lodash or jquery include them. Thankfully, VS Code can automatically find and install type definitions for you or you can simply bring them in with npm i -D @types/lodash from the @types organization on npm.
Instructor: [00:00] I'm going to import _from Lodash, and as soon as I use it, I'll type the underscore. Hit save and you'll see Parcel install Lodash for me. Then I'll use .unique to take an array and filter out any duplicates.
[00:18] If I just console.log the result with this, then you'll see the result is just one, two, because it filtered out one of the ones. I didn't get any type information from Unique or anything off of Lodash, so not a lot of help there.
[00:35] That's because Lodash does not ship with types itself. What you can do is take this suggested action from VS Code. It says you don't have the types here, so install @types/Lodash. If that light bulb doesn't show up, and you see those three dots, you can just hit command-period.
[00:53] I'll hit enter here, that will install those types for me, and you'll see them added to your package.json, under the dev dependencies. Now, off of _., I can hit auto-complete and you'll see all the different methods I have.
[01:07] If I pick one -- I'll pick camelCase -- and you can see camelCase takes a string. It gives me all that information. I can pick a different one. I'll pick add, and you can see it takes two numbers to add together, and I get tons of information just from installing those types.
[01:26] If your package doesn't ship with types, for example again, jQuery, we can import $ from jQuery, and then I'll use the $, let Parcel install it. This doesn't give me any help here. If I go up to here, hit command-period, say please install the types, now VS Code can give me all this information off of jQuery simply by installing those types.
npm i @types/<package-name>
Example: npm i @types/lodash npm i @types/jquery
And if it does not exist: While TypeScript is used to knowing everything about the code in your project, it doesn’t have to. In order to let you proceed, TypeScript just needs to know that your module exists.
And you do that through a declarations file.
In the root folder of your project, create a new file called decs.d.ts.
In this file, write:
declare module "my-untyped-module" So far, we’ve really just been following error messages. Now comes the part that the error messages leave out: making sure that TypeScript can find this file.
Include the declarations file In the root of your TypeScript project, you should have a tsconfig.json file. Open that up and find the property "include". This "include" array tells TypeScript where it should “look” for TypeScript files.
{ ... "include": [ "src" ] } You need to make sure that your decs.d.ts is included here.
You have two choices:
Move your decs.d.ts file into whatever folder you see in the "include" array. (In the example above, I’d move my file into my project’s src folder.) OR
Leave our decs.d.ts in the root of your project and add the file to the "include" array: { ... "include": [ "decs.d.ts" ] } Either choice will solve your error. You won’t have any types for the module (it’ll just be one big any) but you won’t have any errors, either.
Good luck!
(https://medium.com/@steveruiz/using-a-javascript-library-without-type-declarations-in-a-typescript-project-3643490015f3)
One more lesson could have been, that what to do when the library you want to use, does not have types available.