Intro to TypeScript

I've been using TypeScript for a couple of years and I love it. This talk is aimed at JavaScript developers who haven't used TypeScript before.

Transcript

1. Intro to Ben Sweedler @fairaxe
2. Hello! Ben Sweedler • From Urbana • Plays violin and board games • Works as frontend developer
3. Frontend Developer Handbook 2019 In 2019, Expect… • “Someone you know will convince you to use TypeScript.” frontendmasters.com/books/front-end-handbook/2019/
4. This Talk 1. What is TypeScript? 2. Learn TypeScript in 5 Minutes 3. Why I recommend TypeScript
5. What is TypeScript? “TypeScript is typed superset of JavaScript that compiles to plain JavaScript.” 1. TypeScript compiles to JavaScript 2. TypeScript is a superset of JavaScript 3. TypeScript adds types to JavaScript
6. TypeScript Compiles to JavaScript
7. TypeScript is a Superset of JavaScript • TypeScript is a strict syntactical superset of JavaScript • Valid JavaScript is valid TypeScript
8. TypeScript Adds Types to JavaScript const city: string = 'Urbana'; const population: number = 41989; const mountains: boolean = false;
9. TypeScript Adds Types to JavaScript const city = 'Urbana'; const population = 41989; const mountains = false;
10. Why Add Types to JavaScript? const city: string = 'Urbana'; const population: number = city;
11. Static vs Dynamic Typing • Compiled: Code translated before run-time • Interpreted: Code translated on the fly, during execution • Static: Types checked before run-time • Dynamic: Types checked on the fly, during execution vs Source
12. TypeScript: JavaScript at Scale
13. TypeScript Hype 2015 2012 2016 Source VS Code Angular 2
14. Installing TypeScript 1. Install TypeScript tools npm install --save-dev typescript 2. Compile your code tsc hello_world.ts The result will be hello_world.js Or, try it out in a browser: ◦ TypeScript Playground typescriptlang.org/play/
15. TypeScript in 5 Minutes 1. Interfaces 2. Functions 3. Classes 4. New Primitive Types
16. Defining Interfaces export interface Employee { id?: string empName: string; readonly empCode: number; }
17. Declaring Variables import {Employee} from './employee.ts' const empOfTheMonth: Employee = { empName: "Ben", empCode: 12345; };
18. Functions function add(x: number, y: number): number { return x + y; } const sum: number = add(1, 1);
19. Type Inference function add(x: number, y: number) { return x + y; } const sum: number = add(1, 1); function add(x: number, y: number): number
20. Type Inference function add(x, y) { return x + y; } const sum: number = add(1, 1); Parameter 'x' implicitly has an 'any' type.
21. Functions function getManagers(empl: Employee): Employee[] { return this.http.get(‘api.employees.com’, empl.id); }
22. Classes export class EmployeeCrud { public getManagers(empl: Employee): Employee[] { return this.http.get(‘api.employees.com’, empl.id); } }
23. Don’t Overuse Classes export class PavlovEmployee implements Employee { public getManagers(): Employee[] { return this.http.get(‘api.employees.com’, this.id); } } const ben: Employee = new PavlovEmployee(); const managers = ben.getManagers();
24. New Primitive Types • any: the most permissible type unknown: the least permissible type let ben: any; console.log(ben.favoriteFlavorOfLaCroix);
25. New Primitive Types • unknown: the least permissible type unknown: the least permissible type let ben: unknown; console.log(ben.favoriteFlavorOfLaCroix); Object is of type 'unknown'.
26. Type Assertion let ben: unknown; const empl: Employee = <Employee>ben;
27. • Arrays • Tuples • Enums New Primitive Types enum Color {Red, Green, Blue} let x: [string, number]; x = ["hello", 10]; const list: number[] = [1, 2, 3]; const list2: Array<number> = [1, 2, 3];
28. Why I Recommend TypeScript 1. Optionally Object Oriented Programming 2. API Driven Development 3. Tooling
29. Optional Object Oriented Programming • Classes are useful for organizing modules and components • Interface Segregation Principle
30. API Driven Development • TypeScript helps collaboration • Coding against an interface: ◦ Between components ◦ Between the front end and the back end ◦ Between developers
31. Tooling • IDE integration • TSConfig • TSLint • DefinitelyTyped
32. Parting Thoughts 1. TypeScript is meant for large projects and large teams. 2. TypeScript does nothing at runtime
33. Thank You @fairaxe bensweedler.com
34. Attributions • Frontend Developers Handbook by Frontend Masters • Web Developer Illustration Vector by Vecteezy • Interface Segregation Principle - • TypeScript is a Type-Checker • Static vs Dynamic Typing • Why I was wrong about TypeScript • Using TypeScript with React