I am trying to generate a single typescript definition file for my typescript project which contains several base/inherit classes, utilities, etc. In our project, each A.ts file will be compiled to A.js file, A.js.map file, and A.d.ts. After research, I found both tools can help me to bundle those d.ts file into a single d.ts file. Does anyone use them before? Which one is better?
dts-generator worked better for me out of the two. However, I would suggest to also have a look at npm-dts. npm-dts adds index.d.ts file to TS-based npm package so it could be consumed out of the box by other TS modules and have code suggestions even if src is not included with it.
If you use "npm-dts", you do not need to generate declarations for each A.ts - it will crawl your project and generate typings on its own.
Command line usage looks something like this:
npm-dts -r /your/project/root generate
Note that it expects root to contain package.json file. Also, your project has to have node modules installed with "TypeScript" among them.
Hope this helps.
Related
I have the following file structure:
application1
|pacakge.json
|src
||file1.ts
widget-lib
|package.json
|src
||file2.ts
||index.ts
.\widget-lib\src\index.ts bundles and reexports everything in widget-lib package.
export * from '.\file2'
.\application1\src\file1.ts and other files refence widget-lib by alias
import { foo } from 'widget-lib';
I'm compiling .\application1\src\ with Babel into .\application1\build-test\, how do I instruct Babel to also include widget-lib into this particular compilation? My goal is to produce a folder with all JS files needed to debug unit tests in modern node with esm package - just strip down TS types and put resulting JS files into proper place, like this:
application1
|build-test
||application1
|||src
||||file1.js
||widget-lib
|||src
||||index.js
||||file2.js
I'm using https://github.com/tleunen/babel-plugin-module-resolver to rewrite alias paths like 'widget-lib' to expected relative paths, I just need to instruct babel to also include the actual files from widget-lib into .\build-test\widget-lib folder. I tried passing both .\application1\src and .\widget-lib\src together to Babel, but than it outputs content of both .\src folders into one.
I ended up running several babel process in parallel, spawning them with a node script as described here Execute a command line binary with Node.js and using the script to analyze their output and emit additional information.
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.
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.
I have tried harder and harder to understand the difference between bundle and bundle SFX from the documentation of JSPM and system.js. But I was unable to get the difference. I haven't used jspm till now but I want to use it in my current project.
Another question - If I am importing different modules in a.js and different modules in b.js, where both a.js and b.js are mutually exclusive, can I bundle both of them in a single file c.js using JSPM?
Please help, I would really appreciate it.
To create an output distributable script file that can be included
entirely on its own independent of SystemJS and jspm, we can use
bundle-sfx.
jspm bundle-sfx app/main.js app.js app.js
contains a micro-loader
implementation (1.4KB gzipped), converts all module formats into ES5
(including compiling ES6), and maintaining bindings and circular
references as with normal bundles.
Source: http://jspm.io/docs/production-workflows.html
Currently my process for building is:
Write lots of typescript files with ES6 module syntax
Generate an index.ts which re-exports all modules from one point
Compile to CommonJS + System
Output Descriptor/Typing files
This results in an index.js file which re-exports all the internal files without the developer consuming it needing to know about it, as well as a lot of d.ts files which mirror the file structure.
Now this works, but if I were to take this approach to the browser I would need to webpack up all the js or it would be a http request nightmare pulling in all the individual files. Currently this library would be consumed as a dependency for other libraries, so it is not an end point for logic or anything it is a module/library.
Now the main question is with webpack I know I can load TS in and get a commonJS module out, however I cannot find any way to generate d.ts files with webpack. So is there a way for me to use webpack as the compiler/packager in this scenario and have an output my-lib.js and my-lib.d.ts rather than the current approach which yields lots of individual files.
== Extra Clarification on Use Case ==
Just to try and make sure everyone is on the same page here when I say it is a library that would be re-used what I mean is that this is something that would be loaded via npm or jspm or something as a module dependency for other modules.
So for example let us pretend jquery doesn't exist and I am going to create it but write it in typescript for other developers to consume in both JS and TS. Now typescript outputs both js files and d.ts files, the js files are to be used as you would expect, but the d.ts files explain to other typescript files what the types contained within the library are.
So assuming I have developed jquery in TS as listed above, I would then want to publish this output (be it created by webpack or tsc) on npm/jspm/bower etc. So then others can re-use this library in their own projects.
So webpack typically is used to package an "application" if you will, which contains logic and business concerns and is consumed directly as an entry point to a larger set of concerns. In this example it would be used as a compilation and packaging step for a library and would be consumed via var myLib = require("my-lib"); or similar.
Generating the .d.ts files is not related to webpack. With webpack you can use either ts-loader or awesome-typescript-loader. Both of them make use of tsconfig.json. What you need to do is to add declaration: true in your tsconfig.json.
I'd also suggest you to take a look at typescript-library-starter. You'll find how's set up there, including UMD bundle and type definitions :).