1

我有一个“第一个”项目试图使用 react-scripts-ts 和 react-leaflet。

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

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

我得到的错误相当于

'Readonly<{}>' 类型上不存在属性 'lat'

关于将 lat 和 lng 分配到位置 (TS2339) 和类似地

类型 'any[]' 不可分配给类型 '[number, number] | 纬度 | LatLngLiteral | 不明确的'。

关于将位置分配给中心（TS2322）。

据我所知，这是/已连接到打字稿版本，但我相信我有一个足够新的版本，这不应该是这种情况。

包.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]，我应该给它一个不同的类型注释吗？

没有打字稿的概念证明可以在这里找到

4

3 回答 3

3

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

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 };
于 2017-10-09T07:46:07.957 回答
1

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

于 2019-11-06T08:43:06.320 回答
0

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

class LeafletMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lat: 51.505,
      lng: -.09,
      zoom: 13
    };
  }
  ...
}
于 2017-10-08T20:06:24.110 回答