reactjs - 使用 Typescript 创建 React 组件

Question

我最近在学习打字稿，我必须使用良好的做法将假反应组件转换为打字稿。

目前我有类似的东西

import axios from "axios";
import { useEffect, useState } from "react";



//var component = (props: any) => {
export default const component = (props: any) => {

  //var listeOuNon = 0;
  let listeOuNon = 0;
  //var listes = props.lists;
  const = props.lists;
  listeOuNon = props.isLists;
  //var montrecomposant = props.show;
  const montreComposant = props.show;

  if (listeOuNon) {
    //var [trad, ajoutTrad] = useState();
    const [trad, ajoutTrad] = useState();

    useEffect(() => {
      (async () => {
        axios.get("/api/trad").then((reponse) => {
          if (reponse.status == 200) {
            ajoutTrad(reponse.data);
          }
        });
      })();
    });
  }

  //if (montrecomposant) {
  if (montreComposant) {
    return (
      <div>
        {listeOuNon ? (
          <div>
            <div>le super titre {trad}</div>
            <div>
              <ul>
                {listes.map((elements: any) => (
                  <li>{elements.text}</li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          <div>
            <div>le super titre</div>
            <div>Bonjour tout le monde</div>
          </div>
        )}
      </div>
    );
  } else {
    return <></>;
  }
};

//export default component;

我知道我应该使用Typescript接口系统，但我真的不知道如何实现它。如果有打字稿专家，我会喜欢一些建议......

标签： reactjstypescriptreact-hooksreact-typescripttypescript1.8

Answer 1

您可以使用类型和/或接口：

import axios from "axios";
import { useEffect, useState } from "react";

interface List {
  // your fields here
}

type Props = {
  lists: List[];
  isLists: boolean;
  show: boolean;
}

export default const component = (props: Props) => {

  //var listeOuNon = 0;
  let listeOuNon = 0;
  //var listes = props.lists;
  const = props.lists;
  listeOuNon = props.isLists;
  //var montrecomposant = props.show;
  const montreComposant = props.show;

  if (listeOuNon) {
    //var [trad, ajoutTrad] = useState();
    const [trad, ajoutTrad] = useState();

    useEffect(() => {
      (async () => {
        axios.get("/api/trad").then((reponse) => {
          if (reponse.status == 200) {
            ajoutTrad(reponse.data);
          }
        });
      })();
    });
  }

  //if (montrecomposant) {
  if (montreComposant) {
    return (
      <div>
        {listeOuNon ? (
          <div>
            <div>le super titre {trad}</div>
            <div>
              <ul>
                {listes.map((elements: any) => (
                  <li>{elements.text}</li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          <div>
            <div>le super titre</div>
            <div>Bonjour tout le monde</div>
          </div>
        )}
      </div>
    );
  } else {
    return <></>;
  }
};