📘

The Ultimate TypeScript Course

Jul 18, 2024

The Ultimate TypeScript Course

Introduction

  • Instructor: Mosh Hamidani
  • Objective: Learn TypeScript from basics to advanced concepts to build large-scale applications.
  • Pre-requisites: Basic familiarity with JavaScript concepts (variables, arrays, objects, functions, arrow functions, destructuring, etc.).
  • Platform: Codewithmosh.com
  • Learning Method: Watch lessons in sequence, take notes, practice exercises, and write TypeScript code.

Course Structure

  1. Introduction to TypeScript
  2. Development Environment Setup
  3. First TypeScript Program and Compiler Configuration
  4. Debugging TypeScript Applications
  5. Fundamentals of TypeScript
  6. Advanced Types in TypeScript

Section 1: Introduction to TypeScript

What is TypeScript?

  • TypeScript is a programming language created by Microsoft.
  • Superset of JavaScript: Adds features to JavaScript for more robust and maintainable code.

Key Features

  • Static Typing: Types are known at compile-time.
  • Error Detection: Catches errors at compile time instead of runtime.
  • Code Editor Support: Offers features like code completion and refactoring.
  • Future JavaScript Features: Allows using future JavaScript features today.

Drawbacks

  • Compilation Step: Needs to be compiled into JavaScript as browsers don't understand TypeScript.
  • Discipline Required: Favors a structured approach to coding.

Section 2: Setting Up Development Environment

Steps

  1. **Install Node.js: ** Latest version from nodejs.org.
  2. Install TypeScript Compiler: npm i -g typescript
  3. Verify Installation: tsc -v
  4. Editor: Visual Studio Code (recommended).
  5. Create a Project Folder and a TypeScript File: mkdir hello-world cd hello-world code . let age: number = 20; console.log(age);
  6. Compile TypeScript File: tsc index.ts

Section 3: Configuring the TypeScript Compiler

Configuration File

  • Create tsconfig.json: tsc --init
  • Important Settings:
    • target: ES5, ES6, etc.
    • module: CommonJS, ES6.
    • rootDir and outDir: Specify directories for source and JavaScript files.
    • removeComments: Removes comments from output.
    • noEmitOnError: Prevents emitting JavaScript files if there are TypeScript compilation errors.

Section 4: Debugging TypeScript Applications

Steps

  1. Enable Source Maps in tsconfig.json: "sourceMap": true
  2. Set Breakpoints: Click on the sidebar or left margin in VS Code.
  3. Launch Configuration (launch.json): { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "skipFiles": ["<node_internals>/**"], "program": "${workspaceFolder}/src/index.ts", "preLaunchTask": "tsc: build - tsconfig.json" } ] }
  4. Start Debugging: Press F5.
  5. Debugging Shortcuts: F10 (Step Over), F11 (Step Into), Shift+F5 (Terminate).

Section 5: Fundamentals of TypeScript

Types in TypeScript

  • **Number, String, Boolean, Null, Undefined: ** Basic types.
  • Type Inference: Automatic detection of types based on values. Avoid using any type.

Arrays

  • Syntax: let numbers: number[] = [1, 2, 3];
  • Avoid Mixed Types: Use type to ensure all elements are of the same type.
  • Code Completion: Intellisense based on inferred types.

Tuples

  • Fixed Length Arrays: let user: [number, string] = [1, 'Mosh'];

Enums

  • Group of Related Constants: enum Size { Small = 1, Medium, Large } let mySize: Size = Size.Medium;
  • Constant Enums: const enum Size for optimized code.

Functions

  • Annotations for Parameters and Return Types: function calculateTax(income: number, taxYear: number = 2022): number {...}

Objects

  • **Shape and Structure Verification: ** Define object structure using type annotations or interfaces.
  • Readonly Properties: readonly id: number;
  • Methods: Function inside objects with specified parameters and return types.

Section 6: Advanced Types in TypeScript

Type Aliases

  • Reuse Types: type Employee = { id: number, name: string }

Union and Intersection Types

  • Union: let weight: number | string;
  • Intersection: type Draggable = { drag: () => void }; type Resizable = { resize: () => void }; type UIWidget = Draggable & Resizable; let textBox: UIWidget = { drag: () => {}, resize: () => {} };

Literal Types

  • Exact Values: let quantity: 50 | 100;
  • Use with Type Alias: type Quantity = 50 | 100;

Nullable Types

  • Union with null or undefined: let customer: Customer | null | undefined;
  • Optional Properties: birthday?: Date
  • Optional Chaining & Nullish Coalescing: customer?.birthday?.getFullYear()

unknown and never Types

  • Unknown: Safer alternative to any.
  • Never: Represents values that never occur.

Additional Resources: For more exercises, summary notes, and certificates, enroll in the complete course at Codewithmosh.com.

Full transcript