Typescript: enjoying large scale browser development

ENJOYING
LARGE SCALE
BROWSER DEVELOPMENT
joost＠de-vries․name
codestar.nl
joost-de-vries
@jouke
TYPESCRIPT





WHERE I'M COMING FROM
Scala
Systems that run on JVM and Unix flavour
Systems for core products
Functional programming
Reactive programming
Worrying about Docker stuff and proxies and clusters
and ...
Browser development used to feel
like an alien world

TYPESCRIPT
Made a Typescript buildtool:
https://github.com/joost-de-vries/sbt-typescript
Done fullstack projects with frontend:
Typescript
RxJs
Angular2
Poking around a lot in the TS compiler source code

JAVASCRIPT BUT SMARTER
You get immediate feedback through the red sea
You get a code completion dropdown while typing
You can click through to the definition
You can refactor with confidence across all your files
All because of types
So if we drone on about types it's because of the ease of use it enables.

This is made possible by a compiler with types and type
inferencing

TYPES
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
const user = { firstName: "Jane", lastname: "User"};
document.body.innerHTML = greeter(user); // will show a red sea. lastname is camel case
Add some simple type to a function

Any Javascript is valid Typescript initially
You can increase your control gradually
by adding types
by ruling out error prone patterns
Very practical:
increase control step by step

RULING OUT ERROR PRONE PATTERNS
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"lib": [ "es6", "dom"],
/* settings that flag potential errors */
"noEmitOnError": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
"noImplicitThis": true
},
Turn on compiler options step by step

import * as React from 'react';
import { Modal, ModalContent } from '../modal';
import LoginForm from './login-form';
interface ILoginModalProps extends React.Props<any> {
isVisible: boolean;
isPending: boolean;
hasError: boolean;
onSubmit: () => void;
};
export default function LoginModal({
isVisible,
isPending,
hasError,
onSubmit
}: ILoginModalProps) {
return (
<Modal isVisible={ isVisible }>
<ModalContent>
<h1 className="mt0">Login</h1>
<LoginForm
isPending={ isPending }
hasError={ hasError }
It's the javascript of the future
right now
..transpiled into ES5 or ES3

you can start gradually and choose your prefered amount
of control
let suits = ["hearts", "spades", "clubs", "diamonds"];
function pickCard(x) {
// ...
}
let myDeck = [{ suit: "diamonds", card: 2 },
{ suit: "spades", card: 10 },
{ suit: "harts", card: 4 }];
let pickedCard2 = pickCard(15);

type Suit = "hearts" | "spades" | "clubs" | "diamonds";
let suits:Suit[] = ["hearts", "spades", "clubs", "diamonds"];
type Rank = 1 | 2| 3| 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13
interface Card{
suit: Suit
card: Rank
}
type Deck = Card[]
function pickCard(x:Deck | Rank): any {
// ...
}
let myDeck:Card[] = [{ suit: "diamonds", card: 2 },
{ suit: "spades", card: 10 },
{ suit: "harts", card: 4 }]; // will show an error
let pickedCard2 = pickCard(15); // will show an error
With types added

②
ENJOYING LARGE SCALE
BROWSER
DEVELOPMENT

Uncaught
TypeError:
undefined is not
a function

Happy!
class Snake extends Animal {
constructor(private name: string) { }
move(distanceInMeters = 5) {
console.log(`${this.name} slithering...`)
super.move(distanceInMeters)
}
}
const sam = new Snake("Sammy the Python")
sam.move()

MOVING AWAY FROM THE
'AWFUL PARTS OF JAVASCRIPT'
global variables ES6
scopes ES6
semicolon insertion Typescript
reserved keywords ES6 +/-
unicode ES6
typeof Typescript
parseInt esLint
floating point esLint
NaN esLint
phony arrays ES6

MOVING AWAY FROM THE 'BAD
PARTS OF JAVASCRIPT'
== tsLint
within Typescript
eval esLint
continue ES6 +/-
switch fall through Typescript
Block-less Statements esLint
++ esLint
Bitwise Operators ?
function expression ES6
typed wrappers ?

THE JOURNEY AWAY
FROM THE BAD PARTS
OF JAVASCRIPT
Module loaders; AMD, CommonJs
jsHint, esLint, tsLint
Ecmascript updates: ES6, ES7
Types! Typescript, Flowtype, ...
Types are the next step

③
JAVASCRIPT OF THE
FUTURE
Right now!

④
SMARTER ABOUT
JAVASCRIPT
Revisited

CHALLENGES FOR TYPES IN
JAVASCRIPT PATTERNS
function buildName(firstName, lastName) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
buildName("Jan");
All function arguments are
optional in Javascript

function buildName(firstName: string, lastName?: string) {
if (lastName) // type: string | undefined
return firstName + " " + lastName; // type: string
else
return firstName;
}
buildName("Jan")
Type guard strips away undefined
from the type of the optional
argument

type NameOrNameArray = string | string[];
function createName(name: NameOrNameArray) {
if (typeof name === "string") { // type: string or string[]
return name; // type: string
}
else {
return name.join(" "); // type: string[]
}
}
var greetingMessage = `Greetings, ${ createName(["Sam", "Smith"]) }`;
Typical Javascript
'Or' types are called union types

GREAT TYPESCRIPT SUPPORT
Sublime Text
Atom
Visual Code
IntelliJ / Webstorm
Eclipse
Visual Studio
TS compiler offers a language api
that editors and IDEs can use

EXPLORING A CODE BASE
THE TS LANGUAGE API

⑥
TYPESCRIPT 2.0
More than what most server side
languages
have to offer

function padLeft(value: string, padding: string | number) {
// ...
}
const indentedString = padLeft("Hello world", true); // error

Union types

interface Bird {
fly();
layEggs();
}
interface Fish {
swim();
layEggs();
}
function getSmallPet(): Fish | Bird {
// ...
}
let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim(); // errors

Union types

ABOUT TS TYPES
class Animal {
feet: number;
constructor(name: string, numFeet: number) { }
}
class Size {
feet: number;
constructor(numFeet: number) { }
}
let a: Animal;
let s: Size;
a = s; //OK
s = a;
Types are structural instead of the
more common nominal typing

type Easing = "ease-in" | "ease-out" | "ease-in-out";
class UIElement {
animate(dx: number, dy: number, easing: Easing) {
if (easing === "ease-in") {
// ...
}
else if (easing === "ease-out") {
}
else if (easing === "ease-in-out") {
}
else {
// error! should not pass null or undefined.
}
}
}
let button = new UIElement();
button.animate(0, 0, "ease-in");
button.animate(0, 0, "uneasy"); // error: "uneasy" is not allowed here
Union types and literal types
A powerful combination

function bar(x: string | number) {
if (typeof x === "number") {
return;
}
x; // type of x is string here
}
Control flow analysis

NULL AND UNDEFINED AWARE
TYPES
// Compiled with --strictNullChecks
function parseNumber(json:string):number | undefined
let x: number | undefined;
let y: number;
x = parseNumber(json); // Ok
y = parseNumber(json); // Compile error
if(x){
y = x; // Ok x has type number here
}

No more 'undefined is not a
function'!

interface Square {
kind: "square";
size: number;
}
interface Rectangle {
kind: "rectangle";
width: number;
height: number;
}
type Shape = Square | Rectangle | Circle;
function area(s: Shape) {
switch (s.kind) {
case "square": return s.size * s.size; // type is Square
case "rectangle": return s.width * s.height; // Rectangle
case "circle": return Math.PI * s.radius * s.radius;
}
}

ADTs and pattern matching!

⑦
WHEN NOT TO USE
TYPESCRIPT

main =
App.beginnerProgram { model = optOut, update = update, view = view }
type alias Model =
{ notifications : Bool
, autoplay : Bool
, location : Bool
}
optOut : Model
optOut =
Model True True True

If you don't want to build on
Javascript
If you want to do more Functional
Programming

ALTERNATIVES
Babel + Flowtype
Coffeescript
ScalaJs
Elm
Purescript
Clojurescript
Java!
...
Most languages compile to JS nowadays

TYPESCRIPT VS FLOWTYPE
TS Flow
better editor support
more open development
sound type system
control flow analysis control flow analysis
null, undefined aware null, undefined aware
tagged unions tagged unions
Both great for browser dev
TS 2.0 has caught up with a lot of standout Flow features

DON'T USE TS IF
..you write Microsoft
with a $ sign

DON'T USE TS IF
you don't like Javascript
you don't want to setup a build
you dislike anything from Microsoft
it's not that much code and the team is just you

SO
New versions of Ecmascript are really nice
You can use them right now
Typescript helps when your team and your codebase
grows
You can use existing JS code
There's a lot of tool support
Lots of resources online to get started
Open source and cross platform

Top 15 languages on github
3,5 x growth

RESOURCES
Typescript website https://www.typescriptlang.org
Try out TS in your browser
https://www.typescriptlang.org/play/index.html
Typescript Handbook
https://www.typescriptlang.org/docs/handbook
Typescript Gitbook http://basarat.gitbooks.io/typescript/

Typescript: enjoying large scale browser development

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Typescript: enjoying large scale browser development (20)

Recently uploaded (20)

Typescript: enjoying large scale browser development