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

Question

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 = `<span>${this.getAttribute('name')}</span>`;
    }
}

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

<span>
    {{name}}
</span>

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?

Answer 1

Set up your development environment:

Install Node.js and npm (Node Package Manager) on your computer. Use npm to install a code editor like Visual Studio Code, which has excellent support for TypeScript and IntelliSense. Create a new project:

Decide on the front-end framework you want to use (e.g., Angular or React). Follow the framework's documentation to create a new project using their respective CLI tools. Set up TypeScript:

TypeScript is a superset of JavaScript that adds static typing to the language. It provides better IntelliSense and helps catch type-related errors early on in the development process. In an Angular project, TypeScript is already set up by default. In a React project, you can add TypeScript by installing the required packages. Define strong types for your data:

Create TypeScript interfaces or types to define the structure of your data. For example, if you have a list of users, you can define an interface for a user object with properties like id, name, email, etc.