# TypeScript ### For JavaScript devs --- ## JavaScript Some annoying quirks Interpreted, not compiled Not object-oriented --- ## TypeScript A C#-like JavaScript Superset of JavaScript Compiles to JavaScript --- ## What is compilation? JavaScript is intepreted TypeScript is compiled Translation is needed before code runs --- ## Like C#? Made at Microsoft with static typing and proper classes --- ## 1. Static Typing ``` let flower : string = 'rose'; let flowers : string[] = ['iris', 'lily', 'tulip']; ``` Define variable types Catch compile-time Improve code reliability --- ## 2. Type Inference ``` let message = 'Hello, World!'; ``` Implicit variable types Make life easier Saves on typing --- ## 3. Enums ``` enum Colour {Red, Green, Blue} let c: Colour = Colour.Green; ``` Simple user-defined types Group related values Making code tidy --- ## 4. Functions ``` function add(x: number, y: number): number { return x + y; } ``` Parameters with types Typed return values Avoid type *'any'* --- ## 5. Classes ``` class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } ``` Template for objects Supports abstraction, inheritance Encapsulates data, behaviour --- ## 6. Interfaces ``` interface Shape { draw(): string; } class Triangle implements Shape { draw() { return "Drawing a triangle"; } } function displayShape(shape: Shape) { console.log(shape.draw()); } ``` class *implements* interface Interface, not implementation aka duck typing --- ## 7. Generics ``` function identity<T>(arg: T): T { return arg; } ``` Define multi-purpose functions using generic placeholders Insert any type --- ## 8. Union Types ``` function padLeft(value: string, padding: string | number) { // ... } ``` Less generic flexibility Limited type variations Adding versatility, complexity --- ## 9. Type Guards ``` function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } ``` Useful for unions Enables type-specific operations Helps manage complexity --- ## 10. Type Aliases ``` type NameOrNameArray = string | string[]; function createName(name: NameOrNameArray) { // ... } ``` Same unions everywhere? Use this shorthand Apply as needed --- #### A bunch of other advanced stuff: - Decorators - Intersection Types - Mapped Types - Conditional Types - Utility Types - Indexed Access Types - Template Literal Types - Keyof and Lookup Types --- Enough for now. --- ## Website  https://www.typescriptlang.org/