时间戳

首页 > 解决方案 > 您如何从现有类型中引用类型？

typescript - 您如何从现有类型中引用类型？

问题描述

在 React-native 中是一个FlatList具有属性的组件，ListHeaderComponent如何在不复制和粘贴原始类型的情况下指定它使用的类型。

现在我有

export function AccountMediaGalleryComponent({
  style,
  ListHeaderComponent,
  ListHeaderComponentStyle,
}: {
  style: StyleProp<ViewStyle>;
  ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
  ListHeaderComponentStyle?: StyleProp<ViewStyle>;
}): JSX.Element {

我希望有类似的东西

ListHeaderComponent?: typeof FlatList.ListHeaderComponent

但这不编译

标签： typescript

解决方案

我不是 react-native 方面的专家，但我认为如果你有一个 type 的值ListComponent，那么它有一个名为的属性，props它本身有一个名为的属性ListHeaderComponent，而你正在寻找的正是这个属性类型。

如果是这样，您可以使用索引访问类型来获取您想要的类型。您可以将其视为将属性访问的括号符号“提升”到类型级别；如果一个值t具有类型T，而一个值k具有类型K，则该值t[k]具有类型T[K]。（您不能为此使用点表示法，主要是因为这种表示法会导致类型系统中的歧义；有关更多信息，请参阅microsoft/TypeScript#30815）。

所以，如果你有一个 type的值，用字面量typeFlatList的值索引到它，并用字面量type 的值索引到它，你会得到这个类型的值："props""ListHeaderComponent"

type ListHeaderComponent = FlatList["props"]["ListHeaderComponent"];

评估为我认为您正在寻找的内容：

/* type ListHeaderComponent = 
     React.ComponentType<any> | 
     React.ReactElement<any, string | React.JSXElementConstructor<any>> |
     null | undefined */

Playground 代码链接

推荐阅读