函数属性与泛型的 TypeScript 组合

2023-12-12

此类型的要点是允许用户传入数据、颜色、hasColor or 数据、信息、hasInfo。不是任何其他组合。

type Props = {
  data: string;
} & (
  | {
      info?: string;
      hasInfo?: boolean;
      color?: never;
      hasColor?: never;
    }
  | {
      info?: never;
      hasInfo?: never;
      color?: string;
      hasColor?: boolean;
    }
);


function foo(props: Props) {
  console.log("bar");
}

foo({ data: "hello", info: "hello", hasInfo: true }); <----- TypeScript is happy
foo({ data: "hello", info: "hello", hasColor: true }); <----- TypeScript gives Error

有没有更干净的方法来使用泛型来实现这种行为?

我尝试了这个,但看起来我以某种方式搞乱了三元的逻辑:

type Info = { info: string; hasInfo: boolean };
type Color = { color: string; hasColor: boolean };
type Data = { data: string };

function foo<T>(
  props: keyof T extends keyof Info ? Data & Info : Data & Color
) {
  console.log("bar");
}

foo({ data: "hello", color: "hello", hasColor: true }); <----TypeScript gives Error

第一种方法可行,但看起来很难看。


根据您当前的定义,TypeScript 无法推断类型参数T,因此推断为unknown调用函数时。所以,keyof T只是never并且条件总是解析为 false 分支。

为了解决这个问题,我们可以将条件的结果与T.

function foo<T>(
  props: keyof Info extends keyof T 
    ? Data & Info & T 
    : Data & Color & T
) {
  console.log("bar");
}

另请注意,我们必须切换keyof T extends keyof Info to keyof Info extends keyof T. keyof T将是更大的联盟,因此无法扩展keyof Info.


操场

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

函数属性与泛型的 TypeScript 组合 的相关文章

  • 将本地图像路径作为两个功能组件之间的 prop 传递

    我正在使用 React Native 开发一个项目 在该项目中我很难理解 props 在功能组件之间的工作原理 我的要求是创建一个可重用的按钮组件 我可以在其中传递项目内资源文件中的图像位置 这样它就会为我创建按钮 由于某种原因 如果我手动
  • 如何在 TypeScript 中获取类方法的返回类型

    在较新的 TypeScript 版本中 我想是 2 8 以后 我可以轻松获取函数的返回类型 function f return hi type MyType ReturnType
  • 在react-router转换期间我应该如何更新redux存储?

    我面临着如何在发生反应路由器转换时更新存储的问题 在我当前的实现中 如下 在渲染下一页之前更新存储 当当前页面根据下一页的数据获取商店更新时 就会出现问题 1 当前页面毫无意义地呈现 它订阅了商店更新 因为更新的商店是针对下一页的 2 当前
  • 如何在 Typescript 中使用默认值定义可选构造函数参数

    是否可以有带有默认值的可选构造函数参数 如下所示 export class Test constructor private foo string foo private bar string bar 这给了我以下错误 参数不能有问号和初始
  • 使用字符串枚举来扩展 keyof

    我在理解使用字符串枚举来索引类型时的行为时遇到了一些困难 似乎有时 TS 会识别字符串枚举的值是keyof某些类型 有时则不然 为了显示 enum Key FOO foo type MyObj foo string 因此 类型属性的枚举 即
  • eslint/prettier 在 html 标签中添加不需要的空间

    我正在尝试向我的项目添加配置 以便代码自动格式化 我对 VS Code 中的用户设置进行了一些更新 还安装了 eslint 和 prettier 现在 每当我尝试保存我的代码时 都会从中得到改变 div div div div div di
  • 如何调用另一个组件中的方法并传递查询参数

    这是我的问题 我有一个下拉菜单 其中包含选项列表 选择一个选项后 将打开一个新选项卡 其中包含该特定选项的 Tableau 仪表板 由于我需要向后端发送查询字符串 Option ID 我该如何解决查询参数问题 这是我的下拉组件 import
  • 是否可以覆盖material-ui组件的默认道具?

    可以说我想要每一个Button组件来自material ui有默认的 propsvariant contained color secondary 这可能吗 这方面的文档在这里 https material ui com customiza
  • “未知”与“任何”

    TypeScript 3 0 引入unknown根据他们的 wiki 输入 未知现在是保留类型名称 因为它现在是内置类型 根据您对未知的预期用途 您可能需要删除 完全声明 有利于新引入的未知类型 或者 将其重命名为其他名称 有什么区别unk
  • Angular 没有 NameService 提供者

    我在将类加载到 Angular 组件中时遇到问题 我已经尝试解决这个问题很长时间了 我什至尝试过将所有内容合并到一个文件中 我所拥有的是 应用程序 ts
  • ionic2 对菜单项应用 ngx-translate

    我正在使用 ngx translate 来支持多语言 并且运行良好 但我也想申请菜单项 我该如何实现这一目标 我有 3 个菜单项 我想更改每个标题的语言 ts file appPages PageObj title Profile comp
  • 打字稿 - 找不到导出

    我在模块 A 中有这个 Typescript 文件 somefile tsx import remAuto from tidee life theme 在模块 B 中 我导出了 index js 文件remAuto index js imp
  • react-hook-form:检查未保存的更改

    我有一个由以下人员控制的预填写表格react hook form https react hook form com const control handleSubmit formState setValue reset useForm
  • React Typescript:从文件输入获取文件

    我得到的错误是Property files does not exist on type ChangeEvent
  • 如何避免 Angular 材料中出现额外的 mat-form-field-underline

    我在查找为什么在使用组件时会出现额外的 mat form field underline 时遇到问题 我的页面使用此标记
  • 打字稿标记的枚举获取值

    我在下面标记了枚举 enum PermissionEnum SU 1 lt lt 0 1 Administrator 1 lt lt 1 2 User 1 lt lt 2 4 对于给定值 6 我怎样才能得到 string gt 管理员 用户
  • Angular 中的文件输入事件类型

    所以我已经使用 Angular 和 Typescript 很长时间了 我似乎无法找出输入文件的类型是什么 例如
  • 错误找不到“pages”目录。请在项目根目录下创建一个”

    以前我的项目设置是 public next src pages components assets next config js 这工作正常 但我将结构更改为以下 public src client next config js jscon
  • React 不响应按键事件

    我正在尝试实现一些非常基本的按键检测 但我根本无法让它工作 我有一个裸露的组件 应该在onKeyDown事件 但控制台中没有任何内容被注销 class App extends React Component constructor prop
  • 使用 nginx 在云上部署 django 和 React

    我有一个 digitalocean 服务器 并且已经使用 Gunicorn 和 nginx 部署了 Django 后端服务器 如何在同一台服务器上部署 React 应用程序 您可以构建 React 应用程序并使用 Nginx 提供其静态文件

随机推荐

  • NSPercientContainer 仅在 10.0 或更高版本中可用:错误

    这是因为我的部署目标小于10 如何解决部署目标低于 10 0 的问题 解决方案之一是使用https github com inspace io INSPercientContainer 并添加 typealias NSPersistentC
  • 如何在没有 HttpContext.Current 的情况下通过 SessionID 获取会话数据

    我正在寻找一种方法读取和写入会话数据 but 没有HttpContext 当前的 为什么我会这么做 因为我希望在页面关闭并卸载后对用户会话进行一些操作 例如 用户加载并查看页面 然后我创建一个线程来执行一些操作并让用户离开 在这个线程中我喜
  • SqlCommand.Dispose 是否关闭连接?

    我可以有效地使用这种方法吗 using SqlCommand cmd new SqlCommand GetSomething new SqlConnection Config ConnectionString cmd Connection
  • 在 Oracle 整个架构的所有字段中搜索给定字符串

    我们如何在 Oracle 整个模式的所有字段中搜索给定字符串 Oracle中有执行上述操作的sql脚本吗 如果是 怎么办 我们可以通过其他脚本来完成吗 ALL TAB COLUMNS 是一个系统表 具有所有表列数据类型等 USER TAB
  • 已删除的 Firestore 文档仍在检索中

    我通过 Cloud Functions 中的触发器批量删除删除了一些文档 控制台显示它们已被删除 但是 我的应用程序仍然检索文档 这肯定是 firestore 的一个错误 而且是一个非常严重的错误 我发现另一个用户也有同样的问题here 我
  • 为什么1+++2=3?

    Python 如何计算表达式1 2 有多少曾经 我放在中间 它正在打印3作为答案 请任何人都可以解释这种行为 And for 1 2正在打印3并为1 2正在打印 1 你的表达方式是一样的 1 2 任何数字表达式前面都可以带有 使其变为负数
  • 如何使文本动态调整其大小以适应容器

    上图是没有使用FittedBox小部件 此处文本溢出 上图是使用FittedBox小部件 这里所有文本包含在一行中 Container width double infinity height 100 color Colors red ch
  • jQuery Mobile 页面更改后无法访问元素

    我在这里创建了一个简单的示例来说明我的问题 https github com kanesee jqm page state 基本上 我有 page1 html 其中有一个 id content 的 div 我将其颜色更改为红色 我有一个 p
  • Azure 客户端 ID、租户和 Key Vault URI 是否被视为机密?

    我正在加快使用 Azure 的速度 并尝试遵循最佳实践来保护我的 WPF 和 Xamarin Forms 应用程序 我使用 Azure AD 进行身份验证 使用 Key Vault 保存我的机密 我的客户端 ID 和租户设置怎么样 这些是与
  • Sweave/R/LaTeX 的初学者问题(图表、参考书目)——我的第一份文档

    我刚刚开始Sweave与R 我在这里使用R输出一些数据 我也试图包括一个情节 代码不会摇摆 我有一个Sweave来自网络的示例可以很好地编译RStudio with LaTeX documentclass a4paper article b
  • 如何使用 swfobject 通知 HTML 容器 SWF 已完成

    我正在将 flash 对象 swf 文件 嵌入到 HTML 页面中 该对象是用 as3 编写的 并使用 Flash Builder 构建 它的目的是显示一些动画 然后完成 能够通知容器动画已完成对我来说非常重要 但我找不到任何有效的方法 我
  • 如何将一对多从控制器传递到mvc4中的视图

    好的 这将是在你们帮助我进行更改之后 我假设我在某处遇到语法错误 View model OilNGasWeb ModelData Clients ViewBag Title Index h2 County s for h2 p Html A
  • 在设备上的线性内存中循环二维数组时将 float* 转换为 char*

    CUDA 4 0 编程指南第 21 页上有一个示例 如下所示 来说明循环 设备内存中二维浮点数组的元素 2D 的尺寸为宽 高 Host code int width 64 height 64 float devPtr size t pitc
  • Google Drive CSS/JS 返回 404 错误

    我在 Google Drive 上托管了我的 CSS JS 但它突然停止工作 在 Chrome Safari Mac iPhone 上测试过 检查后用Chrome 我看到 Google Drive 的链接返回 404 还有其他人有过吗 Go
  • 如何在加权networkx图中找到总和最高的路径?

    我有一个有向网络加权图 如何找到权重和最大的路径 您可以使用all simple paths并检查最大值 假设您有一个采用路径并给出权重总和的函数 heaviest path max path for path in nx all simp
  • Java 约定中的 Getters 和 Setters [重复]

    这个问题在这里已经有答案了 我的 Java 有点生疏 过去几年一直在做 C 我也希望这不会是一个非常主观的问题 不管怎样说我有课Person 是的 我知道有点陈词滥调 没有任何行为 C 版本 public class Person publ
  • 如何使用 pandas/sklearn 删除停止短语/停止 ngram(多单词字符串)?

    我想防止某些短语渗入我的模型 例如 我想阻止 红玫瑰 进入我的分析 我了解如何添加单独的停用词 如将单词添加到 scikit learn 的 CountVectorizer 的停止列表中通过这样做 from sklearn feature
  • Javascript - 日期范围验证

    我有一个表单用户可以输入任何日期 但我想设置一个日期范围验证 例如 从2012年12月1日到2013年1月1日 系统无法接受不在该范围内的用户的任何日期 我已经尝试过这个javascript代码 但它甚至没有给我任何警报当日期不在范围内时
  • 访问 C#.net 中的 webbrowser 控件中呈现的框架

    我需要获取 C net 中的 webbrowser 控件呈现的页面中的链接 问题是我认为该页面使用框架 这就是为什么我无法从网络浏览器获取任何链接 我如何访问或查看网络浏览器控件中的那些框架 你可以使用Frames财产 webBrowser
  • 函数属性与泛型的 TypeScript 组合

    此类型的要点是允许用户传入数据 颜色 hasColor or 数据 信息 hasInfo 不是任何其他组合 type Props data string info string hasInfo boolean color never has