should you move up to typescript and why is the answer probably yes???

13
Should You Move Up from JS to TypeScript and Why is the Answer Probably Yes? MILOŠ BOŠKOVIĆ @MISAIZDALEKADEV FULLSTACK - LONDON - JULY - 2017

Upload: milos-boskovic

Post on 21-Jan-2018

93 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: Should you move Up to TypeScript and why is the answer probably Yes???

Should You Move Up from JS to

TypeScript and Why is the Answer

Probably Yes?

M I L O Š B O Š K O V I Ć

@ M I S A I Z D A L E K A D E V

F U L L S TA C K - L O N D O N - J U LY - 2 0 1 7

Page 2: Should you move Up to TypeScript and why is the answer probably Yes???

ABOUT ME

› Frontend developer

› Working from Niš, Serbia

› Angular2 + TypeScript

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 3: Should you move Up to TypeScript and why is the answer probably Yes???

ABOUT TYPESCRIPT

› Made in Microsoft in 2012

› Picked up with Angular2

› Idea: stay one step ahead of current ES

› Main feature - types

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 4: Should you move Up to TypeScript and why is the answer probably Yes???

ABOUT TYPESCRIPT

› Superset of JS

› Transcompiles to JavaScript (ES3, ES5,

ES6/2015, ES2016, ES2017)

› Works well with Source Maps

› Extension – ts (instead of js)

„TypeScript is just JavaScript with documentation!“

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 5: Should you move Up to TypeScript and why is the answer probably Yes???

DEMO

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 6: Should you move Up to TypeScript and why is the answer probably Yes???

OTHER INTERESTING FEATURES

› Type Alias

type StrOrNum = string|number; let sample: StrOrNum;

sample = 123; sample = '123';

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 7: Should you move Up to TypeScript and why is the answer probably Yes???

OTHER INTERESTING FEATURES

› Never type – used for exhaustive checks

› Example

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 8: Should you move Up to TypeScript and why is the answer probably Yes???

MIGRATION PATH?

› tsconfig.json

› Rename .js to .ts

› Once TS compiler is introduced, there will be errors

› Type system in TS is optional

› Any type

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 9: Should you move Up to TypeScript and why is the answer probably Yes???

MIGRATION PATH?

var foo = 123; var bar = 'hey';

bar = foo; // ERROR: cannot assign a number to a string

var foo = 123; var bar = 'hey';

bar = foo as any; // All good

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 10: Should you move Up to TypeScript and why is the answer probably Yes???

MIGRATION PATH?

function foo() { return 1;

}

let bar = 'hey'; bar = foo(); // ERROR: cannot assign a number to a string

function foo(): any { return 1;

}

let bar = 'hey'; bar = foo(); // All good

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 11: Should you move Up to TypeScript and why is the answer probably Yes???

WHAT ABOUT EXTERNAL LIBRARIES?

› Check if type declaration files can be found on DefinitelyTyped

› These are *.d.ts files

› You can jump right into them and check out function declarations

› Create a vendor.d.ts file if needed

› Quick fix for libraries:

declare var $: any;

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 12: Should you move Up to TypeScript and why is the answer probably Yes???

CONCLUSION

› TypeScript is definitely worth a try› Easy to get it running

› Cleaner code

› Faster error detection

› Links

› TypeScript Deep – Dive http://basarat.gitbooks.io/typescript/

› https://www.typescriptlang.org/

› https://skillsmatter.com/conferences/8264-fullstack-2017-the-conference-

on-javascript-node-and-internet-of-things#skillscasts

› bit.ly/move-to-typescript-now

FUL L S TA CK - L O NDO N - J ULY - 2 0 1 7

M I L O Š B O Š K O V I Ć - @ M I S A I Z D ALE K A D EV

Page 13: Should you move Up to TypeScript and why is the answer probably Yes???

Thanks!

[email protected]

@MISAIZDALEKADEV