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
First Program in TypeScript, Declaring Variables, Accessing Elements using Loop and Arrow Function
Optional Property interface typescript
Indexable Type Interface - Typescript
TypeScript Overview and Installation Guides
Excess Property Checks in Interface - Typescript
Interface Duck type in Typescript
Consuming Rest Api - Typescript
Singleton Design Pattern - TypeScript
TypeScript - Basic Types of Data