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

Posted 2023-03-13

【中文标题】如何为 React Native 嵌套组件创建 Typescript 定义

【英文标题】：How to create Typescript Definition for React Native Nested Components

【发布时间】：2017-08-14 04:37:48

【问题描述】：

我正在尝试为 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);
    

谢谢:-)

【问题讨论】：

react-native 的输入是从哪里得到的？

嗨@caesay 我使用的是Typescript 2.2.1，我使用以下命令从[@]Types 安装了react-native 定义：npm install --save [@]types/react-native (注意 [@] 周围的括号是我可以在 *** 上发表评论）

【参考方案1】：

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

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

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

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

【讨论】：

感谢@caesay 成功了！我在我的项目中使用您的代码创建了一个名为 react-native.d.ts 的新定义文件，并在开头添加了以下几行： import * as ReactNative from 'react-native';导出默认 ReactNative;