search

😁Mini Website with TypeScript, compile file ts chạy thời gian thực (ok)

hashtag
Example 1

src\scripts\main.ts

const printMe = () => {
  return console.log("Hello World a1133")
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="printMe()">Click here </button>
  <script src="dist/scripts/main.js"></script>
</body>
</html>

package.json

tsconfig.json

hashtag
Example 2

tsconfig.json

index.html

src\scripts\main.ts

package.json

Madhava Kumar Ippiliarrow-up-right

Hi all, it's been so long I have published an article. This time I came up with a mini website built with TypeScript.

This is a simple website with a hello world built with TypeScript. Usually till these days we are developing websites with JavaScript, but we still have some problems to handle the types or what type of data is the Method, variable, or a functions uses / accepts / returns. In these cases, it is always suggestable to start the development with Typescript.

hashtag
TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Definition from TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)arrow-up-right

Let's start building the min-website with TypeScript.

The setup/software's required are:

  1. VS Code — IDE

  2. Node.js

With the above minimum setup let's start, firstly.

Create a directory and name it as mini-website and load this directory in the VS-Code editor as below:

Now open the terminal and run the command: npm i typescript — save-dev and which would look as below:

Now you have got the package.json and typescript installed in the project mini-website directory. (yay!!!)

Now as we got typescript installed in the project lets initiate a new typescript project with the following command:

Now you can observe the tsconfig.json file created with some default configuration as below:

Default configuration:

Created a new tsconfig.json with:

Now let's create the index.html in the project root path as below and type ! character in the file and if you observe the VS Code suggests with an Emmet abbreviation, just click enter and you will see default HTML code.

Now let's create the typescript file, for this let's create the directory structure in the following way, with in the root directory: src/scripts/main.ts.

For this no need to create each directory and file individually, just copy the above path and in the VS Code choose to create a new file and paste the copied path as shown below and click enter.

Now you have a blank main.ts file created as below:

Copy paste the below code snippet into the main.ts file:

In the index.html paste the below code snippet inside the body tag:

Now if you observe the above html snippet there is a path dist/scripts/main.js, this is path of the transpiled ts file and for this we have to make below configuration changes in the tsconfig.json file:

Now, we are almost at the end of loading the mini-websit, now run the below command to transpile the main.ts file:

Now you can check the main.js under the dist folder.

Now just open the index.html in any browser and open the dev tools and then click on the click here button, Hello World will be printed in the console.

Here comes out mini website with TypeScript.

PreviousCách để khai báo 1 prop không được chấp nhận hoặc cảnh báo không tồn tại Full (ok)Next😍 Không hiểu tại sao khi sử dụng nodemon.json nó mới chạy được?

Last updated