如何为 React Native 嵌套组件创建 Typescript 定义

Question

我正在尝试为 React Native 组件“react-native-tabs”创建 Typescript 定义，但在 Text 元素上出现以下错误：

“IntrinsicAttributes & IntrinsicClassAttributes”类型上不存在属性“名称”

有谁知道如何修改我的 ts 定义，以便我可以告诉编译器“name”是 Tabs 的子项时 Text 的字符串属性？

我的 JSX 看起来像：

<Tabs selected={this.state.page} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
                <Text name="first">First</Text>
                <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
                <Text name="third">Third</Text>
                <Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
                <Text name="fifth">Fifth</Text>
</Tabs>

我的 Typescript 定义如下：

declare module "react-native-tabs" {
    import React, { Component } from "react";

    interface TabProps {
        style?: React.ViewStyle;
        selectedStyle?: {};
        onSelect?: (el:any) => void;
        selected?: string
    }


    export default class Tabs extends Component<TabProps, any> {
        constructor(props: TabProps);
    }

}

谢谢:-)

Answer 1

您可以通过重新声明 typescript 模块来扩展它们 - 例如，您可以重新声明 react-native 以将项目添加到 react native 命名空间。您还可以通过以相同方式重新声明它们来扩展类型/接口。一种可能性可能是简单地将以下内容添加到您已定义选项卡键入的同一文件中：

declare module "react-native" {
    export interface TextProperties {
        name?: string;
    }
}

通过查看typings located here 的源代码，看起来这是正确的位置 - 请注意，这将影响全局的文本组件，而不仅仅是嵌套的组件。

另请注意，react-native 本身就是这样扩展 react 命名空间的，您可以在我在上一段中链接的文件顶部看到描述这一点的 cmets。