CodeWithGagan | Programming Language and IT Lectures

Primitive Types in TypeScript

In TypeScript, primitive types are the most basic data types, and they are the building blocks for handling data. They correspond to simple values that are immutable (their actual value can't be changed once created). TypeScript has several primitive types that are based on JavaScript’s primitive types but with the added benefit of static typing. Here’s a breakdown of the most common primitive types:

number: The number type is used for both integers and floating-point values. TypeScript doesn’t distinguish between integer and floating-point numbers; all numbers are of type number.

  // Example:
  let age: number = 25;
  let price: number = 99.99;

Key Points: It supports decimal, hexadecimal, octal, and binary literals.

  let decimal: number = 10;
  let hex: number = 0xf00d;
  let binary: number = 0b1010;
  let octal: number = 0o744;

string: The string type is used to represent textual data. TypeScript strings are enclosed in either single quotes ('...'), double quotes ("..."), or backticks (`...`) for template literals.

  // Example:
  let firstName: string = "John";
  let greeting: string = Hello, ${firstName}!; // Template literal

Key Points: Backticks ( ) are used for template literals, which allow embedding expressions and multi-line strings.

boolean: The boolean type represents logical values that can be either true or false. This type is used to handle binary logic.

  // Example:
  let isCompleted: boolean = true;
  let hasError: boolean = false;

Key Points: Boolean values are useful for controlling program flow and conditions.

null and undefined

null: Represents the intentional absence of any object value.
undefined: Denotes a variable that has been declared but not initialized with a value.

  // Example:
  let value: null = null;
  let result: undefined = undefined;

Key Points: Both null and undefined are valid types in TypeScript, though they are treated as subtypes of other types in strict mode.

With the strictNullChecks flag enabled, null and undefined must be explicitly assigned and cannot be mixed with other types.

symbol: The symbol type is used to create unique and immutable values, often used as object property keys to avoid name clashes.

  // Example:
  let uniqueId: symbol = Symbol("id");

Key Points: Each symbol is unique, even if created with the same description.

bigint: Introduced in ES2020, bigint is used for very large integers that exceed the number type’s limit. It allows you to perform calculations on arbitrarily large numbers.

  // Example:
  let bigNumber: bigint = 1234567890123456789012345678901234567890n;

Key Points:

A bigint value is denoted with an n suffix, such as 123n.
Useful when working with large integers (e.g., cryptography, scientific calculations).

Primitive Type Checking in TypeScript

TypeScript enforces static type checking, which means the type of each variable must be explicitly or implicitly known at compile time. This reduces the chances of errors at runtime.

  // Example of Type Error:
  let age: number = 25;
  age = "twenty-five";  // Error: Type 'string' is not assignable to type 'number'

Type Inference: TypeScript can often infer the type of a variable based on the value assigned to it. If you assign a number to a variable without an explicit type annotation, TypeScript will automatically infer it as a number.

  // Example:
  let isReady = true;  // TypeScript infers the type as 'boolean'

Even though type annotations provide more clarity, you can rely on TypeScript’s inference system when the type is obvious.

Differences Between 'null' and 'undefined' in TypeScript

undefined: A variable is declared but has no value assigned to it.
null: A variable is explicitly set to have no value.

  // Example:
  let a: undefined = undefined;
  let b: null = null;

In TypeScript’s strict mode (strictNullChecks), you have to explicitly type variables that may be null or undefined. Without strict mode, both null and undefined can be assigned to other types like string or number.

Key Points to Remember:

TypeScript offers primitive types that are based on JavaScript's core types.

The use of types (number, string, boolean, etc.) helps avoid bugs related to incorrect data types and improves code readability.

Type inference is helpful but it’s always a good practice to add type annotations for clarity in complex scenarios.

Strict typing with null and undefined ensures that unintentional nullish values do not cause runtime errors, especially in large codebases.

Conclusion:

The primitive types in TypeScript provide a solid foundation for building type-safe applications. By understanding and using these types, developers can write more predictable, error-free code, as TypeScript’s static type system catches mistakes during development instead of at runtime.

What is TypeScript?

TypeScript is a strongly typed, object-oriented, compiled language developed and maintained by Microsoft. It is a superset of JavaScript, meaning it extends JavaScript by adding optional static types, and it compiles down to plain JavaScript that can run anywhere JavaScript runs (browsers, Node.js, etc.).

Here’s a detailed explanation of TypeScript and its key concepts:

TypeScript as a Superset of JavaScript: TypeScript is built on top of JavaScript, which means all JavaScript code is valid TypeScript code. If you know JavaScript, you already know how to write basic TypeScript. The key addition of TypeScript is the type system, which allows you to define and enforce types in your code, making it more robust and reducing errors.

For example, in JavaScript:

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

This function can accept any type of input, which could lead to unexpected results. In TypeScript, you can specify types for the parameters:

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

Now the function expects two numbers, and TypeScript will throw an error if you try to pass anything else.

TypeScript is Statically Typed: In JavaScript, types are dynamic, meaning the type of a variable can change during runtime. TypeScript introduces static typing, where types are known and checked at compile time. This helps catch type-related errors before the code is executed.

For example:

  let message: string = "Hello, World!";
  message = 123;  // Error: Type '123' is not assignable to type 'string'

TypeScript ensures that 'message' can only hold a string, preventing potential runtime errors.

Compilation to JavaScript: TypeScript code cannot run directly in the browser or Node.js. Instead, it must be compiled to JavaScript. TypeScript uses the 'tsc' (TypeScript compiler) to convert '.ts' (TypeScript) files into '.js' (JavaScript) files.

For example, TypeScript code:

  const greet = (name: string): string => {
    return `Hello, ${name}!`;
  };

After compiling, becomes JavaScript code:

  const greet = (name) => {
    return `Hello, ${name}!`;
  };

The TypeScript compiler removes the types and transforms the code into JavaScript that browsers and environments can understand.

TypeScript Enhances Code Quality: By adding type annotations, TypeScript improves code quality and helps developers write cleaner, more maintainable code. The benefits include:

Type Checking: Catching type-related errors at compile time.
IntelliSense Support: With type information, IDEs like VS Code provide better autocompletion, error detection, and documentation.
Refactoring: Easier and safer code refactoring due to type safety.
Improved Readability: Explicit types make code more readable and easier to understand for other developers.

TypeScript is Suitable for Large-Scale Applications: TypeScript is designed with scalability in mind. In small projects, dynamic typing in JavaScript may suffice, but as the project grows, maintaining and debugging dynamic types becomes challenging. TypeScript is particularly useful in large-scale applications where:

Collaborative Development: Multiple developers are working on the same codebase.
Complex Codebases: The codebase becomes difficult to manage without strict typing and modularization.
Reliability and Maintainability: Bugs need to be minimized, and refactoring should be safe.

Additional TypeScript Features: Beyond static typing, TypeScript adds several features that aren't available in JavaScript, making it a more powerful tool for developers. These include:

Interfaces: TypeScript allows you to define interfaces to ensure that objects meet certain criteria (structure).

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

  const user: User = { name: "John", age: 25 };

Enums: TypeScript introduces enums to represent a set of named constants.

  enum Direction {
    Up,
    Down,
    Left,
    Right
  }

  let dir: Direction = Direction.Up;

Generics: TypeScript allows you to create generic functions and classes that work with different types while maintaining type safety.

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

  let output = identity<number>(42);  // T is replaced with 'number'

Access Modifiers: TypeScript allows you to define private, protected, and public members in classes, which helps enforce proper encapsulation.

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

Why Use TypeScript?

Static Typing: Helps catch errors early, before code is executed.
Better Tooling: TypeScript provides better autocompletion, inline documentation, and refactoring tools.
Optional Typing: You can gradually adopt TypeScript in an existing JavaScript project, adding types incrementally.
Supports Latest JavaScript: TypeScript supports all the latest JavaScript features and can compile down to older JavaScript versions for browser compatibility.

When to Use TypeScript?

Large Codebases: If you're working on large-scale applications with multiple developers.
Complex Projects: When working on projects that require strict type safety and structure.
Collaborative Development: TypeScript improves collaboration by enforcing type contracts between team members.

Conclusion

TypeScript offers a balance between JavaScript's flexibility and the reliability of a statically typed language. It provides the safety and tooling needed for building complex, maintainable applications while still compiling down to JavaScript. By adding TypeScript to your workflow, you can catch errors earlier, improve developer productivity, and create more reliable codebases.

TypeScript vs. JavaScript: Key Differences

TypeScript and JavaScript are closely related, but they have significant differences. TypeScript is a superset of JavaScript, meaning all valid JavaScript code is also valid in TypeScript. However, TypeScript introduces additional features that make it more robust and developer-friendly. Let’s explore the key differences between the two languages:

1. Type System

JavaScript: JavaScript is a dynamically typed language, meaning types are determined at runtime. Variables can hold any type of data, and you won’t know if there’s a type-related error until you execute the code.

    let message = "Hello";
    message = 123;  // No error in JavaScript, but can cause bugs later

TypeScript: TypeScript is a statically typed language, meaning types are checked at compile time. You explicitly declare the types of variables, parameters, and return values, which helps catch errors early.

    let message: string = "Hello";
    message = 123;  // Error: Type '123' is not assignable to type 'string'

2. Type Annotations

JavaScript: Since JavaScript is dynamically typed, you cannot annotate variable types. The type of a variable is inferred based on its value.

    // JavaScript infers the type as 'number', but it's not enforced

    let age = 25;

TypeScript: TypeScript allows you to add type annotations to variables, function parameters, and return types. This improves code readability and helps avoid bugs.

    let age: number = 25;  // Type is explicitly set to 'number'

3. Error Detection at Compile-Time

JavaScript: Since types are not enforced at compile-time, type-related errors only occur when the code is executed, which might lead to runtime issues.

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

    // Outputs '1020', no error but unexpected behavior
    console.log(add(10, "20"));

TypeScript: TypeScript checks for errors during compilation, so you can catch type-related issues early in the development process.

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

    // Compilation error:
    Argument of type 'string' is not assignable to parameter of type 'number'
    console.log(add(10, "20"));  

4. Object-Oriented Programming (OOP) Features

JavaScript: JavaScript is not fully object-oriented, though it supports some OOP principles through prototypal inheritance. ES6 introduced class syntax, but it’s mostly syntactic sugar over prototypal inheritance.

    class Animal {
        constructor(name) {
            this.name = name;
        }
    }

TypeScript: TypeScript offers full support for OOP features like classes, interfaces, inheritance, access modifiers ('public', 'private', 'protected'), abstract classes, and more, making it ideal for building large-scale, maintainable applications.

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

5. Interfaces and Type Aliases

JavaScript: JavaScript doesn’t have built-in support for interfaces. You need to manually define objects and rely on dynamic typing for validation.

    let user = {
        name: "John",
        age: 30
    };

TypeScript: TypeScript allows you to define interfaces and type aliases, which are contracts for the structure of objects. This adds a layer of type safety and improves code organization.

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

    let user: User = {
        name: "John",
        age: 30
    };

6. Optional and Default Parameters

JavaScript: JavaScript functions can be called with fewer arguments than defined, and any missing argument is automatically set to 'undefined'. To provide default values, you use default parameters (introduced in ES6).

    function greet(name = "Guest") {
        console.log("Hello, " + name);
    }

TypeScript: TypeScript also supports optional and default parameters, but it adds type checking to ensure correct usage.

    function greet(name: string = "Guest"): void {
        console.log("Hello, " + name);
    }

7. Tooling and Editor Support

JavaScript: JavaScript has good tooling, but since it lacks type information, editors have limited ability to provide intelligent features like autocompletion, refactoring, and error detection.

TypeScript: TypeScript excels in tooling because the type information allows editors like Visual Studio Code to provide rich autocompletion, refactoring tools, and error detection. TypeScript’s type system also enables better IntelliSense.

8. ESNext Features

JavaScript: JavaScript (especially modern ES6+) provides a lot of new features like arrow functions, destructuring, template literals, and modules, but not all of these features are available in older environments unless you use a transpiler like Babel.

TypeScript: TypeScript supports all modern JavaScript (ESNext) features and allows you to write future JavaScript while compiling down to older JavaScript versions (e.g., ES5) for compatibility, based on your 'tsconfig.json'.

    const sayHello = (name: string): string => 'Hello, ${name}';

9. Community and Ecosystem

JavaScript: JavaScript has a massive community and ecosystem. Almost all frameworks, libraries, and tools are built with JavaScript in mind.

TypeScript: TypeScript has been growing in popularity rapidly. Major frameworks (React, Angular, Vue) have strong TypeScript support. The ecosystem has expanded with '.d.ts' files providing type definitions for almost all popular JavaScript libraries.

10. Non-JavaScript Features in TypeScript

TypeScript introduces some features that aren’t available in JavaScript, which make it a more powerful tool for large-scale development:

Enums: Define a set of named constants.

    enum Direction {
        Up,
        Down,
        Left,
        Right
    }

Generics: Write functions and classes that work with multiple types, while maintaining type safety.

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

Tuples: Define an array with a fixed number of elements, each with specific types.

    let tuple: [string, number] = ["hello", 42];

Summary of Key Differences

Feature	JavaScript	TypeScript
Typing	Dynamic	Static (with type annotations)
Compile-time error checking	None	Yes (catches type errors before execution)
OOP Support	Limited (prototypal inheritance)	Full support (classes, interfaces, etc.)
Interfaces/Type Aliases	Not available	Available
Tooling and IntelliSense	Limited	Excellent
Enum Support	Not available	Available
Generics	Not available	Available
Compilation	Directly interpreted	Compiled to JavaScript

By leveraging TypeScript, developers can write safer, more maintainable code, especially in large-scale applications, while still benefiting from all of JavaScript's dynamic features.

Setting up TypeScript in a Project

Setting up TypeScript in a project is an important first step to leverage its benefits. Here’s a detailed step-by-step guide on how to set it up in any JavaScript project.

Step 1: Install Node.js

TypeScript runs on Node.js, so you need to ensure you have Node.js installed.

Download and install Node.js from the official website: (https://nodejs.org)

Once installed, check the version of Node.js and npm (Node Package Manager) using:

   node -v
   npm -v

Step 2: Initialize a New Project (optional)

If you don’t have an existing project, create a new project folder and initialize it with 'npm init' to generate a 'package.json' file.

   mkdir my-typescript-project
   cd my-typescript-project
   npm init -y

The '-y' flag automatically answers "yes" to all prompts, creating a default 'package.json'.

Step 3: Install TypeScript

Now you need to install TypeScript locally in your project. You can install it using npm (or yarn, if preferred).

   npm install typescript --save-dev

This will add TypeScript as a development dependency ('--save-dev') and make the 'tsc' (TypeScript compiler) command available to use.

Step 4: Initialize TypeScript Configuration (tsconfig.json)

To customize and configure TypeScript settings, you need to create a 'tsconfig.json' file. This file defines the root of your project and how TypeScript should be compiled.

You can generate it by running the following command:

   npx tsc --init

This command creates a 'tsconfig.json' file with default settings. A basic 'tsconfig.json' might look like this:

    {
        "compilerOptions": {
            "target": "es6",
            "module": "commonjs",
            "strict": true,
            "esModuleInterop": true,
            "skipLibCheck": true
        },
        "include": [
            "src/**/*"
        ],
        "exclude": [
            "node_modules"
        ]
    }

target: Specifies which version of JavaScript your TypeScript will compile down to. Common options are 'es5' or 'es6'.
module: Specifies the module system (e.g., 'commonjs', 'esnext').
strict: Enables all strict type-checking options.
esModuleInterop: Allows compatibility with ES6 module imports and CommonJS.
include: Tells TypeScript which files to include (here, the 'src' folder).
exclude: Excludes files/folders from compilation (e.g., 'node_modules').

Step 5: Create Your First TypeScript File

Now that TypeScript is set up, create a folder called 'src' and a new TypeScript file inside it, 'index.ts':

   mkdir src
   touch src/index.ts

In 'index.ts', write some simple TypeScript code:

   const message: string = "Hello, TypeScript!";
   console.log(message);

Step 6: Compile TypeScript

To compile your TypeScript code into JavaScript, you can use the 'tsc' command:

   npx tsc

This will compile all TypeScript files in the project (as per the settings in 'tsconfig.json') and generate corresponding JavaScript files in the same directory or in a specified 'outDir' (if configured).

Step 7: Run the Compiled JavaScript

Now, run the compiled JavaScript using Node.js:

   node src/index.js

You should see the following output in your terminal:

    Hello, TypeScript!

Step 8: Automate Compilation (Optional)

If you want TypeScript to automatically compile every time you make a change, you can use the '--watch' option:

   npx tsc --watch

This will keep watching for file changes and recompile your TypeScript files automatically.

Summary

By following these steps, you have successfully set up TypeScript in your project. Here's what we accomplished:

Installed TypeScript using npm.
Generated the 'tsconfig.json' configuration file.
Wrote a simple TypeScript file.
Compiled TypeScript into JavaScript and ran it using Node.js.

Now your project is TypeScript-enabled, and you can start building more complex applications using TypeScript’s powerful features like static typing and modern JavaScript support.

Table of Contents for Typescript

Here’s a detailed Table of Contents (TOC) for your TypeScript tutorial series, covering concepts from basic to advanced. The structure follows a progressive learning path, ensuring your audience builds a solid foundation before moving on to advanced topics.

1. Introduction to TypeScript

What is TypeScript?
Why use TypeScript over JavaScript?
Installing TypeScript
Setting up TypeScript in a project
Compiling TypeScript to JavaScript
TypeScript vs. JavaScript: Key Differences

2. Basic Types

Primitive Types: 'number', 'string', 'boolean', 'null', 'undefined'
Array and Tuple Types
Any, Unknown, Never Types
Type Inference and Explicit Typing

3. Functions in TypeScript

Basic Function Types and Signatures
Optional and Default Parameters
Rest Parameters
Function Overloading
Arrow Functions

4. Interfaces and Object Types

Defining Interfaces
Optional and Readonly Properties
Extending Interfaces
Intersection Types
Type Assertions

5. Classes and Object-Oriented Programming (OOP)

Classes: Basics and Constructors
Inheritance and Super
Access Modifiers: 'public', 'private', 'protected'
Static Properties and Methods
Getters and Setters
Abstract Classes

6. Advanced Types

Union and Intersection Types
Literal Types
Type Aliases
Type Guards and Type Narrowing
Discriminated Unions
Type Compatibility and Subtype Polymorphism

7. Enums in TypeScript

Numeric Enums
String Enums
Heterogeneous Enums
Enum Member Types

8. Generics

Introduction to Generics
Generic Functions
Generic Classes
Generic Constraints
Using 'keyof' and 'typeof' with Generics

9. Modules and Namespaces

Working with ES Modules in TypeScript
Export and Import Statements
Namespaces vs. Modules
Code Splitting and Modularization

10. TypeScript with JavaScript Libraries

Using '.d.ts' Files
Working with Third-Party JavaScript Libraries
@types Definitions for Popular Libraries
Mixing TypeScript and JavaScript

11. TypeScript Compiler (tsc) Configuration

Configuring tsconfig.json
Key Compiler Options
Strict Type Checking Options
Incremental Compilation

12. Asynchronous Programming in TypeScript

Promises in TypeScript
Async/Await with TypeScript
Error Handling with Async Functions
Typed Promises

13. TypeScript with React

TypeScript Basics with React
Typing Functional Components
Typing Props and State
Using Hooks with TypeScript (useState, useEffect, etc.)
Typing Events and Forms in React

14. TypeScript with Node.js

Setting up TypeScript with Node.js
Working with Type Definitions in Node.js
Building Express Apps with TypeScript
Handling Asynchronous Operations with Node.js and TypeScript

15. TypeScript with Frameworks and Tools

TypeScript with Next.js
TypeScript with Angular
TypeScript with Vue.js
TypeScript with Redux

16. Advanced TypeScript Concepts

Conditional Types
Mapped Types
Template Literal Types
Utility Types ('Partial', 'Required', 'Pick', 'Omit')
Recursive Types

17. Error Handling and Debugging

Common TypeScript Errors
Debugging TypeScript Code
Linting TypeScript with ESLint
Using TypeScript with Prettier

18. Testing in TypeScript

Unit Testing with TypeScript
Using Jest with TypeScript
Mocking and Assertions in TypeScript Tests
Integration Testing with TypeScript

19. TypeScript Project Best Practices

Organizing a TypeScript Project
Code Documentation and Comments
Type-Safe API Calls
Optimizing Build and Compilation Times

20. Deploying TypeScript Applications

Building for Production
Transpiling and Bundling TypeScript with Webpack or Vite
Deploying TypeScript Apps to Cloud Platforms (Vercel, Netlify, etc.)

21. TypeScript Performance and Optimization

Optimizing TypeScript Code for Performance
Tree Shaking with TypeScript
Improving Compilation Speed
Memory Management and Efficient Type Checking

Bonus Topics (Optional for Advanced Audience)

Decorator Patterns in TypeScript
Meta-Programming with TypeScript
TypeScript and GraphQL
TypeScript for Large-Scale Applications
Migrating Legacy JavaScript to TypeScript

This structure ensures that learners can move from the very basics of TypeScript to more complex, real-world applications. You can adjust the depth of each topic based on the target audience, including code examples, projects, or exercises in each section to make the tutorial more interactive.