Introduction to TypeScript

## Learning Objectives - Understand JavaScript history and limitations - Learn why TypeScript was created - Set up TypeScript development environment - Write and run your first TypeScript program - Understand TypeScript configuration ## What is TypeScript? TypeScript is a strongly-typed programming language developed by Microsoft. It is a superset of JavaScript that adds optional static typing, classes, interfaces, and modern JavaScript features. ```typescript // TypeScript adds type annotations to JavaScript let message: string = "Hello, TypeScript!"; console.log(message); ``` ## JavaScript History ### Evolution | Year | Version | Key Features | |------|---------|--------------| | 1997 | JavaScript 1.0 | First release in Netscape | | 2005 | AJAX | Asynchronous web applications | | 2009 | Node.js | JavaScript on the server | | 2015 | ES6 | Classes, modules, arrow functions | | 2020 | ES2020 | Optional chaining, nullish coalescing | | 2022 | ES2022 | Top-level await, private fields | ### JavaScript Limitations - **No static typing** - Errors caught only at runtime - **No compile-time checks** - Typos discovered late - **Limited tooling** - Less IDE support - **Scaling challenges** - Hard to maintain large codebases ## Why TypeScript? ### Benefits - **Static Typing** - Catch errors during development - **IDE Support** - Better autocomplete and refactoring - **Code Documentation** - Types serve as documentation - **Safer Refactoring** - Compiler catches breaking changes - **Modern Features** - Use latest JavaScript today ### Comparison ```javascript // JavaScript - error found at runtime function add(a, b) { return a + b; } add(5, "5"); // "55" - subtle bug ``` ```typescript // TypeScript - error caught at compile time function add(a: number, b: number): number { return a + b; } add(5, "5"); // Compile error! ``` ## Installing TypeScript ### Prerequisites Install Node.js from ### Install TypeScript ```bash npm install -g typescript ``` ### Verify Installation ```bash tsc --version ``` ### Using TypeScript Online Try TypeScript without installation at ## Your First Program ### File: hello.ts ```typescript // Your first TypeScript program const message: string = "Hello, TypeScript!"; console.log(message); ``` ### Compile and Run ```bash tsc hello.ts # Compiles to hello.js node hello.js # Runs the JavaScript output ``` ### Output ```text Hello, TypeScript! ``` ## TypeScript Configuration ### Initialize Configuration ```bash tsc --init ``` ### tsconfig.json ```json { "compilerOptions": { "target": "ES2020", "module": "commonjs", "strict": true, "outDir": "./dist", "rootDir": "./src", "esModuleInterop": true, "skipLibCheck": true }, "include": ["src/**/*"], "exclude": ["node_modules"] } ``` ### Key Options | Option | Description | |--------|-------------| | target | ECMAScript version for output | | strict | Enable all strict type checks | | outDir | Output directory for compiled files | | rootDir | Source directory | | module | Module system to use | ## Development Workflow ### Compile On Save (IDE) Most IDEs can compile TypeScript automatically when files change. ### Watch Mode ```bash tsc --watch ``` ### With ts-node Run TypeScript directly without compilation: ```bash npx ts-node hello.ts ``` ## IDE Setup ### VS Code Install the "TypeScript Importer" extension for better autocomplete. ### WebStorm Native TypeScript support built-in. ### Settings ```json { "typescript.preferences.importModuleSpecifier": "relative" } ``` ## TypeScript vs JavaScript ### JavaScript ```javascript function greet(name) { return "Hello, " + name; } greet("World"); // Works greet(123); // Works, but may be unintended ``` ### TypeScript ```typescript function greet(name: string): string { return "Hello, " + name; } greet("World"); // Works greet(123); // Compile error: Argument of type 'number' ``` ## TypeScript Compiler ### Basic Commands ```bash tsc file.ts # Compile single file tsc --help # Show all options tsc --noEmit # Type check without output tsc --pretty # Formatted error messages ``` ### Strict Mode Enable all strict checks: ```json { "compilerOptions": { "strict": true } } ``` This enables: - noImplicitAny - strictNullChecks - strictFunctionTypes - and more ## Hello World Explained ```typescript // Type declaration (optional in some cases) const message: string = "Hello, TypeScript!"; // Log to console console.log(message); ``` ### Components 1. **Type annotation** - `: string` declares the type 2. **const** - Immutable binding 3. **console.log** - Output function ## Summary - TypeScript is a superset of JavaScript with static typing - Adds compile-time error checking - Improves IDE support and developer experience - Install with `npm install -g typescript` - Compile with `tsc`, run with `node` - Use `tsconfig.json` to configure the compiler - Start with `strict: true` for best results