Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Unify types definitions #517

Open
13 of 15 tasks
michaldudak opened this issue Aug 2, 2024 · 0 comments
Open
13 of 15 tasks

[core] Unify types definitions #517

michaldudak opened this issue Aug 2, 2024 · 0 comments
Labels
core Infrastructure work going on behind the scenes typescript

Comments

@michaldudak
Copy link
Member

michaldudak commented Aug 2, 2024

The Menu PR tries a different approach to defining types, utilizing namespaces. The type definitions are also placed in the same file that has the implementation.

  • Not having to jump between files when changing/adding props is nice.
  • Having separate .types.ts files result in empty .types.js after transpilation. Placing everything in one file prevents this issue.
  • Using namespaces frees us from renaming identifiers when exporting from barrel files and makes it easier to control what is public and what is private (as we do it when defining a type, not in the index file)
  • The usage of types in namespaces is a bit weird and not very JS-like (props: Menu.Root.Props). On the other hand, it works pretty well with VSCode suggestions (you type "Menu.Root." and see everything related to the root, which is exactly what you need)
  • ESLint doesn't understand declaration merging well, and I had to disable a rule to make all this work.

We agreed to extend this pattern to the whole codebase.

To summarize, the following changes are needed:

  • Move types from X.types.ts to X.ts(x) (for example SwitchRoot.types.ts -> SwitchRoot.tsx) and remove the .types.ts files. The types should be defined after the implementation (but before proptypes), as it's usually more convenient to have the implementation visible when you open the file.
  • Create a namespace with the same name as the exported component/hook and place the types inside it, renaming them appropriately:
    export function useFoo(params: useFoo.Parameters): useFoo.ReturnValue {
      // ...
    }
    
    export namespace useFoo {
      export interface Parameters { /* ... */ }
      export interface ReturnValue { /* ... */ }
    }
  • Rename the type of any contexts to be the same as the context itself:
    interface FooContext { /* ... */ }
    
    const FooContext = React.createContext<FooContext>();

TODO

Search keywords:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes typescript
Projects
Status: Selected
Development

No branches or pull requests

1 participant