html-typings
v1.4.6
Published
Generates typings for your HTML files
Downloads
18
Readme
HTML Typings
Generates typings for HTML selectors based on your HTML files. Try it out
Installing
For the latest version:
npm install -g html-typingsTypings usage
First reference the typings file, wherever you outputted it, then simply use querySelectors etc like you would normally, but with typings.
///<reference path="../typings/html-typings.d.ts"/>
// Type will be HTMLInputElement
const input = document.getElementById('someInput');
// Type will be NodeListOf<HTMLDivElement|HTMLSpanElement>
const fancyElements = document.getElementsByClassName('fancy');
// Type will also be HTMLInputElement
const sameInput = document.querySelector('#someInput');
// Type will also be NodeListOf<HTMLDivElement|HTMLSpanElement>
const fancyElementsCopy = document.querySelectorAll('.fancy');
// Some custom element libraries allow for element-specific ID selectors
// for example polymer https://www.polymer-project.org/1.0/docs/devguide/local-dom#work-with-local-dom
type CustomElement<T extends keyof ModuleMap> = Element & {
$: ModuleMap[T]
};
const myElement: CustomElement<'my-element'> = document.getElementsByTagName('my-element')[0];
// Type will be HTMLHeaderElement
const header = myElement.$.header;
<html>
<head>
<title>title</title>
</head>
<body>
<input id="someInput">
<div class="fancy"></div>
<span class="fancy"></div>
<dom-module id="my-element">
<h1 id="header">{{header}}</h1>
</dom-module>
</body>
</html>Sometimes you have elements that contain more properties than regular html elements, for this you can use the data-element-type property. Setting this to a type and then declaring that type ensures that element will always have the special type you assigned to it. This also becomes very useful when using libraries that map their properties onto containing HTML elements such as CodeMirror.
///<reference path="../typings/html-typings.d.ts"/>
interface MySpecialType extends HTMLElement {
func(): void;
color: string;
}
// Type will be MySpecialType
const specialElement = document.getElementById('specialEl');
// Instead of this for every occurrence
const specialElementManual = document.getElementById('specialEl') as HTMLElement & {
func(): void;
color: string;
}<html>
<head>
<title>title</title>
</head>
<body>
<div id="specialEl" data-element-type="MySpecialType"></div>
</body>
</html>Command-line usage
html-typings [-h] [-e] [-w] [-s] -i INPUT -o OUT_FILEWhere INPUT can be either a glob pattern, the path to a file or the path to a folder. The contents of the folder will be scanned recursively for HTML files to use.
Module usage
Require the module
const htmlTypings = require('html-typings')Convert a string
const result = htmlTypings.extractStringTypes(input);Convert a file
const result = await htmlTypings.extractFileTypes(path);Or the ES5 equivalent
htmlTypings.extractFileTypes(path).then((result) => {
//Do something
});License
