Typescript

[rzueger]

@claude

Is something blocking us from migrating to typescript in this project? If yes, what?

If we can migrate to typescript, layout a plan here.

[claude]

Claude finished @rzueger's task in 2m 30s —— View job

---

TypeScript Migration Analysis

• Gather context and understand the request
• Analyze project structure, build tooling, and dependencies
• Identify potential blockers
• Draft migration plan

---

Is Anything Blocking a TypeScript Migration?

No hard blockers. The tooling in this project (Webpack 5, Babel 7, Jest 30) all have solid TypeScript support. However, the project is not currently configured for TypeScript and there are non-trivial setup steps and a large migration scope.

Here is what's missing today:

Area	Current state	What's needed
TypeScript compiler	Not installed	Add typescript package
Babel	@babel/preset-env + @babel/preset-react only	Add @babel/preset-typescript
Webpack	Extensions: .js, .jsx, .json only	Add .ts, .tsx
Jest	Coverage from .{js,jsx} only	Update to include .{ts,tsx}
tsconfig	None	Create tsconfig.json
Global type declarations	None	Create global.d.ts for webpack DefinePlugin globals (__DEV__, __CONF__, __THEME__, etc.)

Key observations about migration scope:

• ~575 JS/JSX source files in src/ to eventually migrate
• 122 files use prop-types — all of these need prop types replaced with TypeScript interfaces
• All major runtime dependencies have TypeScript support: redux 5 (built-in), redux-saga (built-in), react-final-form 7 (built-in), styled-components 6 (built-in), firebase 12 (built-in)
• react-router-dom v4 needs @types/react-router-dom (v4-compatible types exist)
• pdfmake needs @types/pdfmake
• react-day-picker v7 needs @types/react-day-picker

---

Recommended Approach: Babel-based incremental migration

Use Babel to strip TypeScript types at compile time (no separate tsc compilation step) and run tsc --noEmit separately for type checking only. This lets .js and .ts files coexist, so the migration can happen file-by-file without blocking development.

---

Migration Plan

Phase 1 — Infrastructure setup

1. Install packages:

   npm install --save-dev typescript @babel/preset-typescript @types/react @types/react-dom @types/react-redux @types/react-router-dom @types/pdfmake @types/react-day-picker

2. Update .babelrc:

   {
     "presets": [
       "@babel/preset-env",
       "@babel/preset-react",
       "@babel/preset-typescript"
     ],
     "plugins": ["@babel/plugin-transform-runtime"]
   }

   Note: @babel/preset-typescript must come after @babel/preset-env but order relative to @babel/preset-react doesn't matter.

3. Update webpack.config.js — extend resolve extensions and babel-loader rule:

   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     // ...
   },
   module: {
     rules: [
       {
         test: /\.[jt]sx?$/,  // was /\.jsx?$/
         exclude: /node_modules\/(?!(idb|@firebase)\/).*/,
         use: { loader: 'babel-loader' }
       },
       // ...
     ]
   }

4. Create tsconfig.json (lenient to start — tighten over time):

   {
     "compilerOptions": {
       "target": "ES6",
       "module": "ESNext",
       "moduleResolution": "bundler",
       "jsx": "react",
       "allowJs": true,
       "checkJs": false,
       "strict": false,
       "noImplicitAny": false,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "outDir": "build",
       "noEmit": true
     },
     "include": ["src/**/*", "global.d.ts"],
     "exclude": ["node_modules", "functions"]
   }

5. Create global.d.ts for webpack DefinePlugin globals:

   declare const __DEV__: boolean;
   declare const __CONF__: unknown;
   declare const __THEME__: string;
   declare const __FIREBASE_PROJECT_ID__: string;
   declare const __FIREBASE_DATABASE_NAME__: string;
   declare const __FIREBASE_DATABASE_URL__: string;
   declare const __FIREBASE_API_KEY__: string;
   declare const __DISABLE_IP_AUTHENTICATION__: boolean;
   declare const __FLIGHTNET_COMPANY__: string;
   declare const __LANDING_FEES_STRATEGY__: string;
   declare const __LANDING_FEES__: unknown;
   declare const __GO_AROUND_FEES__: unknown;

6. Update jest.config.js:

   collectCoverageFrom: [
     'src/**/*.{js,jsx,ts,tsx}',
     'functions/**/*.{js,jsx,ts,tsx}',
     // ...
   ],

7. Add a type-check script to package.json:

   "typecheck": "tsc --noEmit"

Phase 2 — Migrate src/util/ first

Utility functions have no React/Redux dependencies and are the easiest to type. Rename .js → .ts, add types and return types. This validates the setup without touching components.

Phase 3 — Migrate src/modules/

Migrate the Redux ducks (actions, reducers, sagas) module by module. Good starting points are smaller modules (e.g., messages, ui).

• Actions: Add typed action creators and discriminated union action types
• Reducers: Add typed state interfaces and action type parameters
• Sagas: redux-saga has good TypeScript support — generator return types and yield call/select typing

Phase 4 — Migrate src/containers/

Redux connect() HOC patterns need typed mapStateToProps / mapDispatchToProps. Modern alternative is useSelector / useDispatch hooks which are easier to type and the project is already moving toward functional components.

Phase 5 — Migrate src/components/

The largest phase (~122 files with prop-types). For each component:

1. Rename .js → .ts / .jsx → .tsx
2. Replace PropTypes declarations with a TypeScript interface
3. Remove the prop-types import

Phase 6 — Enable strict mode

Once all files are migrated:

1. Set "strict": true, "noImplicitAny": true in tsconfig.json
2. Fix resulting errors incrementally
3. Remove prop-types from package.json entirely
4. Enforce the typecheck script in CI

---

One gotcha to watch out for

The react-hot-loader package (v4) has known friction with TypeScript. Since this project is already on React 18, react-hot-loader is effectively a legacy dev tool — it may be worth removing it before or during the TypeScript migration to avoid fighting with its typings.

[rzueger]

@claude create a ticket for the react-hot-loader removal

[claude]

Claude finished @rzueger's task in 1m 33s —— View job

---

• Check react-hot-loader usage in the codebase
• Prepare GitHub issue for react-hot-loader removal

---

I was unable to create the issue programmatically (the gh issue create command is blocked by sandbox permissions in this environment).

Here is the issue content — you can create it manually:

---

Issue: Remove react-hot-loader dependency

Background

react-hot-loader v4 is listed as a dependency in package.json but is not actively used anywhere in the codebase — it is not referenced in .babelrc, webpack.config.js, or any source file.

The package is effectively dead weight and should be removed:

• Incompatible with React 18: react-hot-loader v4 does not support React 18 (the project's current React version). It was designed for React 16/17.
• Abandoned upstream: The package has not been actively maintained.
• TypeScript friction: It has known issues with TypeScript typings, which is a consideration for the planned TypeScript migration (see Typescript #625).
• Superseded: Hot module replacement for React is now handled by React Fast Refresh (built into the webpack dev server setup).

Tasks

• Remove react-hot-loader from dependencies in package.json
• Run npm install to update package-lock.json
• Verify dev server still works (npm start)
• Verify tests still pass (npm test)

References

• TypeScript migration issue: Typescript #625

---

Create this issue manually

[rzueger]

@claude can you do phase 1

[claude]

Claude finished @rzueger's task in 2m 2s —— View job • claude/issue-625-20260303-1645 • Create PR ➔

---

Phase 1: TypeScript Infrastructure Setup

• Gather context and read current config files
• Install TypeScript packages (added to package.json; run npm install after merging)
• Update .babelrc — added @babel/preset-typescript
• Update webpack.config.js — resolve extensions + babel-loader test regex
• Create tsconfig.json
• Create global.d.ts — declarations for all webpack DefinePlugin globals
• Update jest.config.js — coverage now includes .ts/.tsx
• Add typecheck script to package.json
• Committed and pushed

---

Summary of changes

File	Change
.babelrc	Added @babel/preset-typescript
webpack.config.js	Resolve extensions: added .ts, .tsx; babel-loader test changed from /\.jsx?$/ to /\.[jt]sx?$/
jest.config.js	collectCoverageFrom extended to {js,jsx,ts,tsx}
package.json	Added typescript, @babel/preset-typescript, @types/react, @types/react-dom, @types/react-redux, @types/react-router-dom, @types/pdfmake, @types/react-day-picker to devDependencies; added "typecheck": "tsc --noEmit" script
tsconfig.json	New — lenient config with allowJs: true, strict: false, noEmit: true for incremental migration
global.d.ts	New — declare const for all webpack DefinePlugin globals

After merging, run npm install to install the new packages, then you can verify the type-check with npm run typecheck.

|

[rzueger]

@claude can you do phase 2 and verify

[claude]

Claude finished @rzueger's task in 9m 11s —— View job • claude/issue-625-20260303-1656 • Create PR ➔

---

Phase 1 + Phase 2: TypeScript Infrastructure + src/util/ Migration

• Gather context and understand the request
• Check current branch state — Phase 1 infrastructure not yet on this branch
• Inventory src/util/ files and assess migration scope
• Apply Phase 1 infrastructure (Babel, webpack, tsconfig, global.d.ts, jest, package.json)
• Migrate 20 utility files to TypeScript (.ts / .tsx)
• Committed and pushed

---

What was done

Phase 1 infrastructure (applied to this branch since it was on a separate branch):

File	Change
.babelrc	Added @babel/preset-typescript
webpack.config.js	Resolve: added .ts, .tsx; babel-loader test: /\.[jt]sx?$/
jest.config.js	Coverage: extended to {js,jsx,ts,tsx}
package.json	Added typescript, @babel/preset-typescript, @types/*; added typecheck script
tsconfig.json	New — lenient config (allowJs, strict: false, noEmit: true)
global.d.ts	New — declare const for all webpack DefinePlugin globals

Phase 2 — 20 files migrated in src/util/:

File	Types added
formatMoney.ts	(value: number): string
objectToArray.ts	Generic <T>(obj: Record<string, T>): T[]
time.ts	Time interface, typed parse/normalize
filter.ts	Generic <T> with typed predicate
masking.ts	Nullable string params/returns
reference-number.ts	(key: string): string
isElementInViewport.ts	(element: Element): boolean
log.ts	(message: string, e?: unknown): void
isHelicopter.ts	(registration: string, aircraftCategory?: string): boolean
getAuthQueryToken.ts	Typed location param, string | null return
auth.ts	Typed credential/token functions
validate.ts	ValidationRule, ValidationError interfaces
reducer.ts	Generic <S, A extends { type: string }>
autoRestartSaga.ts	Generator function types
dates.ts	Full typed API with return types
movements.ts	Movement interface, typed comparators
aerodromes.ts	Firebase-typed fetch/get/exists
aircrafts.ts	Firebase-typed fetch
newLineToBr.tsx	(str: string | null | undefined): React.ReactNode
locationDisplay.tsx	LocationData, LocationDisplayOptions interfaces

Still .js (intentionally not migrated yet):

• aircraftCategories.js — uses module.exports for build-process compatibility
• flightTypes.js, routes.js — depend on __CONF__ shape, needs AerodromeConf type defined first
• Firebase utilities, report generators, CSV parsers — Phase 3+

Verification

npm install requires interactive approval in this environment, so tsc wasn't run automatically. After merging:

npm install
npm run typecheck   # runs tsc --noEmit

If any errors appear, they'll guide further type refinements. The tsconfig.json starts lenient (strict: false, noImplicitAny: false, checkJs: false) so the initial check should pass cleanly.

---