Example 1: First Program
- Create a ts file with the name of index.ts and write the following lines of code:
var message = 'Hello World';
console.log(message);
- Execute the index.ts file by writing the following command in terminal of visual studio code:
tsc index.ts
This will create an index.js file automatically after executing the tsc command.
- To run the index.js file that has converted from index.ts either run by the following command node index.js or can be include in html file using:<script src="index.js"></script>
Syntax to declare the variable is:
-- var[identifier] : [type-anotation] = value;
-- var[identifier] : [type-anotation];
-- var[identifier];
Example 2: Declaring Variables
function add(a: number, b: number): number {
return a + b;
}
let myVariable1: number = 42;
let myVariable2: number = 50;
console.log(add(myVariable1, myVariable2));
Example 3: Declaring Variables with HTML
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
Hello index
</body>
</html>
Index.ts:
var employeeName: string = "Daisy";
var employeeid: number = 201;
console.log("name: " + employeeName);
console.log("employee id: " + employeeid);
Open the terminal & type to execute the tsc index.ts The above process creates a JavaScript file with the name of index.js that is already included in the index.html file.
Index.js
//It is not having the same syntax like: var employeeName: string =
"Daisy";
var employeeName = "Daisy";
var employeeid = 201;
console.log("name: " + employeeName);console.log("employee id: " + employeeid);
Example 4: Accessing array using loop in function
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
Hello index
</body>
</html>
Index.ts:
function average() {
var nums: number[] = [1, 2, 3, 3]
var avg: number = 0;
for (let i = 0; i < nums.length; i++) {avg += nums[i];
}
avg = avg / nums.length;
console.log(avg);
}
average();
Open the terminal & type to execute the tsc index.ts Either execute the following command in terminal: node index.js Or Run the index.html, open the console and verify the result.
Example 5: Arrow function
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
Hello index
</body>
</html>
Index.ts:
//Arrow function (Lambda Function)
let sum = (x: number, y: number): number => {
return x + y;
}
console.log(sum(10, 30));
Open the terminal & type to execute the tsc index.ts Either execute the following command in terminal: node index.js Or Run the index.html, open the console and verify the result.
You are here: Home / Topics / First Program in TypeScript, Declaring Variables, Accessing Elements using Loop and Arrow Function
First Program in TypeScript, Declaring Variables, Accessing Elements using Loop and Arrow Function
Filed under:
TypeScript on 2024-03-14 10:14:33
About Author:
Java Developer View Profile
Hi, I am using MCQ Buddy. I love to share content on this website.
Search
More TypeScript Topics
Optional Property interface typescript
Excess Property Checks in Interface - Typescript
Consuming Rest Api - Typescript
Indexable Type Interface - Typescript
TypeScript Overview and Installation Guides
Project Structure - TypeScript
First Program in TypeScript, Declaring Variables, Accessing Elements using Loop and Arrow Function
Interface Duck type in Typescript
Parallel Programming with Axios - TypeScript
TypeScript - Basic Types of Data