Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Erroned "index.d.ts"

See original GitHub issue

Hi there,

This is just a dev experience issue about the index.d.ts that you provide.
This file contains many “mistakes” that will make the TypeScript compiler go crazy:

index.d.ts(40,13): error TS2300: Duplicate identifier 'HandleComponent'.
index.d.ts(41,9): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(42,11): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(43,12): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(44,10): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(45,14): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(46,17): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(47,16): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(48,13): error TS2304: Cannot find name 'ReactElement'.
index.d.ts(54,14): error TS2304: Cannot find name 'ResizeDirection'.
index.d.ts(61,8): error TS2304: Cannot find name 'ResizeDirection'.
index.d.ts(67,3): error TS2300: Duplicate identifier 'onResizeStart'.
index.d.ts(68,3): error TS2300: Duplicate identifier 'onResize'.
index.d.ts(69,3): error TS2300: Duplicate identifier 'onResizeStop'.
index.d.ts(102,3): error TS2300: Duplicate identifier 'defaultSize'.
index.d.ts(125,3): error TS2300: Duplicate identifier 'defaultSize'.
index.d.ts(130,3): error TS2300: Duplicate identifier 'onResizeStart'.
index.d.ts(131,3): error TS2300: Duplicate identifier 'onResize'.
index.d.ts(132,3): error TS2300: Duplicate identifier 'onResizeStop'.
index.d.ts(137,13): error TS2300: Duplicate identifier 'HandleComponent'.
index.d.ts(138,15): error TS2694: Namespace 'React' has no exported member 'ElementType'.
index.d.ts(139,17): error TS2694: Namespace 'React' has no exported member 'ElementType'.
index.d.ts(140,18): error TS2694: Namespace 'React' has no exported member 'ElementType'.
index.d.ts(141,16): error TS2694: Namespace 'React' has no exported member 'ElementType'.
index.d.ts(142,20): error TS2694: Namespace 'React' has no exported member 'ElementType'.
index.d.ts(143,23): error TS2694: Namespace 'React' has no exported member 'ElementType'.
index.d.ts(144,22): error TS2694: Namespace 'React' has no exported member 'ElementType'.
index.d.ts(145,19): error TS2694: Namespace 'React' has no exported member 'ElementType'.

I don’t know if you automatically generate this index.d.ts file from your Flow files or if you wrote it manully, but just in case, this is a correct version of the file:

// Type definitions for re-resizable 4.4
// Project: https://github.com/bokuweb/re-resizable
// Definitions by: Kalle Ott <https://github.com/kaoDev>
// Definitions: https://github.com/kaoDev/re-resizable
// TypeScript Version: 2.2

import * as React from 'react';

export type ResizableDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';

export interface ResizableState {
  width: number | string;
  height: number | string;
  direction?: ResizableDirection;
  original?: {
    x: number,
    y: number,
    width: number,
    height: number,
  },
  isResizing?: boolean;
  resizeCursor: string,
}

export type NumberSize = {
  width: number;
  height: number;
}

export type Size = {
  width: string | number,
  height: string | number,
};

export type CSSSize = {
  width: string;
  height: string;
}

export type ResizeCallback = (
  event: MouseEvent | TouchEvent,
  direction: ResizableDirection,
  elementRef: HTMLElement,
  delta: NumberSize,
) => void;

export type ResizeStartCallback = (
  e: React.MouseEvent<any> | React.TouchEvent<any>,
  dir: ResizableDirection,
  elementRef: HTMLElement,
  delta: NumberSize,
) => void;

export interface ResizableProps {
  onResizeStart?: ResizeStartCallback,
  onResize?: ResizeCallback,
  onResizeStop?: ResizeCallback,  
  style?: React.CSSProperties;
  handleStyles?: {
    top?: React.CSSProperties,
    right?: React.CSSProperties,
    bottom?: React.CSSProperties,
    left?: React.CSSProperties,
    topRight?: React.CSSProperties,
    bottomRight?: React.CSSProperties,
    bottomLeft?: React.CSSProperties,
    topLeft?: React.CSSProperties,
  },
  handleClasses?: {
    top?: string,
    right?: string,
    bottom?: string,
    left?: string,
    topRight?: string,
    bottomRight?: string,
    bottomLeft?: string,
    topLeft?: string,
  },
  enable?: {
    top?: boolean,
    right?: boolean,
    bottom?: boolean,
    left?: boolean,
    topRight?: boolean,
    bottomRight?: boolean,
    bottomLeft?: boolean,
    topLeft?: boolean,
  },
  className?: string,
  defaultSize?: {
    width: string | number,
    height: string | number,
  },
  size?: {
    width: string | number,
    height: string | number,
  },  
  minWidth?: number | string,
  minHeight?: number | string,
  maxWidth?: number | string,
  maxHeight?: number | string,
  grid?: number[],
  bounds?: 'parent' | 'window' | HTMLElement,
  lockAspectRatio?: boolean,
  lockAspectRatioExtraWidth?: number,
  lockAspectRatioExtraHeight?: number,
  handleWrapperStyle?: {
    width: string | number,
    height: string | number,
  },
  handleWrapperClass?: string,
  handleComponent?: HandleComponent
}

export type HandleComponent = {
  top?: React.ReactElement<any>,
  right?: React.ReactElement<any>,
  bottom?: React.ReactElement<any>,
  left?: React.ReactElement<any>,
  topRight?: React.ReactElement<any>,
  bottomRight?: React.ReactElement<any>,
  bottomLeft?: React.ReactElement<any>,
  topLeft?: React.ReactElement<any>,
};

export default class Resizable extends React.Component<ResizableProps, ResizableState> {

  resizable: HTMLElement;

  size: {
    width: number,
    height: number,
  };

  updateSize({ width, height }: Size): void;
}