javascript - Necesito ayuda para definir los tipos correctos de react-leaflet para typescript

Tengo un 'primer' proyecto intentando usar react-scripts-ts y react-leaflet.

Estoy tratando de crear la siguiente clase que parece que debería ser sencillo:

import {map, TileLayer, Popup, Marker } from 'react-leaflet';
class LeafletMap extends React.Component {
  constructor () {
    super();
    this.state = {
      lat: 51.505,
      lng: -.09,
      zoom: 13
    };
  }

render() {
    const position = [ this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

El error que estoy obteniendo equivale a

La propiedad 'lat' no existe en el tipo 'Readonly<{}>'

sobre la asignación de lat y lng a la posición (TS2339) y de manera similar

El tipo 'any[]' no se puede asignar al tipo '[number, number] | LatLng | LatLngLiteral | undefined'.

Al asignar la posición al centro (TS2322).

Por lo que puedo decir, esto está/estaba conectado a la versión de TypeScript, pero creo que tengo una versión lo suficientemente nueva, por lo que esto no debería ser el caso.

package.json:

{
  "name": "map-experiment",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/geojson": "^1.0.4",
    "@types/leaflet": "^1.2.0",
    "@types/react-leaflet": "^1.1.4",
    "leaflet": "^1.2.0",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-leaflet": "^1.7.0",
    "react-scripts-ts": "2.7.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^21.1.2",
    "@types/node": "^8.0.33",
    "@types/react": "^16.0.10",
    "@types/react-dom": "^16.0.1"
  }
}

Nunca he intentado definir la posición como [Number, Number], ¿debería darle una anotación de tipo diferente?

La prueba de concepto sin TypeScript se puede encontrar aquí

Respuesta #1

No estás especificando el tipo de tu estado. Intenta esto:

class LeafletMap extends React.Component<{}, {lat: number, lng: number, zoom: number}> {

Incluso después de esto, hay una complicación adicional. El tipo inferido por TypeScript para la posición:

const position = [ this.state.lat, this.state.lng ];

...es number[] (cualquier arreglo de números), que es un tipo diferente a [number, number] (un arreglo con exactamente dos números). Puedes resolver esto dando el tipo:

const position: [number, number] = [ this.state.lat, this.state.lng ];

O usando la otra forma aceptada por Leaflet:

const position = {lat: this.state.lat, lng: this.state.lng };

Respuesta #2

Agregué @types/react-leaflet a mi proyecto para obtener definiciones de tipos para LatLng, pero const position: [number, number]=[this.state.lat, this.state.lng]; también fue suficiente.