Search code examples
angulartypescript-typingsgridstack

Typings confusion?


I'm trying to implement a third-party .js lib (gridstack.js) into my Angular project. But I'm getting confused about how the typings files (.d.ts) are used/imported.

So my approach so far has been to install gridstack through npm as well as the typings for it. Then I tried to import it in my component.ts. (import * as gridstack from 'gridstack'), but the index.d.ts is not recognized as a module. Which I guess makes sense, because there are no export statements in the index.d.ts file, but maybe I am wrong?

So my question is, how do you get access to gridstack in the DOM as well as in the component.ts? And maybe someone could clarify, if the setup is the same for every typing or if it depends on what lib you are trying to utilize. I feel like I have seen fifty different approaches to do this, and for every time I'm getting more confused.


Solution

  • no need to import typings in the component file, you should you install the typings through npm and then in your tsconfig.json file define them, then these typings will be available in all your component files

    tsconfig.json

    "compilerOptions": {
        "types": [ "node", "gridstack" ]
    }
    

    make sure you have your typings under node_modules/@types or you can define your typings path using 'typeRoots' if its defined somewhere else

    check this answer!