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

Posted 2023-03-08

【中文标题】将 React-Apollo 教程改编为 Typescript 时出现 Typescript 错误

【英文标题】：Typescript Error while adapting React-Apollo Tutorial to 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)

【参考方案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>
    );