需要帮助从 react-leaflet 为打字稿定义正确的类型

Question

我有一个 'first' 项目试图使用 react-scripts-ts 和 react-leaflet。

我正在尝试创建以下 class，这看起来应该是直截了当的：

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>
    );
  }
}

我得到的错误总计

Property 'lat' does not exist on type 'Readonly<{}>'

将 lat 和 lng 分配给位置 (TS2339) 并且类似地

Type 'any[]' is not assignable to type '[number, number] | LatLng | LatLngLiteral | undefined'.

关于将位置分配给中心 (TS2322)。

据我所知，is/was 连接到打字稿版本，但我相信我有足够新的版本，但情况并非如此。

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"
  }
}

我从未尝试过将位置定义为 [Number, Number]，我应该给它一个不同的类型注释吗？

可以找到没有打字稿的概念证明 here

Answer 1

您应该始终在构造函数中使用 props 作为属性调用 super 方法。查看我对您的代码所做的更改。

class LeafletMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lat: 51.505,
      lng: -.09,
      zoom: 13
    };
  }
  ...
}

Answer 2

您没有指定您所在州的类型。试试这个：

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

即使在这之后，还有一个额外的并发症。方式由 TypeScript 推断的位置：

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

...是 number[]（任何数字数组），它与 [number, number]（恰好有两个数字的数组）类型不同。您可以通过提供以下类型来解决此问题：

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

或使用 Leaflet 接受的其他表格：

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

Answer 3

我将 @types/react-leaflet 添加到我的项目中以获得 LatLng 的类型定义，但 const position: [number, number] = [this.state.lat, this.state.lng]; 也足够了。

需要帮助从 react-leaflet 为打字稿定义正确的类型

Need help defining correct types from react-leaflet for typescript

javascript

typescript

reactjs

react-leaflet