在打字稿中指定类型

Question

我正在使用具有Typescript的NextJs。仅当我添加“ any”关键字时，我的代码才能正确呈现，否则它会给我post._id，post.title和post.body带来错误。 displayblog的具体类型是什么，以便我不将其设置为任何类型？另外，如何为下面的代码定义状态和道具？

function dateToString(date: Date): string {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        + ` ${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
}

export default class PostList extends React.Component  {
        state = {
            title: '',
            name: '',
            date: '',
            body: '',
            posts: []
        };

        componentDidMount = () => {
            this.getBlogPost();
        };

        getBlogPost = () => {

            axios
                .get('/api')
                .then(({data}) => {
                    const reverseData = new Array;
                    for (let datetime = data.length - 1; datetime >= 0; datetime--) {
                        reverseData.push(data[datetime]);
                    }
                    this.setState({posts: reverseData})
                })
                .catch((error) => {
                    alert('Error: there was an error processing your request')
                })
        }

        displayBlogPost = (posts : Array < any >) => {
            const currentDateTime = new Date();
            if (!posts.length) 
                return null;

            return posts.map((post, index) => (
                <div key={index}>
                    <Card>
                    <Title> <Link href={`/post?_id=${post._id}` } ><a>{post.title}</a></Link></Title>
                    {/* <p>{post.date}</p>
                    <p>{post.name}</p> */}
                    <FullName>{`${post.name} | ${dateToString(currentDateTime)}`}</FullName>
                    <Line />
                    <Question >{post.body}</Question>
                    </Card>
                </div>
            ));
        }
        render() {
            return (
                <div>
                    <Container>
                    <Headers/>
                    <div className="blog">
                        {this.displayBlogPost(this.state.posts)}
                    </div>                   
                    </Container>
                </div>

            );
        }
}

这是我要将其更改为特定类型的行。

displayBlogPost =（帖子：数组）=> {

Answer 1

假设您的帖子数组基于所讨论的代码，请创建一个名为“帖子”的界面

interface Post {
  name: string;
  body: string;
  title: string;
  _id: number | string;
}

像这样调用您的displayBlogPost（）：

displayBlogPost = (posts : Post) => {
   // your code
}