は、私が反応し-スクリプト-TSを使用して反応させ、リーフレットしようとして「最初の」のプロジェクトを持っているtypescriptです

Question

反応-リーフレットから正しいタイプを定義する手助けが必要です。

は、私は、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> 
    ); 
    } 
} 

エラー私は金額を取得していますが

プロパティのタイプに「LAT」は存在しません'読み取り専用< {}>' LATとLNGの割り当てに

位置（TS2339）に、同様

タイプ 'は任意の[]'「型に代入ない[番号、番号] | LatLng | LatLngLiteral |未定義'。中心（TS2322）に位置を割り当てるに

。

私はこれを言うことができるものから/ typescriptですバージョンに接続されているが、私はこのケースではありません新しい十分なバージョンを持っていると信じていましたさ。

package.json：私は[Number, Number]としての地位を定義しようとした、私はそれを別の型注釈を与えるべきであるNAVE

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

？ typescriptですなしの概念の

証明はあなたが常に属性としての小道具を使用して、コンストラクタでsuperメソッドを呼び出す必要があり

Answer 1

あなたの状態の種類は指定していません。試してみてください：

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

この後も、さらに複雑な問題があります。位置のために活字体で推論タイプ ：

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

は... [number, number]異なるタイプ（正確に二つの数字の配列）であるnumber[]（数字の任意の配列）です。あなたはタイプを与えることによってこの問題を解決することができます

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

またはリーフレットに受け入れられ、他のフォーム使用：ノートの

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

Answer 2

hereを見つけることができます。 コードの変更を確認してください。

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