MODERN TYPESCRIPT IS AWESOME!! - YOW! Conferences · 2019-09-23 · Universal React/Redux with...

MODERNTYPESCRIPT IS

AWESOME!!Jake Ginnivan

Seven West Media

AGENDAWhy TypeScript?

TypeScript Introduction

Awesome features in TypeScript 2.x

TypeScript at SWMUniversal React/Redux with WebPack

Started with Babel/ES6Converted to TypeScript after launch

Why?

WHY TYPESCRIPT?

https://channel9.msdn.com/Events/Lang-NEXT/Lang-NEXT-2012/Panel-Web-and-Cloud-Programming

Are you saying you cannot writelarge programs in JavaScript?

- Erik Meijer

No, you can write large programsin JavaScript. You just can’tmaintain them.

- Anders Hejlsberg

MONACO

PROBLEMS TOSOLVE

Static Type SystemBetter tooling supportDownlevel compilation (ES6/7 -> ES3/5)

TYPESCRIPTINTRODUCTION

Demo

WHAT WE SAWStatic Types (interface, type)Union TypesString literal typesGenericsCustom type guardsStructural Typing

MODERNTYPESCRIPT

(>2.0)

TypeScript de韱�nition 韱�les aquired fromNPM now!

Much better suppport for node moduleresolution

I call it my billion-dollar mistake. It was theinvention of the null reference in 1965... But I couldn't resist the temptation to put in a nullreference, simply because it was so easy toimplement. This has led to innumerable errors, vulnerabilities,and system crashes, which have probably caused abillion dollars of pain and damage in the last fortyyears.

- Tony Hoare

In JavaScript we could call it the twobillion-dollar mistake because we have

both null and undefined

TypeError: unde韱�ned is not a function

TypeScript 1.xAll types can be unde韱�ned

const x: number = undefined <-- OK

TypeScript 2.x‐‐strictNullCheck introduced

Removes unde韱�ned from all types

null & undefined now are unary types

const x: number = undefined <-- error

const x: number | undefined = undefined <-- OK

TYPESCRIPT 2.0 TYPEGUARD

IMPROVEMENTS

Type guards (pre 2.0)

  1. type HeadingWithStyle = {  2.     text: string,  3.     className: string  4. }  5. type Heading = string | HeadingWithStyle  6.   7. export default (heading: Heading) => {  8.     if (typeof heading === "string") {  9.         return <h1>{heading}</h1>

Control 韹�ow analysis (> 2.0)

  1. type Video = {  2.     type: 'video'  3.     videoId: string  4. }  5.   6. type Article = {  7.     type: 'article'  8.     title: string  9.     body: ArticleBody

WHAT WE SAWTagged unionsControl 韹�ow type analysisType narrowingUnderpins the strict null check

WHERE IS THIS USEFUL?Redux reducersLists containing multiple types

(video/articles)

DOWN LEVELASYNC/AWAIT

{     "lib": [         "es5",         "dom",         "es2015.promise"     ],}

INDEXED / MAPPEDTYPES

  1. interface Person {  2.     name: string  3.     age: number  4. }  5.   6. type PersonProps = keyof Person  7. // type PersonProps = 'name' | 'age'  8.   9.  10.  11. type Keys = 'option1' | 'option2';

BUILT IN MAPPEDTYPES

interface Person {     name: string     age: number     sex: 'm' | 'f' } // type Readonly<T> = { //     readonly [P in keyof T]: T[P]; // } // type Partial<T> = { //     [P in keyof T]?: T[P]; // } // type Pick<T, K extends keyof T> = { //     [P in K]: T[P]; // }  type PersonPartial = Partial<Person> type ReadonlyPerson = Readonly<Person> type SimplePerson = Pick<Person, 'name' | 'age'>

WHAT WE SAWkeyof operatorMapped/Indexed types

WHERE IS THIS USEFUL?Documentation/StyleguidesFeature toggling

TYPESCRIPT ATSCALE

Project wide refactoringMuch greater code understandingMoves most errors to compile time

GETTING STARTEDhttps://www.typescriptlang.org/

MODERNTYPESCRIPT IS

AWESOME!!Jake Ginnivan

@jakeginnivan | jake@ginnivan.net