How to develop data bound html with strong typing and intellisense?

I'm a huge believer in the value of Intellisense for showing you what syntax is expected and allowed (and also saving typing, though this is a secondary consideration). When you build a web component (or use JSX or tagged templates or the like), you have code like this: class MyElement extends HTMLElement { constructor() { super(); this.innerHTML = `${this.getAttribute('name')}`; } } and this is nice in terms of getting typescript/javascript Intellisense: But it's terrible in terms of HTML Intellisense, because outside of the curly braces, it's just a big string. If you were writing this HTML in a *.html file, you might have something like {{name}} and you'd have great Intellisense and editor experience for the span, like if you wanted to add a style attribute: The editor would also catch malformed tags, unclosed tags, tags that can't be nested as written, and lots of issues of that kind. But then you have no help from the compiler for the data binding code in the curly braces, and if you made a typo (or refactored somewhere else such that name became lastName or whatever), it would cause a run time error that you wouldn't catch without careful and complete regression testing. So: is there a way to develop this kind of code so that you get the benefit of compile time type checking on the data and also a good editing experience for the HTML?

Apr 24, 2025 - 07:19

How to develop data bound html with strong typing and intellisense?

I'm a huge believer in the value of Intellisense for showing you what syntax is expected and allowed (and also saving typing, though this is a secondary consideration).

When you build a web component (or use JSX or tagged templates or the like), you have code like this:

class MyElement extends HTMLElement
{
    constructor()
    {
        super();

        this.innerHTML = `${this.getAttribute('name')}`;
    }
}

and this is nice in terms of getting typescript/javascript Intellisense:

But it's terrible in terms of HTML Intellisense, because outside of the curly braces, it's just a big string.

If you were writing this HTML in a *.html file, you might have something like


    {{name}}

and you'd have great Intellisense and editor experience for the span, like if you wanted to add a style attribute:

The editor would also catch malformed tags, unclosed tags, tags that can't be nested as written, and lots of issues of that kind.

But then you have no help from the compiler for the data binding code in the curly braces, and if you made a typo (or refactored somewhere else such that name became lastName or whatever), it would cause a run time error that you wouldn't catch without careful and complete regression testing.

So: is there a way to develop this kind of code so that you get the benefit of compile time type checking on the data and also a good editing experience for the HTML?