在 Typescript 中指定类型

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 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>
    );
  }
}

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

displayBlogPost = (posts : Array < any >) => {

Answer 1

假设您的 posts 数组基于您的相关代码，创建一个名为 "Post".

的接口

为道具和状态创建单独的界面，并根据您的格式进行定义。在这种情况下 posts 是一个数组，所以我在之前定义了一个接口并在状态中使用它。同样，如果您有任何道具，也为它们定义一种格式并使用它。也不要忘记在扩展 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>
    );
  }
}

在 Typescript 中指定类型

Specifying type in Typescript

types

typescript

reactjs

next.js