Question

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

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

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

我得到的错误等于

属性'lat'在'Readonly＆lt; {}＆gt;'
类型中不存在

将lat和lng分配给位置（TS2339）和类似地

类型'any []'不能分配给'[number，number] |类型LatLng | LatLngLiteral |未定义”。

将位置分配到中心（TS2322）。

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

的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为typescript定义正确的类型

3 个答案: