Question

我对Typescript比较陌生。我正在与ReactJS和SpaceX API一起使用它。我已经准备好了接口，设置似乎很好，但是我一直收到此错误，而且似乎无法弄清楚原因。我给了task_name一个类型：ILaunches界面中的字符串，我在这里错过了什么？

在App组件中，我在渲染/返回中的“启动”下看到红线，并出现以下错误：

/Users/******/Documents/ts-spacex/src/App.tsx(11,10）中的
ERROR： TS2741：类型“ {}”中缺少属性“ mission_name”，但类型为“ Readonly”时必需。

这是我的App.tsx组件：

import spaceLogo from './images/spacex.png'
import Launches from './components/Launches'

class App extends React.Component {
  render() {
    return (
      <div className="App" >
        <img src={spaceLogo} />
        <Launches />
      </div>
    );
  }
}

export default App;

以下是“启动”组件：

import * as React from 'react'
import LaunchItems from './LaunchItems'

interface ILaunches {
  mission_name: string;
}

interface IState {
  pastLaunches: ILaunches[] | null;
}

class Launches extends React.Component<ILaunches, IState> {

  state = {
    pastLaunches: []
  }

  componentDidMount() {
    fetch('https://api.spacexdata.com/v3/launches/past')
      .then((response) => {
        return response.json()
      })
      .then((data) => {
        this.setState({ pastLaunches: data })
        console.log('fetch', data)
      })
  }

  render() {

    const launchCards = this.state.pastLaunches.map((launch: ILaunches) => {
      <LaunchItems title={launch.mission_name} />
    })

    return (
      <div>
        {launchCards}
      </div>
    )
  }
}

export default Launches

和LaunchItems组件：

import * as React from 'react';
import { Card } from 'react-bootstrap';

export default function LaunchItem(props: any) {
  return (
    <Card style={{ width: '18rem' }}>
      <Card.Body>
        <Card.Title>{props.title}</Card.Title>
        <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
        <Card.Text>
          Some quick example text to build on the card title and make up the bulk of
          the card's content.
    </Card.Text>
        <Card.Link href="#">Card Link</Card.Link>
      </Card.Body>
    </Card>
  )
}

为什么tslint会引发此TypeScript错误？

0 个答案: