将 React-Apollo 教程改编为 Typescript 时出现 Typescript 错误答案

【问题标题】：Typescript Error while adapting React-Apollo Tutorial to Typescript将 React-Apollo 教程改编为 Typescript 时出现 Typescript 错误
【发布时间】：2018-09-19 16:55:48
【问题描述】：

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

教程：https://www.howtographql.com/react-apollo/1-getting-started/
代码：https://github.com/howtographql/react-apollo

我真的不知道我错过了什么，因为直到现在我还没有深入了解打字稿。

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

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<{}>'.

有人可以帮我吗？

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)

【问题讨论】：

标签： reactjs typescript graphql apollo react-apollo

【解决方案1】：

你还没有为你的道具创建类型。打字稿编译器抛出错误，因为它认为您定义的方法不存在。这是一个类型化反应组件的示例

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

【讨论】：