Mini Website with TypeScript (ok)

Mini Website with TypeScrip

tsconfig.json

{ 
  "compilerOptions": { 
    "target": "es2016", 
    "module": "commonjs", 
    "rootDir": "src", 
    "outDir": "dist", 
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true, 
    "strict": true, 
    "skipLibCheck": true 
  } 
}

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>

src\scripts\main.ts

const printMe = (): void => {
  return console.log("Hello World!!!");
};

package.json

const printMe = (): void => {
  return console.log("Hello World!!!");
};

Madhava Kumar Ippili

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.

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)

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

The setup/software's required are:

VS Code — IDE
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:

npx tsc - init

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

Default configuration:

Created a new tsconfig.json with:

target: es2016 
module: commonjs 
strict: true 
esModuleInterop: true 
skipLibCheck: true 
forceConsistentCasingInFileNames: true

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:

const printMe = (): void => { 
    return console.log("Hello World!!!"); 
};

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

<button onclick="printMe()">Click here </button> 
<script src="dist/script/main.js"></script>

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:

{ 
  "compilerOptions": { 
    "target": "es2016", 
    "module": "commonjs", 
    "rootDir": "src", 
    "outDir": "dist", 
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true, 
    "strict": true, 
    "skipLibCheck": true 
  } 
}

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

npx tsc

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)NextTypeScript-React-Starter

Last updated 2 months ago

Mini Website with TypeScript (ok)