TypeDoc 如何生成内部函数的文档

Question

我正在尝试为我的 TypeScript/React Native 项目生成文档。但据我所知，您需要向 TypeDoc 函数添加导出来生成文档。但是，我的大多数功能都在组件内部，因此不可能向它们添加导出。示例：

const TVShowDetailsScreen: React.FC<Props> = (props: any) => {
  const user: firebase.User = firebase.auth().currentUser;
  const watchlistRef = firebase.firestore().collection("Watchlist");
  const { email } = user;
  const [data, setData] = useState<TVShowDetails>();
  const { show } = props.route.params;

  useEffect(() => {
    init();
  }, []);

  
  const init = async () => {
    const { data } = await getTVShowDetails(show.id);
    setData(data);
  };

  if (!data) {
    return (
      <View
        style={{
          height: Dimensions.get("window").height,
          width: Dimensions.get("window").width,
          backgroundColor: "#18181b",
        }}
      ></View>
    );
  }
 
  const renderGenres = () => {
    return data.genres.map((o) => {
      return (
        <S.GenreText key={o.id} style={{ color: "white", top: 10 }}>
          {o.name}
        </S.GenreText>
      );
    });
  };

  async function handleAddToWatchList() {
    const watchListSnapshot = await watchlistRef
      .where("userId", "==", email)
      .get();
    const watchlistId = watchListSnapshot.docs[0].id;
    const documentRef = watchlistRef.doc(watchlistId);

    data.seasons.forEach(async (s) => {
      let season = {
        [s.season_number]: {},
      };
      let episodesList: {
        episodeNumber: number;
        episodeName: string;
        season: number;
      }[] = [];
      const { data: seasonData } = await getTVShowSeasonDetails(
        data.id,
        s.season_number
      );
      const { episodes } = seasonData;
      const seasonEpisodes = episodes.filter(
        (e) => e.season_number === s.season_number
      );

      seasonEpisodes.forEach((e) => {
        const episodeObject = {
          episodeNumber: e.episode_number,
          episodeName: e.name,
          season: e.season_number,
          imdb: e.vote_average,
          date: e.air_date,
          overview: e.overview,
          id: e.id,
          stillPath: e.still_path,
        };
        episodesList.push(episodeObject);
        season[s.season_number] = episodesList;
      });

      documentRef.set(
        {
          tvShows: {
            [data.name]: {
              title: data.name,
              overview: show.overview,
              backdrop: "http://image.tmdb.org/t/p/w500" + data.backdrop_path,
              id: data.id,
              seasons: season,
            },
          },
        },

        { merge: true }
      );
    });
    ToastAndroid.showWithGravity(
      "Added to Watchlist!",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  }

  const renderSeasonTabs = () => {
    return data.seasons.map((s) => {
      return (
        <Tab
          key={s.season_number}
          heading={
            <TabHeading style={{ backgroundColor: "#880421" }}>
              <Text>{s.season_number}</Text>
            </TabHeading>
          }
        >
          <TVShowSeasonTab seasonNumber={s.season_number} showId={data.id} />
        </Tab>
      );
    });
  };

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#18181b",
      }}
    >
      <StatusBar hidden translucent backgroundColor="transparent" />
      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          width: Dimensions.get("window").width,
        }}
      >
        <Image
          style={{ height: 281, width: 500 }}
          source={{
            uri: "http://image.tmdb.org/t/p/w500" + data.backdrop_path,
          }}
        />
        <S.AddToWatchListButton onPress={handleAddToWatchList}>
          <S.ButtonText>+</S.ButtonText>
        </S.AddToWatchListButton>
        <Text
          style={{
            color: "white",
            position: "absolute",
            top: 210,
            left: 10,
            fontSize: 30,
          }}
        >
          {data.name}
        </Text>
        {renderGenres()}
        <Text
          style={{
            fontSize: 20,
            top: 20,
            left: 20,
            color: "#b9042c",
          }}
        >
          Synposis
        </Text>
        <Text
          style={{
            margin: 20,
            color: "white",
          }}
        >
          {show.overview}
        </Text>
        <Text
          style={{
            fontSize: 20,

            left: 20,
            color: "#b9042c",
          }}
        >
          IMDB
        </Text>
        <Text
          style={{
            left: 20,
            color: "white",
          }}
        >
          {data.vote_average}
        </Text>
        <S.Header>Seasons</S.Header>
        <Tabs style={{ marginTop: 15 }}>{renderSeasonTabs()}</Tabs>
      </ScrollView>
    </View>
  );
};

export default TVShowDetailsScreen;

在这里我想为 renderGenres 函数、handleAddToWatchList 函数等生成文档。使用 TypeDoc 可以吗？或者有我可以使用的替代文档生成器吗？

Answer 1

这是一个代码示例。下面您将找到 VSCode 预览和 TSDoc Playground 预览的屏幕截图。希望有帮助。

/**
 * Used to renger genres.
 * 
 * @returns S.GenreText components based on data.genres array.
 */
const renderGenres = () => {
  return data.genres.map((o) => {
    return (
      <S.GenreText key={o.id} style={{ color: "white",top:10}}>
        {o.name}
      </S.GenreText>
    );
  });
};

Answer 2

您可以使用 typedoc-plugin-missing-exports 插件为您不导出的内容生成文档。

希望这有帮助。