Question

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

教程：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)

Answer 1

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

 [
{
    "tag": "tag1",
    "count": {
        "low": 53,
        "high": 0
    },
    "details": [
               {
        "id": "5cca1dbc-dd5c-498f-8f83-735062c05240",
        "createdDate": "2017-10-08T22:40:33.020Z",
        "modifiedDate": "2017-10-08T22:40:33.020Z",
        "title": "Good morning! #tag1",
        "text": " ",
        "media": [
            {
                "id": "1f8c564c-91f1-457c-b4c1-0820c03861b4",
                        "metadata": {
                            "mimetype": "image/jpeg",
                            "imageHeight": 400,
                            "imageWidth": 300
                        }
            }
        ],
        "topics": [
            {
                "topicId": "22a96a83-def3-4981-bc91-9277464b7105"
            },
            {
                "name": "Fashion",
                "topicId": "6d4caea2-8387-42f3-977d-06a4bb063c44"
            }
        ],
        "language": null,
        "sourceId": "d25205ca-2ef308261113",
    }
 ]
}
]

将React-Apollo教程改编为Typescript时的Typescript错误

1 个答案: