TypeScript malayalam | Part 1 | Web Development | മലയാളം പ്രോഗ്രാമിംഗ്

Introduction

This tutorial introduces TypeScript programming in Malayalam, targeting beginners who want to enhance their web development skills. TypeScript, a superset of JavaScript, adds static typing to the language, which helps catch errors early and improves code quality. This guide will cover the fundamentals of TypeScript, including installation, type definitions, compiling to JavaScript, and key concepts such as interfaces and functions.

Step 1: Installing TypeScript

To start using TypeScript, you need to install it on your machine. Follow these steps:

1. Install Node.js: If you haven't already, download and install Node.js from the official website.
2. Open Command Line Interface: Use Command Prompt (Windows) or Terminal (macOS/Linux).
3. Install TypeScript Globally: Run the following command:

   npm install -g typescript
   

4. Verify Installation: Check if TypeScript is installed by running:

   tsc -v
   

   You should see the installed version number.

Step 2: Infer Types (Implicit Types)

TypeScript can automatically infer types based on the values assigned to variables. This is known as implicit typing. Here’s how it works:

• Assign a value to a variable without explicitly stating its type.
• TypeScript infers the type from the assigned value.

Example:

let message = "Hello, TypeScript"; // Type is inferred as string
let count = 5; // Type is inferred as number

Step 3: Define Types (Explicit Types)

You can explicitly define types for your variables when needed. This improves code readability and maintainability. Use the following syntax:

• For basic types:

let name: string = "John Doe";
let age: number = 30;

• For arrays:

let numbers: number[] = [1, 2, 3];

Step 4: Compiling to JavaScript

TypeScript needs to be compiled into JavaScript to run in the browser. Here’s how to compile your TypeScript files:

1. Create a TypeScript file: Save your code with a .ts extension.
2. Compile the file: Run the following command in your terminal:

   tsc filename.ts
   

3. Check the output: A JavaScript file with the same name but a .js extension will be created.

Step 5: Understanding Interfaces

Interfaces in TypeScript define the structure of objects. They are useful for ensuring that objects adhere to a specific structure. Here’s how to create an interface:

1. Define an interface:

interface Person {
    name: string;
    age: number;
}

2. Use the interface:

let person: Person = { name: "Alice", age: 25 };

Step 6: Working with Types

TypeScript allows for creating custom types using type and interface. Here’s a brief overview:

• Using type:

type Vehicle = { make: string; model: string; year: number };

• Using interface (as shown in the previous step).

Step 7: Union and Optional Types

Union types allow variables to hold values of multiple types, while optional types indicate that a property may or may not exist.

• Union type example:

let id: number | string = 123; // can be a number or a string

• Optional property example:

interface User {
    username: string;
    email?: string; // email is optional
}

Step 8: Functions in TypeScript

Functions in TypeScript can also have types for parameters and return values. Here is the syntax:

function greet(name: string): string {
    return `Hello, ${name}`;
}

Step 9: Named Types

Named types allow you to create reusable types across your application, improving consistency and reducing errors.

• Example of a named type:

type Coordinates = { x: number; y: number };
let point: Coordinates = { x: 10, y: 20 };

Conclusion

In this tutorial, you learned the basics of TypeScript, including installation, type inference, defining types, compiling to JavaScript, using interfaces, and understanding functions and named types. As you continue your journey in TypeScript, consider exploring more advanced topics and practices. Check out additional resources or courses to deepen your understanding and skills in web development with TypeScript.