Embed Size (px)
Citation preview
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
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
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
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
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
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
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
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
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
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
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
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
