Practice TypeScript Techniques Building React Server Components App
Download as PPTX, PDF0 likes44 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
This document discusses various TypeScript techniques for building React server components applications. It covers topics like compiling code to catch errors, using the satisfies operator, custom type mappings, opaque types, readonly types, template literal types, and typing JSON files. The document provides examples for each technique and emphasizes how they can improve type safety, prevent errors, and optimize code. It also recommends applying these techniques and running type checks on pull requests.
Practice TypeScript Techniques Building React Server Components App
- 1. 1
- 2. PracticeTypeScript Techniques Building React ServerComponentsApp Maurice de Beijer @mauricedb
- 3. Maurice de Beijer The Problem Solver Microsoft MVP Freelance developer/instructor Currently at https://someday.com/ Twitter: @mauricedb Web: http://www.TheProblemSolver.nl E-mail: [email protected] 3 © ABL - The Problem Solver
- 4. Topics Compiling the code to catch type errors early Using the satisfies operator Use type mappings to optimize your code Custom type mappings are really powerful Can help detect all sorts of errors quickly Can make types more readable in IntelliSense Use Template LiteralTypes to manipulate types Use OpaqueTypes to help with type safety MakeTypeScript even stricter and catch more potential errors Prevent objects from being mutated by accident Improve performance when importing large JSON files © ABL - The Problem Solver 4
- 5. Type it out by hand? “Typing it drills it into your brain much better than simply copying and pasting it.You're forming new neuron pathways.Those pathways are going to help you in the future. Help them out now!” © ABL - The Problem Solver 5
- 6. Prerequisites Install Node & NPM Install the GitHub repository © ABL - The Problem Solver 6
- 7. Install Node.js & NPM © ABL - The Problem Solver 7
- 8. Following Along Repo: https://github.com/mauricedb/ts-conf-2023-ws Slides: https://bit.ly/ts-conf-2023-ws © ABL - The Problem Solver 8
- 9. Create a new Next.js app © ABL - The Problem Solver 9
- 10. AddingShadcn components © ABL - The Problem Solver 10
- 11. The changes © ABL - The Problem Solver 11
- 12. Clone the GitHub Repository © ABL - The Problem Solver 12
- 13. Install NPM Packages © ABL - The Problem Solver 13
- 14. Start branch © ABL - The Problem Solver 14 Start with the 00-start branch git checkout --track origin/00-start
- 15. Start the application © ABL - The Problem Solver 15
- 16. The application © ABL - The Problem Solver 16
- 17. Compiling the code © ABL - The Problem Solver 17
- 18. Compiling the code Quite often TypeScript code is not type checked during development Create React App use Babel (JavaScript) Vite uses ESBuild (Go) Next.js uses SWC (Rust) These removeTypeScript annotations and treat the code as modern JavaScript This means thatTypeScript type errors can go unnoticed Run the TypeScript compiler to check the code © ABL - The Problem Solver 18
- 19. package.json © ABL - The Problem Solver 19
- 20. npm run compile © ABL - The Problem Solver 20
- 21. shopping- cart.tsx © ABL - The Problem Solver 21
- 22. npm run compile © ABL - The Problem Solver 22
- 23. Compile andTest onGitHub © ABL - The Problem Solver 23
- 24. Compile and Test onGitHub Make sure to check your code with each pull request on GitHub Include ESLint and Next build Generate types from other sources if appropriate Prisma, GraphQL, OpenAPI etc. When included in GitHub they can be out of date © ABL - The Problem Solver 24
- 25. compile-and-test.yml © ABL - The Problem Solver 25
- 26. What are ReactServer Components? © ABL - The Problem Solver 26
- 27. ReactServer Components React Server Components only execute on the server Traditionally React components always execute in the browser This is not the same as Server Side Rendering With SSR components are executed both on the client and server Applications are a combination of server and client components The result is that the back and front-end code are more integrated Leading to better type safety © ABL - The Problem Solver 27
- 28. Before RSC © ABL - The Problem Solver 28
- 29. With RSC © ABL - The Problem Solver 29
- 30. ReactServer Components © ABL - The Problem Solver 30 Server components can be asynchronous Great to load data from some API Server components render just once No re-rendering with state changes or event handling The server component code is not send to the browser Can safely use secure API key’s etc. Smaller bundle sizes ☞ React Server Components requireTypeScript 5.1 ☜
- 31. Client Component © ABL - The Problem Solver 31 Server components can render server and client components Client components can only render client components Adding 'use client’ to the top of a component makes it a client component
- 32. Server Component © ABL - The Problem Solver 32
- 33. Satisfies operator © ABL - The Problem Solver 33
- 34. Satisfies operator The satisfies operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. 💡The goal is to report type error where they are caused 💡 © ABL - The Problem Solver 34
- 35. movie-card.tsx © ABL - The Problem Solver 35
- 36. movies/page.tsx © ABL - The Problem Solver 36
- 37. PreventOverfetching © ABL - The Problem Solver 37
- 38. Prevent Overfetching Using satisfies Prisma.MovieSelect is not optimal Allows Overfetching of movie data Making the application slightly slower than required This can be prevented with a type mapping Create a MovieSelect like object with just the required keys © ABL - The Problem Solver 38
- 39. movies/page.tsx © ABL - The Problem Solver 39
- 40. movies/page.tsx © ABL - The Problem Solver 40
- 41. Break time Photo by Mindspace Studio on Unsplash
- 42. Custom type mapping © ABL - The Problem Solver 42
- 43. Custom type mapping TheTypeScript type system itself is a programming language With variables, loops, conditional logic etc. Example: turn Zod schema into it’sTypeScript type © ABL - The Problem Solver 43
- 44. Type mapping Boolean logic © ABL - The Problem Solver 44
- 45. type-mapping.ts © ABL - The Problem Solver 45
- 46. The display of types © ABL - The Problem Solver 46
- 47. The display of types Type mappings sometimes lead to hard to read types Easy to fix with another type mapping © ABL - The Problem Solver 47
- 48. type-mapping.ts © ABL - The Problem Solver 48
- 49. type-mapping.ts © ABL - The Problem Solver 49
- 50. type-mapping.ts © ABL - The Problem Solver 50
- 51. OpaqueTypes © ABL - The Problem Solver 51
- 52. OpaqueTypes A lot of business data ultimately end up as a primitive data type They are all modeled as string, number etc. The compiler doesn’t know the difference between them A PO box number and invoice total amount are both type “number” The same for the compiler Very different for the business case Opaque types can make it easier to reason about code By providing distinct types and a clear separation
- 53. Console output © ABL - The Problem Solver 53
- 54. checkout- shopping- cart.ts © ABL - The Problem Solver 54
- 55. checkout- shopping- cart.ts © ABL - The Problem Solver 55
- 56. checkout- dialog.tsx © ABL - The Problem Solver 56
- 57. More strict features © ABL - The Problem Solver 57
- 58. MoreStrict Features There are many more strict settings not enabled by “strict” allowUnreachableCode allowUnusedLabels exactOptionalPropertyTypes noFallthroughCasesInSwitch noImplicitOverride noImplicitReturns noPropertyAccessFromIndexSignature noUncheckedIndexedAccess noUnusedLocals noUnusedParameters © ABL - The Problem Solver 58
- 59. noUnchecked IndexedAccess By default every index from an array is seen as the array element type Even if it exceeds the items available and will result in undefined Enabling “noUncheckedIndexedAccess” requires you to check the element before using Whether the element is the array element type or undefined Try showing the Horror movies and observe a runtime error © ABL - The Problem Solver 59
- 60. tsconfig.json © ABL - The Problem Solver 60
- 61. movies/page.tsx © ABL - The Problem Solver 61
- 62. Using Readonly<> © ABL - The Problem Solver 62
- 63. Readonly<T> The Readonly<T> mapped type creates a read-only mapped type Can’t change properties anymore Or use “array.push()” etc. ⚠️ Readonly<T> is not recursive ⚠️ Only the first level of properties becomes read-only There is also a ReadonlyArray<T> mapped type 💡Recommended for function arguments to show intent💡 And AJAX responses etc. © ABL - The Problem Solver 63
- 64. movie-card.tsx © ABL - The Problem Solver 64
- 65. Custom type mapping DeepReadonly<> © ABL - The Problem Solver 65
- 66. DeepReadonly<T> Make a whole nested object structure read-only Recursive mapped types are very powerful An improvement over the default “Readonly<T>” Source: https://gist.github.com/basarat/1c2923f91643a16a90de638e76bce0ab © ABL - The Problem Solver 66
- 67. movies/page.tsx © ABL - The Problem Solver 67
- 68. Template LiteralTypes © ABL - The Problem Solver 68
- 69. Template LiteralTypes Builds on string literal types but manipulates type definitions For example change a types snake case to camel case key names © ABL - The Problem Solver 69
- 70. type-mapping.ts © ABL - The Problem Solver 70
- 71. type-mapping.ts © ABL - The Problem Solver 71
- 72. type- mapping.ts © ABL - The Problem Solver 72
- 73. TypingJSON files © ABL - The Problem Solver 73
- 74. TypingJSON files IntelliSense will parse an imported JSON file to determine the types This can be very slow with large files Add a <filename>.d.json.ts to explicitly type the imported data ⚠️Will not validate that the JSON actually has the correct shape ⚠️ © ABL - The Problem Solver 74
- 75. genres.d.json.ts © ABL - The Problem Solver 75
- 76. tsconfig.json © ABL - The Problem Solver 76
- 77. seed.ts © ABL - The Problem Solver 77
- 78. Conclusion Compiling the code to catch type errors early Compile andTest your code with each pull request Using the satisfies operator Use type mappings to optimize your code Prevent over fetching of data with Prisma Custom type mappings are really powerful Can help detect all sorts of errors quickly Make mapped types more readable Using another type mapping OpaqueTypes can help with type safety Not all strings represent the same data but forTypeScript a string is a string Use more strict features beyond the basics Using noUncheckedIndexedAccess can help catch potential runtime errors Using Readonly<> and ReadonlyArray<> Prevent objects from being mutated by accident Custom type mapping DeepReadonly<> Use Template Literal Types to manipulate types Typing JSON files can help performance when importing large JSON files © ABL - The Problem Solver 78
- 79. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 79