UNPKG

5.04 kBMarkdownView Raw
1# gen-typescript-declarations
2
3[![NPM version](https://img.shields.io/npm/v/@polymer/gen-typescript-declarations.svg)](https://www.npmjs.com/package/@polymer/gen-typescript-declarations)
4
5A library which generates TypeScript declarations for Polymer and custom
6elements.
7
8## How do I use the typings?
9
10### Polymer 3
11
12Typings for Polymer 3 are included starting from version 3.0.5. To use them,
13install `@polymer/polymer` from npm, and use standard ES module import
14specifiers:
15
16```ts
17import {PolymerElement} from '@polymer/polymer';
18
19class MyElement extends PolymerElement {
20 ...
21}
22```
23
24### Polymer 2
25
26Typings for Polymer 2 are included starting from version 2.4.0. To use them,
27install Polymer from Bower and add a [triple-slash
28directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html)
29anywhere in your TypeScript project for the typings you require. Each HTML
30import from Polymer has a corresponding typings file. For example, if you depend
31on `polymer-element.html`:
32
33```ts
34/// <reference path="./bower_components/polymer/types/polymer-element.d.ts" />`
35
36class MyElement extends Polymer.Element {
37 ...
38}
39```
40
41Alternatively, you can add the dependency to `tsconfig.json` in the root of your
42project:
43
44```javascript
45{
46...
47 "include": [
48 "src/**/*.ts",
49 "src/bower_components/polymer/**/*.d.ts",
50 ]
51}
52```
53
54You may also be interested in the [Polymer
55decorators](https://github.com/Polymer/polymer-decorators).
56
57## How do I generate new typings?
58
59You can run this package from the command line with
60`gen-typescript-declarations`, or as a library with the `generateDeclarations`
61function.
62
63It is recommended to integrate typings generation as part of your build/release
64process:
65
66```sh
67$ npm install --save-dev @polymer/gen-typescript-declarations
68```
69
70Add a `generate-typings` script to your `package.json`:
71
72```js
73{
74 ...
75 "scripts": {
76 "generate-typings": "gen-typescript-declarations"
77 }
78}
79```
80
81If you're using NPM, you can add this script to the NPM `prepack` script to
82generate and include typings in your NPM package every time you publish. Most
83users will want to configure their `.gitignore` so that the generated typings
84are not committed to their Git repository. In this case, take care to configure
85your `.npmignore` and/or `package.json` to ensure that they are included when
86you publish to NPM (run `npm pack` to check before publishing).
87
88If you are still using Bower, ensure you run `npm run generate-typings` to
89generate the latest typings and commit them to your repository before tagging
90each release.
91
92## Config options
93
94By default the `gen-typescript-declarations` command will read a file called
95`gen-tsd.json` in your root directory. It has the following options:
96
97* **`excludeFiles`**`: string[]`
98
99 Skip source files whose paths match any of these glob patterns. If
100 `undefined`, defaults to excluding directories ending in "test" or "demo".
101
102* **`excludeIdentifiers`**`: string[]`
103
104 Do not emit any declarations for features that have any of these identifiers.
105
106* **`removeReferences`**`: string[]`
107
108 Remove any triple-slash references to these files, specified as paths
109 relative to the analysis root directory.
110
111* **`addReferences`**`: {[filepath: string]: string[]}`
112
113 Additional files to insert as triple-slash reference statements. Given the
114 map `a: b[]`, a will get an additional reference statement for each file
115 path in b. All paths are relative to the analysis root directory.
116
117* **`renameTypes`**`: {[name: string]: string}`
118
119 Whenever a type with a name in this map is encountered, replace it with
120 the given name. Note this only applies to named types found in places like
121 function/method parameters and return types. It does not currently rename
122 e.g. entire generated classes.
123
124* **`autoImport`**`: {[modulePath: string]: string[]}`
125
126 A map from an ES module path (relative to the analysis root directory) to
127 an array of identifiers exported by that module. If any of those
128 identifiers are encountered in a generated typings file, an import for that
129 identifier from the specified module will be inserted into the typings
130 file.
131
132## Using as a module
133
134You can also use this package as a module:
135
136```js
137import {generateDeclarations} from 'gen-typescript-declarations';
138
139const config = {
140 "exclude": [
141 "test/**",
142 ],
143 "removeReferences": [
144 "../shadycss/apply-shim.d.ts",
145 ],
146 "addReferences": {
147 "lib/utils/boot.d.ts": [
148 "extra-types.d.ts"
149 ]
150 },
151 "renameTypes": {
152 "Polymer_PropertyEffects": "Polymer.PropertyEffects"
153 }
154}
155
156// A map of d.ts file paths to file contents.
157const declarations = await generateDeclarations('/my/root/dir', config);
158```
159
160## FAQ
161
162### Why are some typings missing?
163This library is based on [Polymer
164Analyzer](https://github.com/Polymer/polymer-analyzer) which has limitations in
165its static analysis. For certain patterns, Analyzer relies on additional JSDoc
166annotations.
167
168### Can I augment the generated typings with hand-written ones?
169Yes, see the `addReferences` config option above.