TypeScript and React

In this presentation I will go over the pain-points of JavaScript, introduce TypeScript, and adding TypeScript to an already existing React application.

Transcript

1. TypeScript and React by: Fabian Buentello @initFabian TypeScript and React by Fabian Buentello
2. About Me { } TypeScript and React by Fabian Buentello
3. About Me { "name": "Fabian Buentello", } TypeScript and React by Fabian Buentello
4. About Me { "name": "Fabian Buentello", "occupation": "iOS Developer at ChaiOne", } TypeScript and React by Fabian Buentello
5. About Me { "name": "Fabian Buentello", "occupation": "iOS Developer at ChaiOne", "loves": [ "JavaScript", "Swift" ] } TypeScript and React by Fabian Buentello
6. Presentation Theme TypeScript and React by Fabian Buentello
9. Agenda • The Three Certainties in Life • JavaScript's Love/Hate relationship • TypeScript to the rescue! • TypeScript Playground Demo • Add TypeScript to React App TypeScript and React by Fabian Buentello
10. The Three Certainties in Life TypeScript and React by Fabian Buentello
11. The Three Certainties in Life • Death • Taxes • You will either Love or Hate JavaScript... nothing inbetween. • There will always be off-by-one errors TypeScript and React by Fabian Buentello
12. JavaScript's Love/Hate relationship TypeScript and React by Fabian Buentello
13. TypeScript and React by Fabian Buentello
14. TypeScript and React by Fabian Buentello
15. Why? TypeScript and React by Fabian Buentello
16. Why? • Static vs Dynamic • Strong vs Weak TypeScript and React by Fabian Buentello
17. Static vs Dynamic TypeScript and React by Fabian Buentello
18. Statically-typed Statically typed programming languages do type checking at compile- time Languages: • C# • Java • Swift TypeScript and React by Fabian Buentello
19. TypeScript and React by Fabian Buentello
20. Dynamically-typed Dynamically typed programming languages do type checking during run-time Languages: • JavaScript • Ruby • PHP TypeScript and React by Fabian Buentello
21. TypeScript and React by Fabian Buentello
22. Strong vs Weak TypeScript and React by Fabian Buentello
23. Strongly typed # ruby example def main print 4 + '4' # throws error end main TypeScript and React by Fabian Buentello
24. Weak typed !" js example function main() { console.log(4 + '4'); !" "44" console.log(4 * '4'); !" 16 } main(); TypeScript and React by Fabian Buentello
25. Weak typed !" js example function main() { console.log(4 + '4'); !" "44" console.log(4 * '4'); !" 16 } main(); TypeScript and React by Fabian Buentello
26. TypeScript and React by Fabian Buentello
27. Other hates about JavaScript? • Ambiguous code • Hacky JavaScript code TypeScript and React by Fabian Buentello
28. ambiguous code !" APIService.js const getSettings = (payload) !# { return this.get('me', { headers: parseXHeader(payload) }) } TypeScript and React by Fabian Buentello
29. ambiguous code !" APIService.js const getSettings = (payload) !# { return this.get('me', { headers: parseXHeader(payload) }) } TypeScript and React by Fabian Buentello
30. ambiguous code !" APIService.js const getSettings = (payload) !# { !" !!$ } !" .... const parseXHeader = (payload) !# { if (payload !% (payload.xNavigation !& payload.siteCode)) { const { xNavigation, siteCode } = payload return { 'X-Navigation': xNavigation !& '', 'X-SiteCode': siteCode !& '' } } return {} } TypeScript and React by Fabian Buentello
31. ambiguous code !" APIService.js const getSettings = (payload) !# { !" !!$ } !" .... const parseXHeader = (payload) !# { if (payload !% (payload.xNavigation !& payload.siteCode)) { const { xNavigation, siteCode } = payload return { 'X-Navigation': xNavigation !& '', 'X-SiteCode': siteCode !& '' } } return {} } TypeScript and React by Fabian Buentello
32. ambiguous code !" APIService.js const getSettings = (payload) !# { !" !!$ } !" .... const parseXHeader = (payload) !# { if (payload !% (payload.xNavigation !& payload.siteCode)) { const { xNavigation, siteCode } = payload return { 'X-Navigation': xNavigation !& '', 'X-SiteCode': siteCode !& '' } } return {} } TypeScript and React by Fabian Buentello
33. ambiguous code !" APIService.js const getSettings = (payload) !# { !" !!$ } !" .... const parseXHeader = (payload) !# { !" !!$ } !" ------------------- payload { xNavigation: string siteCode: string } TypeScript and React by Fabian Buentello
34. hacky code function formatForDisplay(invoice) { const rate = invoice.property.metadata.rate !"!!# return { amount : "$" + (invoice.cost * rate) } } TypeScript and React by Fabian Buentello
35. hacky code function formatForDisplay(invoice) { const rate = invoice.property.metadata.rate !"!!# return { amount : "$" + (invoice.cost * rate) } } TypeScript and React by Fabian Buentello
36. hacky code function formatForDisplay(invoice) { let rate = (() !" { if (invoice.customPropertyFlag) { return invoice.customProperty.rate } return invoice.property.metadata.rate })() !#!!$ return { amount : "$" + (invoice.cost * rate) } } TypeScript and React by Fabian Buentello
37. So what's the problem? TypeScript and React by Fabian Buentello
38. TypeScript and React by Fabian Buentello
39. TypeScript to the rescue! TypeScript and React by Fabian Buentello
40. What is TypeScript? Statically typed superset of JavaScript that compiles to plain JavaScript. TypeScript starts with JavaScript with an optional static Type System, but when compiled, all the types go away. TypeScript and React by Fabian Buentello
41. JavaScript let fullName = 'Bob Bobbington' let age = 37 let list = [1, 2, 3] let person = { name: 'John Smith', age: 35 } !!" function add(x, y) { return x + y } TypeScript and React by Fabian Buentello
42. TypeScript let fullName: string = 'Bob Bobbington' let age: number = 37 let list: number[] = [1, 2, 3] let person: {name: string, age: number} = { name: 'John Smith', age: 35 } !!" function add(x: number, y: number): number { return x + y } TypeScript and React by Fabian Buentello
43. TypeScript Playground TypeScript and React by Fabian Buentello
44. Convert previous example !" APIService.js const getSettings = (payload) !# { return this.get('me', { headers: parseXHeader(payload) }) } !" .... const parseXHeader = (payload) !# { if (payload !$ (payload.xNavigation !% payload.siteCode)) { const { xNavigation, siteCode } = payload return { 'X-Navigation': xNavigation !% '', 'X-SiteCode': siteCode !% '' } } return {} } TypeScript and React by Fabian Buentello
45. Add TypeScript to React App Demo TypeScript and React by Fabian Buentello
46. Questions TypeScript and React by Fabian Buentello
47. • email: fabian.buentello@gmail.com • handle: @initFabian TypeScript and React by Fabian Buentello
48. Reference • A Brief History of Frontend Frameworks • Awesome TypeScript video • What's new in TypeScript? • Redux Action Pattern TypeScript • Type system wiki • What is the difference between statically typed and dynamically typed languages? • Static/Dynamic vs Strong/Weak • Typing: Static vs Dynamic, Weak vs. Strong • Weak and Strong TypeScript and React by Fabian Buentello