Migrate the frontend codebase to TypeScript

[kschiffer]

Summary

This issue proposes migrating our Console and Account applications from JavaScript to TypeScript. Utilizing TypeScript will provide significant benefits, including improved type safety, enhanced code maintainability, and a better developer experience, particularly as our applications continue to grow in complexity. Also, it enables us to be future proof for React 19.

Current Situation

Currently, both the Console and Account applications are entirely in JavaScript. While we utilize propTypes and defaultProps for rudimentary type checking. This approach is deprecated and set to be removed starting from React 19 Also, this approach is limited and doesn't offer the full benefits of static type checking. This can lead to potential runtime errors and negatively impacts code clarity and readability, especially when working with complex data structures and interactions between components and the Redux store.

Why do we need this? Who uses it, and when?

Migrating to TypeScript will primarily benefit the developers working on these codebases. It offers several advantages:

• Early Error Detection: TypeScript's static type checking catches type-related errors during development, preventing them from reaching runtime and impacting users.
• Improved Code Clarity: Type annotations make the code easier to understand and maintain, especially as the codebase grows and more developers contribute.
• Enhanced Tooling: TypeScript offers better tooling support, including advanced autocomplete, refactoring capabilities, and improved error reporting.
• Easier Refactoring: TypeScript's type system provides valuable guidance during refactoring, making it less error-prone and helping identify areas for improvement.

Proposed Implementation

We will follow a gradual migration approach, gradually converting sections of the codebase to TypeScript to minimize disruption and ensure continuous integration and deployment:

Phase 1: Setting the Stage

1. Install Dependencies: Install TypeScript and the necessary type definitions for React and Redux: npm install -D typescript @types/react @types/react-dom @types/react-redux
2. Configuration:
   • Create a tsconfig.json file for both Console and Account, initially setting the strict option to false to allow for a smoother initial conversion.
   • Update Webpack/Babel configurations to handle TypeScript files (.ts and .tsx).
   • Configure ESLint with TypeScript support and adjust linting rules to support both JavaScript and TypeScript during the transition.
3. Data Structures: Define TypeScript interfaces for key data structures shared across the applications:
   • API responses (e.g., gateway, application, device, etc.)
   • State objects used within Redux reducers
   • Complex prop types passed between components

Phase 2: Picking the Low-Hanging Fruit

1. Simple Components: Convert basic, stateless components to TypeScript, starting with those primarily relying on props and having minimal logic. Examples include:
   • ./components/tabs/index.js
   • ./components/tabs/tab/index.js
   • ./components/sidebar/switcher/index.js
   • ./components/sidebar/search-button/index.js
   • ./components/sidebar/section-label/index.js
   • ./components/sidebar/side-footer/index.js
   • ./components/sidebar/side-header/index.js
   • ./components/sidebar/side-menu/item/link.js
2. Redux Actions and Reducers: These highly benefit from type definitions, ensuring type safety throughout state management.
3. Utility Functions: Migrate utility functions with well-defined input and output types to TypeScript. Examples include:
   • ./lib/to-input-date.js
   • ./lib/filter-data-props.js
   • ./lib/password/index.js
   • ./lib/combine-refs.js
   • ./lib/string-to-hash.js
   • ./lib/host-from-url.js
   • ./lib/debounce.js
   • ./lib/get-by-path.js
   • ./lib/capitalize-message.js
   • ./lib/pipe.js

Phase 3: Tackling the Core

1. Stateful Components: Convert more complex, stateful components to TypeScript.
2. Containers/Connectors: Introduce types for containers and connectors, ensuring type safety between components and the Redux store.
3. API Client: Define interfaces for API endpoints and responses in both Console and Account applications, promoting consistent data handling.
4. Third-Party Libraries: Utilize existing type definitions from DefinitelyTyped where available. Create custom definitions for external libraries lacking official TypeScript support.

Phase 4: Increasing Type Strictness & Refactoring

1. Thorough Review: Once a substantial portion of the codebase is migrated, review existing type definitions for accuracy and completeness.
2. Stepping Up the Strictness: Gradually adjust tsconfig.json to increase type strictness levels. This helps catch potential errors and enforce better coding practices.
3. Guided Refactoring: Utilize TypeScript's robust type system to guide refactoring efforts, identifying areas for code improvement and further reducing potential errors.

Specific Examples and Considerations

• Constants and Configurations: The files in ./constants/ define various constants and configurations. These can be easily converted using enums, type aliases, and interfaces.
• Form Validation: Utilize Yup's type system to enhance validation logic within forms, ensuring consistency and catching potential errors.
• Error Handling: Implement type guards and exhaustive checks for error handling, ensuring all possible error scenarios are addressed.
• Test Coverage: Maintain high test coverage throughout the entire migration process. This verifies that changes don't introduce regressions.
• Gradual and Iterative Approach: Convert small, manageable chunks of code at a time, facilitating continuous integration and deployment.
• Team Collaboration: Let's make a more detailed plan of the individual phases, including a list of files that we can then track and check-off successively.
• Type Definition Quality: Focus on creating accurate and comprehensive type definitions. Poorly defined types can negate the benefits of TypeScript.

By following this phased approach, we can leverage TypeScript's strengths to significantly enhance the reliability, maintainability, and overall developer experience of our Console and Account applications.

Contributing

• I can help by doing more research.
• I can help by implementing the feature after the proposal above is approved.
• I can help by testing the feature before it's released.

Validation

• The feature is tested in a staging environment.
• The feature is documented in The Things Stack Documentation

Code of Conduct

• I agree to follow TTN's Community Code of Conduct.

[kschiffer]

Blocked by #7328