在 React TypeScript 中推断 2 个 props 之间的泛型类型

2024-01-12

我相信这是可能的,但我不太擅长 TS 中的高级输入(还),所以:

我想让 React 组件在一个 prop 中接受任何对象形状的数组,然后在不同的(事件函数)prop 中发出相同类型。

interface Props {
  data: AnyGenericRow[];
  onRow: (row: AnyGenericRow) => void;
}

我应该如何打字AnyGenericRow达到我想要的目的?我想我需要从中推断出类型data以某种方式然后将该推断的类型应用于onRow签名。

用法示例:

const rows: Array<{ foo: 'bar' }> = [];

/* ... */

<Component data={rows} onRow={row => { 
  /* can `row` be detected as a type of { foo: 'bar' } ? */ }
} />

也许这非常简单,但我发现确切地知道要搜索哪些术语来找到它有点棘手。

附加问题:推断的通用行可以扩展组件中的接口吗?也许所需要的只是& it...?


在这里你有:

import React from 'react'

interface Props<T> {
    data: T[];
    onRow: (row: T) => void;
}

const rows: Array<{ foo: 'bar' }> = [];

function Component<T>(props: Props<T>) {
    return null
}

<Component data={rows} onRow={row => {
    /* `row` can be detected as a type of { foo: 'bar' } ? */
}} />

请记住,您还可以设置通用参数Component明确地:

<Component<{ foo: 'bar' }> data={[]} onRow={row => {
    /* `row` can be detected as a type of { foo: 'bar' } ? */
}} />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 React TypeScript 中推断 2 个 props 之间的泛型类型 的相关文章

随机推荐

  • 在 MVC4 中显示错误,我必须实现一些接口,但我已经完成了

    我正在尝试创建自己的过滤器属性以支持多语言 这个想法很简单 URL 代表语言 http host ext en rest of the url 将以英语打开 并且 http host ext hy rest of the url 将以亚美尼
  • PhpStorm 中的差异

    如何将当前项目中的文档与不属于该项目的文档进行比较 如何使用 phpStorm 比较计算机上的两个任意文件 目前 我发现比较项目文件与非项目文件的最简单方法是将外部文件复制到剪贴板 然后单击 查看 gt 与剪贴板比较
  • PHP 将两个时间变量相加

    在我的 PHP 应用程序中 我想计算两个时间变量的总和 我正在寻找类似这个例子的东西 time1 15 20 00 time2 00 30 00 time time1 time2 如果你期望的答案是15 50 00你想使用strtotime
  • 执行 git reset --hard HEAD^ 后恢复添加/暂存的文件?

    我添加了一个新文件F1并对另一个文件 F2 进行了更改 但随后做了git reset hard HEAD 并且我丢失了对文件的所有更改 有没有some怎么样 我可以把它们找回来吗 我确实在这里看过一个相关问题 如何撤消 git reset
  • 更改函数中的每个 for 循环,以便在每次失败的迭代后自动执行错误处理

    这个问题源于捕获生成器内的错误并随后继续 https stackoverflow com questions 13645112 catch errors within generator and continue afterwards 我有
  • 使用 4 mb 查找不在 40 亿列表中的整数。但 4 MB 还不够[重复]

    这个问题在这里已经有答案了 给定一个包含 40 亿个整数的列表 找到一个不在列表中的整数 使用 4MB 内存 采访是用Java进行的 我的解决方案是使用 BitSet 然而根据我的计算 4 MB 内存中没有足够的位 c 4 MB 4096
  • 标题文本垂直居中

    我希望增加 jquery 移动应用程序标题的大小 当我这样做时 我需要将标题居中 我发现我可以添加一行 line height 30px 到CSS 但这还远远不够 我想一定有更好的方法来做到这一点
  • getSystemService(Context.NSD_SERVICE) 冻结 5.0 模拟器

    尝试执行以下行 NsdManager Mgr NsdManager Ctxt getSystemService Context NSD SERVICE 在 Android 5 0 模拟器 ARMv7a 在 Win64 上 中 模拟器会冻结
  • const_cast 的行为

    我正在阅读有关 C 中的 const cast 运算符的内容 1 我无法理解的第一件奇怪的事情是 const cast 运算符语法 即 const cast 表达式 gt 我对这种语法的理解是 它有助于摆脱常量性expressionof t
  • 这个shell测试达到什么目的

    我有一个非常简单的问题 我无法回答 在 shell 中 这个命令会做什么 test d VIRTUAL ENV virtualenv VIRTUAL ENV 它似乎测试 virtualenv 目录是否存在 但我不明白 if 会如何处理该信息
  • 快速或简洁地确定基于行的数据集合中每列的最长字符串

    从我上次查询的结果 https stackoverflow com questions 2760168 can i set auto width on an open xml sdk generated spreadsheet withou
  • 为什么实现 IObjectSafety 没有带来什么改变?

    我们有一个 activex 对象 它实现了 IObjectSafety 以表明它对于脚本编写是安全的 它从受信任的站点安装 但我们仍然收到 IE 投诉 称该页面上的控件对于脚本编写不安全 运行我们的 activex 的站点管理员不愿意启用未
  • HQL 查询 id 对/元组

    我正在尝试使用 HQL 查询两个域之间新创建的关系 所以我想做类似的事情 select x id y id from Author as x join x books as y where x id y id not in 1 2 3 4
  • 通过连接查询大型数据集(15+ 百万行)

    我正在尝试连接两个表 products and products markets While products记录不足一百万条 product markets接近2000万条记录 数据已更改 因此架构创建表中可能存在一两个拼写错误 CREA
  • Javascript 日期时间字符串到 Date 对象

    我正在调试一个小型应用程序 其某些功能只能在 Chrome 中运行 问题在于日期选择器 您在其中选择日期和时间 然后日期选择器将其连接到日期时间字符串中 无论如何 字符串看起来像这样 2012 10 20 00 00 然而 现在使用它的 j
  • 为 property = "type.id" 选择什么 @JsonTypeInfo.ID 进行反序列化,JsonTypeInfo.Id.CUSTOM?

    所以我的 JSON 看起来像这样 ActivityDisplayModel name lunch with friends startTime 12 00 00 type id MEAL description Meal complete
  • 将标志传递给 Matlab 函数的最简洁方法是什么?

    我正在设计一个函数 它以一个结构和任意数量的标志作为参数 该函数将包含几个if检查是否设置了特定标志 实现这一目标的最巧妙方法是什么 我正在考虑将标志作为单独的字符串参数传递 有更简洁的解决方案吗 我会像使用那样做varargin and
  • Spring Batch ChunkRequest 抛出 stackOverflow

    我正在挣扎Spring Batch 远程分块使用较新版本的 Spring boot 首先 我尝试将 ChunkRequest 作为事件发送 这是不可能的 因为它没有公共默认构造函数 作为解决方案 我必须创建自定义序列化器和反序列化器 并在
  • Silverlight 4 中的 System.Data.DataTable?

    有谁知道如果系统 数据 数据表Silverlight 4 beta 现在支持吗 过去 我在 ASP NET 和 WinForm 项目中使用它进行数据绑定 其中 UI 和对象需要在运行时构建 如果没有 是否在路线图中 不 这不在 SL4 中
  • 在 React TypeScript 中推断 2 个 props 之间的泛型类型

    我相信这是可能的 但我不太擅长 TS 中的高级输入 还 所以 我想让 React 组件在一个 prop 中接受任何对象形状的数组 然后在不同的 事件函数 prop 中发出相同类型 interface Props data AnyGeneri