Rock-Solid Components with TypeScript and GraphQL

Most recent javascript frameworks bring a solid component model to modern web development, but how can you guarantee that your components work correctly? In this session, you learn how the features of Typescript can be leveraged to bring clarity and dependability when constructing components with React. Using Typescript can help to catch errors early in the development life-cycle. GraphQL and its type system can ensure confidence in your components while fetching remote data. This comprehensive approach ensures that your components behave as you expect, and allows you to eliminate run-time errors. Learn how using types can keep your users happy!

Transcript

1. Rock-Solid Components with TypeScript & GraphQL Mat Warger – mwarger@gmail.com - @mwarger
2. •Strongly-Typed •Open-source •First language introduction
3. •Strongly-Typed •Darling of Enterprise •MVC
4. The path to the front-end…
6. How Hard a Problem Actually Is Time
11. Let’s discover… Why Types? Why TypeScript? Why GraphQL? Why Types?
12. Why Types? The DNA of your Application
13. CCTATTCACTATTGGAGCATTCCGTTCGAGCATGGCAGTAAGTACGCCTTCTCCAT TCTGGTAACCTTCATCCCTATCAGAGCTTGGAGCCAATGATCAGGGTTATTCCCTT GGGACAGACTTCCTACTCACAGTCGGTCACATTGGGCTACTCCATGGGTCTTCGGC TTGACCCGGTCTGTTGGGCCGCGATTGCGTGAGTTTCGGCCCCGCGCTGCGCTGTA TAGTCGATTCTCATCCGGCCCTCACATCTGGAAACCCCAACTTATTTAGATAACAT CATTAGCCGAAGTTGCTGGGCATGTCCACCGTGGAGTCCTCCCCGGGCGTCCCTCC TTCAAATGACGATAAGCACCGGCAAGCACCATTGATCAACGCAAGGATCGGTGATG TTAACAAAGATTCGGCACATTACTCTTGTTGGTGTGGAATCGCTTAACTACGCGGC GAAGCCTTATGGCAAAACCGATGGGGAATGATTCGGGTAGCGCTAAAAGTCCATAG CACGTACATCCCAACCTGGCGTGCGTACAGTTTGACGACCGCTTCACGCTAAGGTG CTGGCCACGTGCTAAATTAATGCGGCTGCACTGCTCTAAGGACAATTACGGAGTGG GCGGCCTGGCGGGAGCACTACCCCATCGACGCGTACTCGAATACTGTATATTGCTC TCACATGAACAAATTAGTAGAGTGCCGCTTTCAGCCCCCCTGTCGTCGGCGACGTC TGTAAAATGGCGTTGATGTGGATCGACTCTATAGAGGCATCTACTGATGCGTAGGG AGATCCGGAATGTATTGGCCTATGTCACTGAAACTGTCCAAACACCCCATGTCGTT ACTGAACGTATCGACGCATACCTCCTTCGTTGAGAACTCACAATTATACAACTGGG
14. CCTATTCACTATTGGAGCATTCCGTTCGAGCATGGCAGTAAGTACGCCTTCTCCAT TCTGGTAACCTTCATCCCTATCAGAGCTTGGAGCCAATGATCAGGGTTATTCCCTT GGGACAGACTTCCTACTCACAGenum variants = “condensed” | “outline“ ACTCCATGGGTCTTCGGCTTGACCGTGAGTTTCGGCCCCGCGCTGC TGTATAGTCGATTCTCATCCGGCCCTCACATCTGGAAACCCCAACTTATTTAGATA ACATCATTAGCCGAAGTTGCTGGGCATGTCCACCGTGGAGTCCTCCCCGGGCGTCC CTCCTTCAAATGACGATAAGCACCGGCAAGCACCATTGATCAACGCAAGGATCGGT GATGTTAACAAAGATTCGGCACATTACTCTTGTTGGTGTGGAATCGCTTAACTACG CGGCGAAGCCTTATGGCAAAACCGATGGGGAATGATTCGGGTAGCGCTAAAAGTCC ATAGCACGTACATCCCAACCTGGCGTGCGTAC export interface Button Props extends StandardProps <ButtonBaseProps, ButtonClas sKey,'component’> CTAAATTAATGGAGCACTACGGAGCACTTCTCAAAGTC CTGCTCTAAGGACAATTACGGAGTGGGCGGCCTGGCGGGAGCACTACCCCATCGAC GCGTACTCGAATACTGTATATTGCTCTCACATGAACAAATTAGTAGAGTGCCGCTT TCAGCCCCCCTGTCGTCGGCGACGTCTGTAAAATGGCGTTGATGTGGATCGACTCT ATAGAGGCATCTACTGATGCGTAGGGAGATCCGGAATGTATTTATTTATT type
15. type HasRenderProp<T> = T extends { render: (props: any) => React.ReactNode } ? T : never; type HasChildrenProp<T> = T extends { children: (props: any) => React.ReactNode } ? T : never; type IsFunction<T> = T extends (...args: any[]) => any ? T : never; export const hasRender = <T extends {}>(value: T): value is HasRenderProp<T> => 'render' in value && isFunction((value as HasRenderProp<T>).render); export const hasChildren = <T extends {}>(value: T): value is HasChildrenProp<T> => 'children' in value && isFunction((value as HasChildrenProp<T>).children); const isFunction = <T extends {}>(value: T): value is IsFunction<T> => typeof value === 'function';
17. A Better Editor!
18. Let’s discover… Why Types? Why TypeScript? Why GraphQL? Why TypeScript?
19. A spectrum of types… elm reason
20. What is TypeScript?
21. Typed Superset of JavaScript Advanced Features
22. A Basic Type
23. An Object Type
24. An Array Type
25. typeof Keyword
26. Type Inference
27. In-line documentation
28. Auto-Correction Suggestion
29. Renaming Across Files
31. Generics
32. How do I get started? .js .tsx
34. Let’s discover… Why Types? Why TypeScript? Why GraphQL? Why GraphQL?
35. What is GraphQL?
43. Use the data…
44. Transform the data…
46. What does it look like? > apollo client:codegen MyTypes.ts > amplify codegen types > gql-gen
52. import { oc } from 'ts-optchain'; (at least until https://github.com/tc39/proposal-optional-chaining is approved...)
53. How do I get started? https://codesandbox.io/s/l9mlzv756q
54. 3rd Party You Also You
55. https://rollbar.com/blog/top-10-javascript-errors/
57. TYPES TOOLS
58. Resources https://www.typescriptlang.org/ https://graphql.org/ https://www.apollographql.com/ https://aws-amplify.github.io/
59. THANK YOU @mwarger