created TypeScript typings

[tkryskiewicz]

Hi, while working on one of my projects I've added TypeScript typings for react-measure. Please check mostly if naming looks good.

From what I've tested, those work:

• Measure component,
• withContentRect() with class components (also with default props) and functional components.
• code from examples

What needs to be improved:

• typing for measure() in InjectedMeasureProps
• if possible, make React.Ref<any> more precise

// react-measure.d.ts

declare module "react-measure" {
  import * as React from "react";

  export interface SizeRect {
    readonly width: number;
    readonly height: number;
  }

  export interface SimplePositionRect {
    readonly top: number;
    readonly left: number;
  }

  export interface PositionRect {
    readonly top: number;
    readonly right: number;
    readonly bottom: number;
    readonly left: number;
  }

  export type ClientRect = SizeRect & SimplePositionRect;
  export type OffsetRect = SizeRect & SimplePositionRect;
  export type ScrollRect = SizeRect & SimplePositionRect;
  export type BoundsRect = SizeRect & PositionRect;
  export type MarginRect = PositionRect;

  export interface Measures {
    readonly client?: ClientRect;
    readonly offset?: OffsetRect;
    readonly scroll?: ScrollRect;
    readonly bounds?: BoundsRect;
    readonly margin?: MarginRect;
  }

  export interface ContentRect extends Measures {
    readonly entry: DOMRectReadOnly;
  }

  export interface InjectedMeasureProps {
    readonly measureRef: React.Ref<any>;
    readonly measure: () => void;
    readonly contentRect: ContentRect;
  }

  export interface MeasureProps extends Partial<Record<keyof Measures, boolean>> {
    readonly innerRef?: React.Ref<any>;
    readonly onResize?: (contentRect: ContentRect) => void;
    readonly children: (props: InjectedMeasureProps) => React.ReactNode;
  }

  class Measure extends React.Component<MeasureProps> { }

  export default Measure;

  type ExtractProps<C> = C extends React.ComponentType<infer P> ? P : never;

  type HocFunc = <C extends React.ComponentType<ExtractProps<C> & InjectedMeasureProps>, P = ExtractProps<C>>(
    component: C,
  ) => React.ComponentClass<Pick<JSX.LibraryManagedAttributes<C, P>, Exclude<keyof P, keyof InjectedMeasureProps>>>;

  export function withContentRect(
    types: keyof Measures | keyof Measures[],
  ): HocFunc;
}

[tho-graf]

Hi,

we use the types from definitly typed. We didn't run in any trouble with them. @types/react-measue

Have you seen these?
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-measure/index.d.ts

Cheers,
Thomas

[tkryskiewicz]

Hi @thomaskempel!

TBH I've assumed that a project of such size would have them included without really checking 🤦‍♂️

@types/react-measure probably won't work for components with default props (which I use a lot, but that's quite easily fixable). Will check if I can remove mine and patch those. Thanks!

Any plans on including TypeScript typings with react-measure?

[souporserious]

@tkryskiewicz thanks for filing an issue! Apologies for taking a little bit to get back to you. I'm not too familiar with TypeScript yet, would this just be an additional file to include in the build? Or is DefinitelyTyped more of the way to go?

[tkryskiewicz]

@souporserious
Hey! No problem.

It's an index.d.ts file with declarations, a small modification to package.json to include them when publishing and something to test the syntax (there are a few ways to do it, but boils down to something like ctimmerm/axios-mock-adapter@6523305 + ctimmerm/axios-mock-adapter@29e52f4#diff-b9cfc7f2cdf78a7f4b91a753d10865a2).

Generally it's better for packages to include TS typings. It's much easier to test and maintain them, no need to install a @types/* package, match versions, etc.

Will try to put something together this week.