Create a guideline for typings

As we are moving towards full typescript, would be good to set some guidelines of “best” practices, or at least what we think that is good/readable. This will help during the conversion of all the components to TS and also when new components are created.

I’m leaving as an inspiration, the bare-bone that webpack had created when they started to add types to their codebase, it think that it is such a good start.

https://github.com/webpack/webpack/issues/7122

What are your thoughts about it? Let’s discuss!!

---

Guidelines so far:

When you have scenarios like:

const C = Card as typeof Card & CardComponents;

C.Fit = CardFit;

export * from "./Card";

export default C;

It is prefered to use the following:

export * from "./Card";
export * from "./CardFit";

export default Object.assign(Card, {
  Fit: CardFit
});

• Always export prop types:

  export interface DividerProps {
    vertical?: boolean;
  }
  

• Always export default and * from component files (that will export types):

  import Divider from "./Divider";
  export * from "./Divider";
  export default Divider;
  

• If it’s a component that renders another component (wrapper), we must extend props interface:

  import Box, { BoxProps } from "../Box";
  
  export interface DividerProps extends BoxProps {
    vertical?: boolean;
  }
  
  const DividerComponent = (props: DividerProps) => <Box {...props} />;
  

When you have: const component = (props: CodeProps) => ....

Turn into: const CodeComponent = (props: CodeProps) => ...

[renatorib]

What about? https://github.com/reakit/reakit/pull/252

[diegohaz]

• Always export prop types:

  export interface DividerProps {
    vertical?: boolean;
  }
  

• Always export default and * from component files (that will export types):

  import Divider from "./Divider";
  export * from "./Divider";
  export default Divider;
  

• ~If it’s a component that renders another component (wrapper), we must extend props interface~ Always extend prop types from the component being used:

  import Box, { BoxProps } from "../Box";
  
  export interface DividerProps extends BoxProps {
    vertical?: boolean;
  }
  
  const DividerComponent = (props: DividerProps) => <Box {...props} />;