WORKSHOP

IOT Workshop Typescript day 2

14 Feb 2024

3 Min Read

Typescript is a wrapper around JavaScript language where typescript provides types which makes it easier to detect compile time errors or bugs. Also with the help of code editors and typescript you also get some code suggestions.

Some Basics of typescript.


// Variables
const name: string = "Pranit";
const age: number = 21;
const haveKT: boolean = false;

const friends: string[] = ["Fardin", "Pk"];

// objects
type Education = {
    college: string;
    course: "CS" | "IOT" | "AIDS";
    year: number;
}

const education: Education = {
    college: "AC Patil",
    course: "CS", 
    year: 2
}

// functions
// function which returns something
function add(a: number, b:number): number {
    const ans = a + b;
    return ans;
}

const ans = add(8,9);
console.log(ans);
// Output => 17

// function which doesnot returns anything
function multiply(a:number, b:number): void {
    const ans = a * b;
    console.log(ans);
}
multiply(5,8);
//Output => 40

Lets Create a Calculator Website in Typescript

Setup Environment

Install VS Code and add following extensions:

1. Live Server
2. JavaScript and TypeScript Nightly
Now open an empty folder in VS code. Make sure you have NodeJs installed.
If not go to this link and download the LTS version of Node js. and install it without adding additional packages.
Run following command in terminal to make sure the node js is installed correctly.

node --v

It should show the current version of node js.

Initializing the Project

Run following command in VS Code terminal to create a project

npm init -y

here npm stands for Node Package Manager which is kind of a software which helps to download and manage javascript/node packages from the internet. "init" is for to initializing the project and then -y which says that you agree to the basic things provided by the init command.

Add Dependencies

Run following command in terminal

npm i -D typescript

this will add typescript to our new project.

Also we are going to add a node script in package.json file.

after adding it should look like

{
  "name": "trial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc script.ts && node script.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}

Now create following files in VS Code. script.ts, index.html

Write Following code in index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typescript Calculator</title>
</head>
<body>
    <input type="number" id="num1">
    <input type="number" id="num2">
    <button onclick="multiply()" >Multiply</button>
    <p id="ans"></p>
    <script src="/script.js"></script>
</body>
</html>

Write following code in script.ts file

function multiply(): void {
  const num1 = document.getElementById("num1") as HTMLInputElement;
  const num2 = document.getElementById("num2") as HTMLInputElement;
  const ansContainer = document.getElementById("ans") as HTMLParagraphElement;

  const ans: number = parseInt(num1.value) * parseInt(num2.value);
  ansContainer.innerText = ans.toString();
}

To compile the typescript code to javascript run following command. It will generate a script.js file.

npm run build

IOT Workshop Typescript day 2

Lets Create a Calculator Website in Typescript

Setup Environment

Initializing the Project

Add Dependencies

Lets Connect