Slide 1
Slide 1 text
Intro to
Ben Sweedler @fairaxe
Slide 2
Slide 2 text
Hello!
Ben Sweedler
● From Urbana
● Plays violin and board games
● Works as frontend developer
Slide 3
Slide 3 text
Frontend Developer Handbook 2019
In 2019, Expect…
● “Someone you know will convince you to use
TypeScript.”
frontendmasters.com/books/front-end-handbook/2019/
Slide 4
Slide 4 text
This Talk
1. What is TypeScript?
2. Learn TypeScript in 5 Minutes
3. Why I recommend TypeScript
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
TypeScript Compiles to JavaScript
Slide 7
Slide 7 text
TypeScript is a Superset of JavaScript
● TypeScript is a strict syntactical superset
of JavaScript
● Valid JavaScript is valid TypeScript
Slide 8
Slide 8 text
TypeScript Adds Types to JavaScript
const city: string = 'Urbana';
const population: number = 41989;
const mountains: boolean = false;
Slide 9
Slide 9 text
TypeScript Adds Types to JavaScript
const city = 'Urbana';
const population = 41989;
const mountains = false;
Slide 10
Slide 10 text
Why Add Types to JavaScript?
const city: string = 'Urbana';
const population: number = city;
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
TypeScript:
JavaScript at
Scale
Slide 13
Slide 13 text
TypeScript Hype
2015
2012 2016
Source
VS Code
Angular 2
Slide 14
Slide 14 text
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/
Slide 15
Slide 15 text
TypeScript in 5
Minutes
1. Interfaces
2. Functions
3. Classes
4. New Primitive Types
Slide 16
Slide 16 text
Defining Interfaces
export interface Employee {
id?: string
empName: string;
readonly empCode: number;
}
Slide 17
Slide 17 text
Declaring Variables
import {Employee} from './employee.ts'
const empOfTheMonth: Employee = {
empName: "Ben",
empCode: 12345;
};
Slide 18
Slide 18 text
Functions
function add(x: number, y: number): number {
return x + y;
}
const sum: number = add(1, 1);
Slide 19
Slide 19 text
Type Inference
function add(x: number, y: number) {
return x + y;
}
const sum: number = add(1, 1);
function add(x: number, y: number): number
Slide 20
Slide 20 text
Type Inference
function add(x, y) {
return x + y;
}
const sum: number = add(1, 1);
Parameter 'x' implicitly has an 'any' type.
Slide 21
Slide 21 text
Functions
function getManagers(empl: Employee): Employee[] {
return this.http.get(‘api.employees.com’, empl.id);
}
Slide 22
Slide 22 text
Classes
export class EmployeeCrud {
public getManagers(empl: Employee): Employee[] {
return this.http.get(‘api.employees.com’, empl.id);
}
}
Slide 23
Slide 23 text
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();
Slide 24
Slide 24 text
New Primitive Types
● any: the most permissible type
unknown: the least permissible type
let ben: any;
console.log(ben.favoriteFlavorOfLaCroix);
Slide 25
Slide 25 text
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'.
Slide 26
Slide 26 text
Type Assertion
let ben: unknown;
const empl: Employee = ben;
Slide 27
Slide 27 text
● 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 = [1, 2, 3];
Slide 28
Slide 28 text
Why I Recommend TypeScript
1. Optionally Object Oriented Programming
2. API Driven Development
3. Tooling
Slide 29
Slide 29 text
Optional Object
Oriented
Programming
● Classes are useful for
organizing modules and
components
● Interface Segregation
Principle
Slide 30
Slide 30 text
API Driven
Development
● TypeScript helps
collaboration
● Coding against an
interface:
○ Between components
○ Between the front end
and the back end
○ Between developers
Slide 31
Slide 31 text
Tooling
● IDE integration
● TSConfig
● TSLint
● DefinitelyTyped
Slide 32
Slide 32 text
Parting Thoughts
1. TypeScript is meant for large
projects and large teams.
2. TypeScript does nothing at runtime
Slide 33
Slide 33 text
Thank You @fairaxe
bensweedler.com
Slide 34
Slide 34 text
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