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 |
|
5 | A library which generates TypeScript declarations for Polymer and custom
|
6 | elements.
|
7 |
|
8 | ## How do I use the typings?
|
9 |
|
10 | ### Polymer 3
|
11 |
|
12 | Typings for Polymer 3 are included starting from version 3.0.5. To use them,
|
13 | install `@polymer/polymer` from npm, and use standard ES module import
|
14 | specifiers:
|
15 |
|
16 | ```ts
|
17 | import {PolymerElement} from '@polymer/polymer';
|
18 |
|
19 | class MyElement extends PolymerElement {
|
20 | ...
|
21 | }
|
22 | ```
|
23 |
|
24 | ### Polymer 2
|
25 |
|
26 | Typings for Polymer 2 are included starting from version 2.4.0. To use them,
|
27 | install Polymer from Bower and add a [triple-slash
|
28 | directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html)
|
29 | anywhere in your TypeScript project for the typings you require. Each HTML
|
30 | import from Polymer has a corresponding typings file. For example, if you depend
|
31 | on `polymer-element.html`:
|
32 |
|
33 | ```ts
|
34 | /// <reference path="./bower_components/polymer/types/polymer-element.d.ts" />`
|
35 |
|
36 | class MyElement extends Polymer.Element {
|
37 | ...
|
38 | }
|
39 | ```
|
40 |
|
41 | Alternatively, you can add the dependency to `tsconfig.json` in the root of your
|
42 | project:
|
43 |
|
44 | ```javascript
|
45 | {
|
46 | ...
|
47 | "include": [
|
48 | "src/**/*.ts",
|
49 | "src/bower_components/polymer/**/*.d.ts",
|
50 | ]
|
51 | }
|
52 | ```
|
53 |
|
54 | You may also be interested in the [Polymer
|
55 | decorators](https://github.com/Polymer/polymer-decorators).
|
56 |
|
57 | ## How do I generate new typings?
|
58 |
|
59 | You can run this package from the command line with
|
60 | `gen-typescript-declarations`, or as a library with the `generateDeclarations`
|
61 | function.
|
62 |
|
63 | It is recommended to integrate typings generation as part of your build/release
|
64 | process:
|
65 |
|
66 | ```sh
|
67 | $ npm install --save-dev @polymer/gen-typescript-declarations
|
68 | ```
|
69 |
|
70 | Add 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 |
|
81 | If you're using NPM, you can add this script to the NPM `prepack` script to
|
82 | generate and include typings in your NPM package every time you publish. Most
|
83 | users will want to configure their `.gitignore` so that the generated typings
|
84 | are not committed to their Git repository. In this case, take care to configure
|
85 | your `.npmignore` and/or `package.json` to ensure that they are included when
|
86 | you publish to NPM (run `npm pack` to check before publishing).
|
87 |
|
88 | If you are still using Bower, ensure you run `npm run generate-typings` to
|
89 | generate the latest typings and commit them to your repository before tagging
|
90 | each release.
|
91 |
|
92 | ## Config options
|
93 |
|
94 | By 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 |
|
134 | You can also use this package as a module:
|
135 |
|
136 | ```js
|
137 | import {generateDeclarations} from 'gen-typescript-declarations';
|
138 |
|
139 | const 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.
|
157 | const declarations = await generateDeclarations('/my/root/dir', config);
|
158 | ```
|
159 |
|
160 | ## FAQ
|
161 |
|
162 | ### Why are some typings missing?
|
163 | This library is based on [Polymer
|
164 | Analyzer](https://github.com/Polymer/polymer-analyzer) which has limitations in
|
165 | its static analysis. For certain patterns, Analyzer relies on additional JSDoc
|
166 | annotations.
|
167 |
|
168 | ### Can I augment the generated typings with hand-written ones?
|
169 | Yes, see the `addReferences` config option above.
|