Final project
Chapter 4: TypeScript Architecture
Chapters - Table of contents →
%20(1).png)
The Squareteam apps needs a lot of TypeScript fixes!
Our final project (that should take around 20 to 40min) will be to add typings to a demo app called Squareteam (project management app).
Access it with the link below and fix all the TypeScript issues:
Advised order of exploration of the project
- Look at the typings issues in App.tsx
- Then, take a look at Dashboard, Team and Projects components
- Migrate Dashboard, Team and Projects to GraphQL Code Generator hooks and Fragments (/graphql/generated.tsx)
- Type Search.tsx and its corresponding makeSearch() helpers with Generics
- Finally, take a look as Stats component and its custom hook useStats() that requires advanced types (Generics and Mapped types)
Not sure about what needs to be fixed?
Here is the list of the issues to fix:
- App.tsx: some window globals need typings
- App.tsx: component having route with reach-router needs to have the proper Props types
- App.tsx: the @types/reach__router package is missing
- For all files in components/: GraphQL queries must be migrated to the ones generated in graphql/generated.ts
- For all files in components/: use the appropriate GraphQL Fragment generated type
- For Team.tsx and Projects.tsx: the search function miss typings
- components/Search.tsx: the Props typings are missing
- utils/makeSearch.ts: function typings are missing
- utils/useStats.ts
-
the dependency dummy-project-story-points-calculatoris missing type declarations
-
useStats() requires some Generics and mapped types in order to accept flexible configuration with a label as key and enum as value or a custom function.You will notice that "coreMetrics" functions have the same signature as custom ones 😉
-
Up next
We use cookies to collect statistics through Google Analytics.