reactjs - ¿Por qué el ejemplo básico de react-sortable-hoc falla al compilar con TypeScript?

Aquí está el ejemplo básico de la página web de react-sortable-hoc.

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

render(<SortableComponent/>, document.getElementById('root'));

Tuve que modificar el código anterior muy ligeramente para adaptarlo a la sintaxis de importación de TypeScript, y la captura de pantalla a continuación muestra los errores que no sé cómo arreglar:

Aquí está el código correspondiente a la captura de pantalla anterior:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

No sé cómo analizar el texto de error de estos errores. Dado que el proyecto tiene más de 5 mil estrellas en GitHub, supongo que tengo algún tipo de problema de configuración, pero no puedo parecer averiguar cuál es.

Estos son los dos errores restantes:

1.

[ts] Property 'items' does not exist on type 'IntrinsicAttributes &
  IntrinsicClassAttributes

2.

[ts] Property 'value' does not exist on type 'IntrinsicAttributes &
  IntrinsicClassAttributes

El texto del error me parece que no está captando correctamente la sintaxis de envoltura del componente, pero yo mismo no estoy familiarizado con esta sintaxis, así que no estoy seguro de si he diagnosticado el problema correctamente o de cómo solucionarlo.

Gracias por la ayuda.

Respuesta #1

El código en el ejemplo básico en la documentación es JavaScript.

Aquí está el ejemplo básico convertido a TypeScript:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { arrayMove, SortableContainer, SortableElement } from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}: {value: string}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}: {items: string[]}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component<{}, {items: string[]}> {
  constructor(props: {}) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
    }
  }
  public render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
  private onSortEnd = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

Respuesta #2

Deberías especificar tipos adicionales para el contenedor ordenable y el elemento ordenable, eso solucionará tu problema:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {SortableContainer, SortableElement, arrayMove, SortableContainerProps, SortableElementProps} from 'react-sortable-hoc';

const SortableItem: React.ComponentClass<SortableElementProps & { value: string }, any> = SortableElement(({ value }: { value: string }) =>
  <li>{value}</li>
);

const SortableList: React.ComponentClass<SortableContainerProps & { items: string[] }, any> = SortableContainer(({ items }: { items: string[] }) => {
  return (
    <ul>
      {items.map((value: any, index: number) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));