Chapters - Table of contents →
TypeScript Architecture, which consists in having stronger types for more stability, is composed of many layers:
1. Typing API's data
Keeping your React application data types in sync with your API is the best way to avoid common maintenance errors.
Also, by leveraging GraphQL Fragments, split your data types into granular types that can be easily used by components.
2. Type external dependency and legacy JS code
Make sure that all your dependencies have typings by installing the corresponding @types/* packages or writing your own .d.ts type definitions.
Migrate gradually your existing JavaScript code by identifying all the dependencies and then provide type definition for the most critical parts first and migrate the files part by part.
3. Stricter types
Stable TypeScript projects use explicit types and avoid any at all cost.
To achieve this goal, leverage TypeScript's compiler strict mode and enable some ESLint TypeScript rules to help your project grow.