كورس تايب سكريبت | TypeScript | interfaces - types - enums - generics - uilities

Introduction

This tutorial covers the essentials of TypeScript, including interfaces, types, enums, generics, and utilities. Whether you're a beginner or an experienced developer looking to enhance your JavaScript skills with TypeScript, this guide will provide a clear, step-by-step approach to understanding and using TypeScript effectively.

Step 1: Understanding TypeScript

• What is TypeScript?
  • TypeScript is a superset of JavaScript that adds static types.
  • It helps catch errors during development rather than runtime, improving code quality.

Step 2: Installing TypeScript

• How to Install TypeScript:
  1. Ensure you have Node.js installed on your machine.
  2. Open your terminal and run the following command:

     npm install -g typescript
     

  3. Verify the installation by checking the version:

     tsc -v
     

Step 3: Creating a TypeScript Configuration File

• Setting Up tsconfig.json:
  1. In your project directory, create a configuration file:

     tsc --init
     

  2. This file allows you to customize TypeScript settings like target version and module system.

Step 4: Exploring Types

• Basic Types in TypeScript:
  • Number, String, Boolean, Void, Null, and Undefined.
  • Example of declaring a variable with a type:

    let age: number = 30;
    

Step 5: Function Types

• Defining Function Types:
  • Specify parameter and return types for functions.
  • Example:

    function add(a: number, b: number): number {
      return a + b;
    }
    

Step 6: Working with Interfaces

• Creating and Using Interfaces:
  • Interfaces define the structure of an object.
  • Example:

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

Step 7: Type Aliases

• Understanding Type Aliases:
  • Type aliases allow you to create a new name for a type.
  • Example:

    type Point = { x: number; y: number };
    

Step 8: Optional Properties

• Using Optional Properties in Interfaces:
  • Mark properties as optional using a question mark.
  • Example:

    interface User {
      name: string;
      age?: number; // age is optional
    }
    

Step 9: Enums

• Introduction to Enums:
  • Enums are a way to define a set of named constants.
  • Example:

    enum Color {
      Red,
      Green,
      Blue
    }
    

Step 10: Classes in TypeScript

• Defining Classes with TypeScript:
  • Classes can have properties and methods with specified types.
  • Example:

    class Person {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
    }
    

Step 11: Exporting Interfaces

• Exporting and Importing Interfaces:
  • Use the export keyword to make interfaces available in other files.
  • Example:

    export interface User {
      name: string;
      age: number;
    }
    

Step 12: Understanding Generics

• Using Generics for Flexibility:
  • Generics allow you to create reusable components.
  • Example:

    function identity<T>(arg: T): T {
      return arg;
    }
    

Step 13: General Object Types

• Using Object Types:
  • Define types for objects when you need a flexible structure.
  • Example:

    function logPoint(point: { x: number; y: number }) {
      console.log(`X: ${point.x}, Y: ${point.y}`);
    }
    

Step 14: Promises with TypeScript

• Working with Promises:
  • Type promises to ensure type safety.
  • Example:

    function fetchData(): Promise<string> {
      return new Promise((resolve) => {
        resolve("Data received");
      });
    }
    

Step 15: TypeScript with React

• Integrating TypeScript into React Applications:
  • Use TypeScript for type-checking in React components.
  • Example of a functional component:

    const Greeting: React.FC<{ name: string }> = ({ name }) => {
      return <h1>Hello, {name}</h1>;
    };
    

Step 16: TypeScript with Express

• Setting Up TypeScript in Express Applications:
  • Use TypeScript for building strong API applications.
  • Example of a basic Express setup:

    import express from 'express';
    
    const app = express();
    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    app.listen(3000, () => {
      console.log('Server is running on port 3000');
    });
    

Conclusion

In this tutorial, you've learned the fundamentals of TypeScript, including its setup, core features, and how to integrate it with frameworks like React and Express. As you continue to explore TypeScript, practice implementing these concepts in your projects to solidify your understanding. Consider diving deeper into advanced topics like decorators and TypeScript's integration with various libraries. Happy coding!