Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
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/