Reactjs 将React Apollo教程调整为Typescript时出现Typescript错误

我正在尝试将react apollo hackernews教程改编为typescript

• 教程：
• 代码：

我真的不知道我遗漏了什么，因为直到现在我还没有深入到打字稿中

尝试自适应时，我收到以下代码的错误消息：

src/components/CreateLink.tsx|40 col 22 error 2339| Property 'postMutation' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.
src/components/CreateLink.tsx|45 col 16 error 7006| Parameter 'store' implicitly has an 'any' type.
src/components/CreateLink.tsx|45 col 33 error 7031| Binding element 'post' implicitly has an 'any' type.
src/components/CreateLink.tsx|62 col 16 error 2339| Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

src/components/CreateLink.tsx | 40 col 22错误2339 |类型“Readonly&Readonly”上不存在属性“postMutation”。
src/components/CreateLink.tsx | 45 col 16 error 7006 |参数“store”隐式具有“any”类型。
src/components/CreateLink.tsx | 45 col 33 error 7031 |绑定元素“post”隐式具有“any”类型。
src/components/CreateLink.tsx | 62 col 16错误2339 |类型“Readonly&Readonly”上不存在属性“history”。

有人能帮我吗

import * as React from 'react' 
import { Component } from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
import { FEED_QUERY } from './LinkList'
import { LINKS_PER_PAGE } from '../constants'

class CreateLink extends Component {
  state = {
    description: '',
    url: '',
  }

  render() {
    return (
      <div>
        <div className="flex flex-column mt3">
          <input
            className="mb2"
            value={this.state.description}
            onChange={e => this.setState({ description: e.target.value })}
            type="text"
            placeholder="A description for the link"
          />
          <input
            className="mb2"
            value={this.state.url}
            onChange={e => this.setState({ url: e.target.value })}
            type="text"
            placeholder="The URL for the link"
          />
        </div>
        <button onClick={() => this._createLink()}>Submit</button>
      </div>
    )
  }

  _createLink = async () => {
    const { description, url } = this.state
    await this.props.postMutation({
      variables: {
        description,
        url,
      },
      update: (store, { data: { post } }) => {
        const first = LINKS_PER_PAGE
        const skip = 0
        const orderBy = 'createdAt_DESC'
        const data = store.readQuery({
          query: FEED_QUERY,
          variables: { first, skip, orderBy },
        })
        data.feed.links.splice(0, 0, post)
        data.feed.links.pop()
        store.writeQuery({
          query: FEED_QUERY,
          data,
          variables: { first, skip, orderBy },
        })
      },
    })
    this.props.history.push(`/new/1`)
  }

}

// 1
const POST_MUTATION = gql`
  # 2
  mutation PostMutation($description: String!, $url: String!) {
    post(description: $description, url: $url) {
      id
      createdAt
      url
      description
    }
  }
`

// 3
export default graphql(POST_MUTATION, { name: 'postMutation' })(CreateLink)

import*作为来自“React”的React
从“react”导入{Component}
从'react apollo'导入{graphql}
从“graphql标记”导入gql
从“/LinkList”导入{FEED_QUERY}
从“../constants”导入{LINKS\u PER\u PAGE}
类CreateLink扩展组件{
状态={
说明：“”，
url:“”，
}
render（）{
返回(
this.setState（{description:e.target.value}）}
type=“text”
占位符=“链接的说明”
/>
this.setState（{url:e.target.value}）
type=“text”
占位符=“链接的URL”
/>
这是。_createLink（）}>提交
)
}
_createLink=async（）=>{
const{description，url}=this.state
等待这个。道具。后置换({
变量：{
描述
网址，
},
更新：（存储，{data:{post}}）=>{
const first=每页链接数
常数跳过=0
const orderBy='createdAt_DESC'
const data=store.readQuery({
查询：FEED_查询，
变量：{first，skip，orderBy}，
})
数据。馈送。链接。拼接（0，0，post）
data.feed.links.pop（）
store.writeQuery({
查询：FEED_查询，
数据，
变量：{first，skip，orderBy}，
})
},
})
this.props.history.push（`/new/1`）
}
}
// 1
常量后突变=gql`
# 2
突变后突变（$description:String！，$url:String！）{
帖子（描述：$description，url:$url）{
身份证件
创建数据
网址
描述
}
}
`
// 3
导出默认图形ql（POST_突变，{name:'postMutation'}）（CreateLink）

您尚未为道具创建类型。typescript编译器抛出错误，因为它认为您定义的方法不存在。下面是一个类型化react组件的示例

type AppProps = { // like this
  message: string,
}
type AppState = { // and this
  count: number,
}
class App extends React.Component<AppProps, AppState> {
  state = {
    count: 0
  }
  render() {
    return (
      <div>{this.props.message} {this.state.count}</div>
    );
  }
}

键入AppProps={//，如下所示
消息：string，
}
输入AppState={//，然后
计数：数字，
}
类应用程序扩展了React.Component{
状态={
计数：0
}
render（）{
返回(
{this.props.message}{this.state.count}
);
}
}