Wondering what’s next for npm?Check out our public roadmap! »

    html-typings
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.6 • Public • Published

    Build Status npm version FOSSA Status

    HTML Typings

    Generates typings for HTML selectors based on your HTML files. Try it out

    Installing

    For the latest version:

    npm install -g html-typings

    Typings 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_FILE

    Where 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

    FOSSA Status

    Install

    npm i html-typings

    DownloadsWeekly Downloads

    3

    Version

    1.4.6

    License

    MIT

    Unpacked Size

    78.5 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar