I have an angular project built with nx I want to import standard JavaScript libraries which do not have typescript typings for example I want to install and use cytoscape and cytoscape-context-menus
I get compilation errors such as
error TS7016: Could not find a declaration file for module
'cytoscape-context-menus'.
'C:/dev/armo/armo-ng-app/node_modules/cytoscape-context-menus/cytoscape-context-menus.js'
implicitly has an 'any' type. Try npm i --save-dev #types/cytoscape-context-menus if it exists or add a new declaration
(.d.ts) file containing declare module 'cytoscape-context-menus';
How can I solve them? I tried to put declaration files but I think my setup doesn't see them.
since there's no available type definition npm package, you have to write your own. start with the ones you need and continue to build on top of it as needed.
if you like you can share it too as an npm package.
found this article for writing TypeScript type definition files by #dubtypescript: http://blog.wolksoftware.com/contributing-to-definitelytyped
also take a look at how cytoscope is typed from here, borrow their ways: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cytoscape/index.d.ts
Added a stackblitz to checkout:
https://stackblitz.com/edit/cytoscape-6cyuem?file=src%2Fapp%2Fcytoscape-context-menus.d.ts
Related
I am working on a svelte application that is using TypeScript. I wanted to implement PDF viewer like pdf.js. I really like this project, so I found an NPM package for it here. I installed the package and tried to import 'pdfjs-dist', I got an error which says:
Could not find a declaration file for module 'pdfjs-dist'. './node_modules/pdfjs-dist/build/pdf.js' implicitly has an 'any' type.
Try npm install #types/pdfjs-dist if it exists or add a new declaration (.d.ts) file containing declare module 'pdfjs-dist';
I tried to install #types/pdfjs-dist, and went well but still facing that error. I don't know why. I also got this repo but wasn't helpful for what I was looking for.
My Imports
<script type = "ts" >
import pdfjs from 'pdfjs-dist';
import pdfjsWorkerEntry from "pdfjs-dist/build/pdf.worker.entry";
</script>
This is because https://github.com/mozilla/pdf.js/ isn't built in Typescript so there are no typings for it. This shouldn't be a problem if you allow it in your typescript project.
--allowJs works for me https://www.typescriptlang.org/tsconfig#allowJs
when trying to npm install a javascript component into a typescript project, I get a typescript error for missing the d.ts file or a #types component:
TypeScript error in /Users/oded/code/base-components/src/App.tsx(3,33):
Could not find a declaration file for module '#bit/bit.web.components.comment-carousel'. '/Users/oded/code/base-components/node_modules/#bit/bit.web.components.comment-carousel/dist/src/components/comment-carousel/index.js' implicitly has an 'any' type.
Try `npm install #types/bit.web.components.comment-carousel` if it exists or add a new declaration (.d.ts) file containing `declare module '#bit/bit.web.components.comment-carousel';
I am the author of the #bit/bit.web.components.comment-carousel component in a different project.
There are 2 ways I can think of to resolve this:
I can bit eject it from the author project it was first written in (and where it is currently used), and add a d.ts to the component.
I can bit import the component and modify it in my consuming project but it feels like a bit of an overkill.
Is there a better way to achieve this?
We're using Tabulator-tables in a large Angular project and I cannot seem to find a usable definition files.
I've tried https://www.npmjs.com/package/#types/tabulator-tables which seems updated etc but it results in lots of errors in my IDE and the project will not compile as a result. There are many errors even though the compilation worked before I added the types package. Its pointless and impractical to add many #ts-ignore comments.
Be advised - I took notice to use the same version of the type definition package as installed in my project (v4.2.2). I assume the problem is with the automatic generation of the above package - the resulting .d.ts file is not usable as a result.
Please correct me if I'm wrong and any help in integrating definition files will be appreciated. TIA!
I had a similar issue with adding TypeScript typings on Angular project and here's what i did:
encapsulated Tabulator inside Angular component (data-grid.component.ts in my case);
npm install #types/tabulator-tables
created file data-grid.component.d.ts with:
declare module 'tabulator-tables' {
export = Tabulator;
}
the key thing: removed import Tabulator from 'tabulator-tables' from file data-grid.component.ts
And it's worked.
A full set of TypeScript Typings can be found in the #types/tabulator-tables npm package
npm install #types/tabulator-tables
An example of how to use the typings in a project can be found here
The Language Documentation includes more information on the available typings
I already wrote an answer for this issue, not good enough in my opinion, but some people upvoted it as right, so I decided to leave it as it is and write a new one.
There is some issues with adding types for tabulator, this is because type annotations not being exported, but there is a way to use them.
After installation of types for tabulator (npm install --save #types/tabulator-tables), you should open (or create it, if it's not exists) file index.d.ts inside directory src, and copy following code into it:
declare module 'tabulator-tables' {
export = Tabulator;
}
You need to ensure that you have "allowSyntheticDefaultImports": true inside compilerOptions of file tsconfig.json or tsconfig.app.json (depends on your project), and tsconfig.spec.ts (it needs for unit testing).
Very important to unload and start over ng serve after editing of tsconfig.
After that all typings should work. Just in case I created simple Angular example, hope this helps.
I am trying install react-input-search. I have error:
Could not find a declaration file for module 'react-search-input'. '.../app/node_modules/react-search-input/lib/index.js' implicitly has an 'any' type.
Try npm install #types/react-search-input if it exists or add a new declaration (.d.ts) file containing declare module 'react-search-input';ts(7016)
Typescript should go with Typescript NPM package, the Typescript NPM package had prefix #types/ on it name.
The NPM package react-search-input do not had Typescript package for it yet, then you can simple fix by following
Create file with name globals.d.ts and put on your source root of Typescript watcher folder
Put declare module 'react-search-input' on that file
And it should working fine
This is a common error that you can simply solve by creating an index.d.ts file and then add a declaration line like this:
declare module 'react-input-search';
You can save this file anywhere you wish but make sure to add the filepath to tsconfig.json like this "typeRoots": [
"types/index.d.ts"
],
This is assuming you saved it in types/index.d.ts
It's a typescript error. It means that there is no type declarations in 'react-input-search' library. There is no package 'react-input-search' with types for it, so you need to declare usage of these library in your project by creating a file with extension .d.ts (for example libraries.d.ts) and insert a line declare module 'react-search-input'; into it.
You can always create the type definition library for this library react-search-input and put it on definitelytyped so now everyone including you can use it.
Here is a guide with examples on how to create a type definition library.
Say I write a node module, m. Later, I decide to add Typescript typings to it. Luckily, the module only exports a single function, so the m.d.ts file is as follows:
/// <reference path="./typings/globals/node/index.d.ts" />
declare module "m" {
doThings(b: Buffer): int;
export = doThings;
}
My function uses node's Buffer, so I included a valid reference to the node typings in the installed typings folder (without it, Sublime gives me the "Cannot find name 'Buffer' message, which seems like a bad thing). Everything looks good, so I update the typings key in my package.json and deploy.
Separately, I'm using module m in a separate typescript project, p. I don't have to worry about using typings, since my module has types included. When I run tsc, I get the following error: node_modules/m/m.d.ts(6,1): error TS6053: File '/Users/$USER/projects/p/node_modules/m/typings/globals/node/index.d.ts' not found. That makes a lot of sense, since there isn't a typings folder in node_modules (I was under the impression checking generated folders like that was discouraged). When a typings file is loaded into DefinitelyTyped, it strips out all of the triple slash references (and the best practices say that you shouldn't include them in d.ts files). When there's a typings file loaded into an npm module, nothing is stripped out.
So, my question is this: can I have my cake and eat it too? Is it possible to have valid typings in my module (m) while not including broken references in external projects (p)?
Thanks a bunch!
can I have my cake and eat it too? Is it possible to have valid typings in my module (m) while not including broken references in external projects (p)?
You don't include node.d.ts as a reference tag. Instead you specify that people need to include node.d.ts in their compilation context e.g. using tsconfig.json.