Ultimate TypeScript Course Notes

Introduction

• Instructor: Mosh Hamidani
• Course coverage: Basics to advanced TypeScript concepts
• Goal: Ability to build large-scale applications with TypeScript
• Target Audience: Beginners with basic JavaScript knowledge

Course Prerequisites

• Familiarity with JavaScript concepts:
  • Variables and constants
  • Arrays
  • Objects
  • Functions (including arrow functions)
  • Destructuring
• Links to refresher tutorials available in the course description

Course Structure

• Watch the entire course from start to finish without skipping
• Take notes during lessons for better retention
• Complete exercises at the end of each section for understanding

Typescript Overview

Key Questions about TypeScript

1. What is TypeScript?

   • A programming language developed by Microsoft, built on JavaScript
   • Adds features to improve robustness and maintainability

2. Why do we need TypeScript?

   • Addresses shortcomings of JavaScript, especially in large codebases
   • Offers static typing to catch errors at compile-time

3. How is it different from vanilla JavaScript?

   • TypeScript enforces type checking, while JavaScript is dynamically typed
   • TypeScript code is compiled to JavaScript for execution

Features of TypeScript

• Static Typing:

  • Types of variables are checked at compile-time
  • Helps prevent runtime errors

• Editor Support:

  • Code editors provide code completion and refactoring due to type annotations

• Future JavaScript Features:

  • TypeScript allows developers to use upcoming JavaScript features before they are widely implemented in browsers

Drawbacks of TypeScript

• Requires a compilation step (transpilation) to convert TypeScript to JavaScript
• More disciplined coding style may be required
• Might feel restrictive for simple applications

Development Environment Setup

1. Install Node.js:

   • Download from nodejs.org

2. Install TypeScript Compiler:

   • Command: npm install -g typescript

3. Verify Installation:

   • Command: tsc -v

4. Code Editor:

   • Recommended: Visual Studio Code (VS Code)
   • Download from code.visualstudio.com

Writing Your First TypeScript Program

1. Create a folder for the project (e.g., hello-world)
2. Open folder in VS Code
3. Create a file with .ts extension (e.g., index.ts)
4. Write TypeScript code (e.g., console.log('Hello World'))
5. Compile TypeScript to JavaScript using tsc index.ts

TypeScript Compiler Configuration

• Use tsc --init to create a tsconfig.json file
• Key settings in tsconfig.json:
  • target: Specify JavaScript version to compile to
  • module: Type of module system to use (e.g., CommonJS)
  • rootDir: Directory for TypeScript files
  • outDir: Directory for compiled JavaScript files
  • removeComments: Remove comments during compilation
  • noEmitOnError: Prevent JavaScript generation on errors

Debugging TypeScript Applications in VS Code

1. Enable source maps in tsconfig.json by setting sourceMap to true
2. Use breakpoints in VS Code to debug line by line
3. Access your variables and inspect code execution

TypeScript Fundamentals

Built-in Types

• Types include: number, string, boolean, null, undefined, and object
• TypeScript introduces new types:
  • any, unknown, never, enum, tuple

Working with Primitive Types

• Type inference: TypeScript can determine types based on initialization
• Avoiding any type usage for type safety

Arrays

• Use type annotations for arrays (e.g., number[])
• Type inference and code completion features available

Tuples

• Define fixed-length arrays with specific types
• Useful for pairs of related values

Enums

• Represents a list of related constants (e.g., sizes of t-shirts)
• Can use numeric or string values

Functions

• Always annotate parameters and return types for clarity
• Handle optional parameters and default values
• Enable strict checks for unused parameters and returns

Objects

• Define object shapes using type annotations or type aliases
• Use readonly modifier to prevent modifications

Advanced TypeScript Features

Type Aliases

• Create reusable types and simplify code structure

Union Types

• Allow a variable to be of multiple types (e.g., number | string)
• Use type narrowing to determine the actual type at runtime

Intersection Types

• Combine multiple types into one (e.g., draggable & resizable)

Literal Types

• Limit variable values to specific constants (e.g., 50 | 100)

Nullable Types

• Handle null and undefined in strict mode
• Use optional chaining to access properties safely

Conclusion

• This course provides a comprehensive understanding of TypeScript and prepares you to build robust applications.
• For further learning, consider enrolling in the complete course for in-depth coverage and additional resources.