https://github.com/vincentdchan/typescript-domhelper

DOM helper for Typescript
https://github.com/vincentdchan/typescript-domhelper

dom generator html typescript

Last synced: 17 days ago
JSON representation

DOM helper for Typescript

• Host: GitHub
• URL: https://github.com/vincentdchan/typescript-domhelper
• Owner: vincentdchan
• License: mit
• Created: 2017-02-07T15:00:17.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-08T10:50:54.000Z (almost 8 years ago)
• Last Synced: 2024-04-24T05:16:14.932Z (10 months ago)
• Topics: dom, generator, html, typescript
• Language: TypeScript
• Size: 101 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Typescript DOM helper

DOM helper for Typescript.

The `elem` method is powerful for dom generation,

it also has alias called `element`.

## Install

```

npm i typescript-domhelper

```

## Powerful element generation

Use Typescript to generate DOM tree.

Usage:

```typescript

import {elem, element, text} from "typescript-domhelper"

let myElement1 = elem("p");

let myElement3 = element("a", "", { // the same as above

    id: "myAnchor"

});

let myElement5: HTMLElement;

let myElement6: HTMLElement;

let myElement4 = elem("div", "container", null, [

    myElement5 = elem("div", "container", null, [

        myElement6 = elem("p", "", null, [

            text("Hello world!")

        ],

        myElement3,

    ]

]);

```

## Powerful typed element generation

Now let's see the real magic, DOM generation with typed.

The `Dom` class api have the same parameters as `elem`,  but it can specific the type of the return value, it contains **all** the elements of HTML.

![dom.gif](https://ooo.0o0.ooo/2017/02/08/589af7568ae5f.gif)

Usage:

```typescript

import {Dom} from "typescript-domhelper"

let myDiv = Dom.Div("container"); // the type of `myDiv` is HTMLDivElement

let myImg: HTMLImageElement = Dom.Img(null, {id: "myImage"}); // HTMLImageElement

```

Relied on the type system of Typescript, you can write code more easily.