How to Use TypeScript in HTML

JavaScript is the most common language programmers can use on both the front end and back end. However, it’s unclear what type the data is in plain JavaScript, as functions, parameters, and variables have no type. This makes it difficult to read and maintain projects.

If you are developing a project with?JavaScript?and have this kind of problem,?TypeScript?is the most suitable language for solving them.

TypeScript is a syntactic superset of JavaScript that adds static typing. This means that you can add types to data when working with TypeScript; in fact, this is nothing more than writing code in JavaScript.

In this article, I will cover developing a simple website by using TypeScript rather than JavaScript.

I will use VS Code as IDE.

Let's start by creating the essential files.

As you know, basically a simple project appearance like that. But I want to change the file?main.js?with?main.ts?since TypeScript files have the extension “.ts”. And I create a simple function in?main.ts.

I added the?TypeScript?file to the file?index.html?just like a?JavaScript?file. And I call the function with a button in the file?index.html.

And the result:

It gave two errors. The first one is caused because the function has a type (here void). The second stems from the first. Since the function in the file?main.ts?has a type, it is not known in the HTML file.

To get rid of this problem we have to install?Node.js?(if not available) and then the?typescript?package. You can install?Node.js?by following?this?link. And you can install the?typescript?package by typing the command below in the terminal.

npm install typescript        

After installing the packages, I type this command in the terminal:

tsc script/main.ts        

By this command, you will see a new?main.js?file in the folder?script.?The generated file is an equivalent?JavaScript?file generated by the?TypeScript?transpiler.

And now in the?index.html?file, I call the generated?main.js?file instead of the?main.ts?file.

<script src=”script/main.js”></script>        

But after the compiling, you might get this error:

“Cannot redeclare block-scoped variable ‘myFunction’.”

To solve this problem I add the code “export{}” to the last line of the?main.ts. And it should look like the below:

const myFunction = (): void => {
return console.log(“Hello World!”);
};
export {};        

And the result:

Bingo!

Should I run the code below to convert .ts files into .js files each time?

tsc script/main.ts        

No! There is a way to automate it:

I create the?tsconfig.json?file, and add the code below:

    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "outDir": "ts-built",
        "rootDir": "script"
    }        

And I run the command below in the terminal.

tsc -w         

This command listens to the changes in the project. If you add a new code to the?main.ts?file or add a new?.ts?file to the project, the changes are detected and transpiled, and add them to the?ts-built?file.

And I add the command below in the?package.json file:

 "scripts": {       
        "start": "live-server"     
    },        

If you run this code:

npm start        

all changes you make in the project are listened and the codes are compiled automatically.

If you run both codes at the same time your codes are transpiled and compiled automatically while you write your codes.

Enjoy it!