Specifying type in Typescript - reactjs

Question

I am using NextJs with Typescript.
Only when I add the "any" keyword, my code renders properly otherwise it gives me errors for my post._id, post.title and post.body.
Problem: What is the specific type for displayblog so that I do not set it to any? Also, how can I define my states and props for the code below?
function dateToString(date: Date): string {
return (
`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}` +
` ${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`
);
}
export default class LA extends React.Component {
state = {
title: "",
};
componentDidMount = () => {
this.Post();
};
getBlogPost = () => {
axios
.get("/api")
.then(({ data }) => {
const reverseData = new Array();
.catch(error => {
alert("Error: ERROR");
});
};
return posts.map((post, index) => (
<div key={index}>
<Card>
<Title>
{" "}
</Title>
{/* <p>{blog.date}</p>
<p>{blog.name}</p> */}
<FullName>{`${blog.name} | ${dateToString(
currentDateTime
)}`}</FullName>
<Line />
<Question>{blog.body}</Question>
</Card>
</div>
));
};
render() {
return (
<div>
<Container>
<Headers />
<div className="blog">{this.displayBlogPost(this.state.posts)}</div>
</Container>
</div>
);
}
}
This is the line on which I want to change any to a specific type.
displayBlogPost = (posts : Array < any >) => {

Answer 1

Assuming your posts array based on your code in question, create an interface called "Post".
Create separate interfaces for props and state and define as per your format. In this case posts is an array, so I am defining an interface in prior and use it in the state. Similarly if you have got any props, define a format for them too and use it. Also don't forget to use them along while extending the class.
interface Post {
name: string;
body: string;
title: string;
_id: number | string;
}
interface PostState {
posts: Post[];
}
//Define based on your need
interface PostProps {}
export default class PostList extends React.Component<PostProps, PostState> {
state = {
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: Post[]) => {
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>
);
}
}