[PR #979] [MERGED] Migrate top common components to TS #3444

New Issue

2026-02-28T20:41:43-06:00

GiteaMirror commented

2026-02-28 20:41:43 -06:00

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/979
Author: @albertogasparin
Created: 5/1/2023
Status: ✅ Merged
Merged: 5/9/2023
Merged by: @albertogasparin

Base: master ← Head: alberto/migrate-common-ts

📝 Commits (2)

bdedb6c Migrate common components to TS
d3a7f84 Fix pr comments

📊 Changes

73 files changed (+736 additions, -439 deletions)

View changed files

📝 .eslintrc.js (+57 -8)
📝 packages/desktop-client/package.json (+4 -0)
📝 packages/desktop-client/src/components/ActiveLocation.js (+2 -2)
📝 packages/desktop-client/src/components/App.js (+4 -4)
📝 packages/desktop-client/src/components/AppBackground.js (+2 -2)
📝 packages/desktop-client/src/components/FatalError.js (+2 -2)
📝 packages/desktop-client/src/components/FinancesApp.js (+2 -2)
📝 packages/desktop-client/src/components/FixedSizeList.js (+4 -4)
📝 packages/desktop-client/src/components/FloatableSidebar.js (+2 -2)
📝 packages/desktop-client/src/components/KeyHandlers.js (+2 -2)
📝 packages/desktop-client/src/components/ManageRules.js (+4 -2)
📝 packages/desktop-client/src/components/NotesButton.js (+2 -2)
📝 packages/desktop-client/src/components/Page.js (+3 -3)
📝 packages/desktop-client/src/components/Stack.js (+5 -5)
📝 packages/desktop-client/src/components/Titlebar.js (+8 -2)
📝 packages/desktop-client/src/components/accounts/Account.js (+11 -4)
📝 packages/desktop-client/src/components/accounts/MobileAccounts.js (+2 -2)
📝 packages/desktop-client/src/components/accounts/MobileTransaction.js (+31 -27)
📝 packages/desktop-client/src/components/accounts/SimpleTransactionsTable.js (+2 -2)
📝 packages/desktop-client/src/components/accounts/TransactionsTable.js (+11 -6)

...and 53 more files

📄 Description

I wanna take this PR as opportunity to discuss some patterns before we start batch migrating React things to TS. Here are my recommendations:

Using React.* types
I would discourage it because makes it hard to understand what is a value and what is type. I prefer import type for all things types.
Using React FC<Props>
This is superfluous, and just adds indirection (reading the generic's argument instead of the object) and "type noise"
Using types over interfaces
Interfaces are great in OOP but component props do not really meet that form. We wanna be able to conditionally accept group of props (via unions) and Omit/Pick/... between component props. Choosing type means we don't need to think when to use interface and when type. We could also introduce type-fest to make some of that prop merging easier.

If you don't agree with something, let's just reason it through and I'm happy to adapt. Overall, I value more consistency than a specific "style", so just wanna make sure we all write in a similar way.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/979 **Author:** [@albertogasparin](https://github.com/albertogasparin) **Created:** 5/1/2023 **Status:** ✅ Merged **Merged:** 5/9/2023 **Merged by:** [@albertogasparin](https://github.com/albertogasparin) **Base:** `master` ← **Head:** `alberto/migrate-common-ts` --- ### 📝 Commits (2) - [`bdedb6c`](https://github.com/actualbudget/actual/commit/bdedb6c2abf1eb441f9b66053557250342414b58) Migrate common components to TS - [`d3a7f84`](https://github.com/actualbudget/actual/commit/d3a7f84476f24fda150b74a08b2766b1d6fe8d65) Fix pr comments ### 📊 Changes **73 files changed** (+736 additions, -439 deletions) <details> <summary>View changed files</summary> 📝 `.eslintrc.js` (+57 -8) 📝 `packages/desktop-client/package.json` (+4 -0) 📝 `packages/desktop-client/src/components/ActiveLocation.js` (+2 -2) 📝 `packages/desktop-client/src/components/App.js` (+4 -4) 📝 `packages/desktop-client/src/components/AppBackground.js` (+2 -2) 📝 `packages/desktop-client/src/components/FatalError.js` (+2 -2) 📝 `packages/desktop-client/src/components/FinancesApp.js` (+2 -2) 📝 `packages/desktop-client/src/components/FixedSizeList.js` (+4 -4) 📝 `packages/desktop-client/src/components/FloatableSidebar.js` (+2 -2) 📝 `packages/desktop-client/src/components/KeyHandlers.js` (+2 -2) 📝 `packages/desktop-client/src/components/ManageRules.js` (+4 -2) 📝 `packages/desktop-client/src/components/NotesButton.js` (+2 -2) 📝 `packages/desktop-client/src/components/Page.js` (+3 -3) 📝 `packages/desktop-client/src/components/Stack.js` (+5 -5) 📝 `packages/desktop-client/src/components/Titlebar.js` (+8 -2) 📝 `packages/desktop-client/src/components/accounts/Account.js` (+11 -4) 📝 `packages/desktop-client/src/components/accounts/MobileAccounts.js` (+2 -2) 📝 `packages/desktop-client/src/components/accounts/MobileTransaction.js` (+31 -27) 📝 `packages/desktop-client/src/components/accounts/SimpleTransactionsTable.js` (+2 -2) 📝 `packages/desktop-client/src/components/accounts/TransactionsTable.js` (+11 -6) _...and 53 more files_ </details> ### 📄 Description I wanna take this PR as opportunity to discuss some patterns before we start batch migrating React things to TS. Here are my recommendations: 1. Using `React.*` types I would discourage it because makes it hard to understand what is a value and what is type. I prefer `import type` for all things types. 2. Using React `FC<Props>` This is superfluous, and just adds indirection (reading the generic's argument instead of the object) and "type noise" 3. Using types over interfaces Interfaces are great in OOP but component props do not really meet that form. We wanna be able to conditionally accept group of props (via unions) and Omit/Pick/... between component props. Choosing type means we don't need to think when to use interface and when type. We could also introduce [type-fest](https://github.com/sindresorhus/type-fest) to make some of that prop merging easier. If you don't agree with something, let's just reason it through and I'm happy to adapt. Overall, I value more consistency than a specific "style", so just wanna make sure we all write in a similar way. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-02-28 20:41:43 -06:00

GiteaMirror closed this issue