Ultimate TypeScript Course

Introduction

• Instructor: Mosh Hamidani
• Comprehensive TypeScript course from basics to advanced concepts
• No prior TypeScript knowledge required but basic JavaScript knowledge is needed
• Key topics include variables, constants, arrays, objects, functions, and more
• Course includes exercises and practical examples

Course Structure

1. Introduction
   • What is TypeScript?
   • Why use TypeScript?
   • Differences between TypeScript and JavaScript
2. Development Environment Setup
   • Install Node.js and TypeScript compiler
   • Set up Visual Studio Code
   • Creating and compiling TypeScript files
3. Basic Concepts
   • Static Typing
   • Type Inference
   • Basic Types (number, string, boolean, any)
4. Advanced Concepts
   • Arrays
   • Tuples
   • Enums
   • Functions
   • Objects
5. Configuration and Compiling
   • TypeScript Configuration (tsconfig.json)
   • Target JavaScript version
6. Debugging TypeScript
   • Using Visual Studio Code for debugging
   • Setting breakpoints
7. Advanced Types
   • Type Aliases
   • Union and Intersection Types
   • Narrowing Types
   • Nullable Types
   • Unknown and Never Types

What is TypeScript?

• Created by Microsoft to address JavaScript's shortcomings
• Adds static typing to JavaScript, making it more robust and maintainable
• TypeScript files are transpiled to JavaScript files for use in browsers

Why Use TypeScript?

• Static Typing: Catches errors at compile time
• Improved code quality and readability
• Productivity features (e.g., code completion and refactoring)
• Future-proof: Use features of upcoming JavaScript versions

Development Environment Setup

Tools

• Node.js
• Node Package Manager (npm)
• TypeScript Compiler (tsc)
• Visual Studio Code (VS Code)

Steps

1. Install Node.js
2. Install TypeScript globally using npm: npm install -g typescript
3. Verify installation: tsc --version
4. Set up VS Code as the code editor

Writing and Compiling TypeScript

• Create a TypeScript file with .ts extension
• Compile TypeScript file using tsc command
• TypeScript file is transpiled to JavaScript
• Example: index.ts to index.js

Configuring the TypeScript Compiler

• Configuration file: tsconfig.json
• Important settings:
  • target: Version of JavaScript to compile to (e.g., ES2016)
  • module: Module system (e.g., CommonJS)
  • outDir: Output directory for JavaScript files
  • rootDir: Directory containing source files
  • removeComments: Removes comments from transpiled files
  • noEmitOnError: Prevents JavaScript emission if errors exist

Basic TypeScript Concepts

Static Typing

• TypeScript is statically typed (types known at compile time)
• Types include: number, string, boolean, any
• Example: let age: number = 30;

Type Inference

• Types are inferred if not explicitly annotated
• Example: let age = 30; // TypeScript infers `age` as `number`

any Type

• Represents any kind of value
• Should be avoided for type safety

Arrays

• Declare with type annotation: let numbers: number[] = [1, 2, 3];
• TypeScript arrays can only hold specified types

Tuples

• Fixed-length arrays with specified types for each element
• Example: let user: [number, string] = [1, 'Tom'];

Enums

• Represents a list of related constants
• Example: enum Size { Small = 1, Medium, Large } let mySize: Size = Size.Medium;

Functions

• Annotate parameters and return type: function calculateTax(income: number, taxYear: number = 2022): number { if (taxYear < 2022) { return income * 1.2; } return income * 1.3; }
• Optional and default parameters

Objects

• Define shape using type annotations
• Example: let employee: { id: number, name: string } = { id: 1, name: 'John' };
• Read-only properties and method definitions

Debugging TypeScript

• Enable source maps in tsconfig.json
• Use VS Code for setting breakpoints and stepping through code
• Example configuration: { "preLaunchTask": "tsc: build - tsconfig.json", "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/src/index.ts" }

Advanced Types

Type Aliases

• Simplify and reuse types
• Example: type Employee = { id: number, name: string, retire: (date: Date) => void }; let employee: Employee = { id: 1, name: 'John', retire: (date) => console.log(date) };

Union Types

• Variable can hold more than one type
• Example: function kgToLbs(weight: number | string): number { // Conversion logic }

Intersection Types

• Combines multiple types into one
• Example: type Draggable = { drag: () => void }; type Resizable = { resize: () => void }; type UIWidget = Draggable & Resizable;

Literal Types

• Limited set of specific values
• Example: let quantity: 50 | 100;

Nullable Types

• Handle null and undefined values
• Example: let name: string | null | undefined;
• Optional property access and call operators

Conclusion

• TypeScript enhances JavaScript with static types, improving code quality and maintainability
• Ideal for large-scale applications
• This course provides a thorough understanding of TypeScript fundamentals and advanced features

Tip: Exercise regularly and apply learned concepts to solidify understanding!