文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

如何利用 TypeScript 的 Exclude 提升状态管理与代码健壮性

什么是 Exclude 工具类型 在 TypeScript 中，Extract 工具类型是我们精确选择联合类型中特定类型的利器，而 Exclude 则像一个筛子，过滤掉不需要的类型，只保留我们所需的部分...现在只包括 'onClick' | 'onHover' | 'onKeyPress' 这样一来，ComponentEventHandlers 只包含 'onClick'、'onHover' 和 '...由于我们使用了 Exclude 工具类型，handler 参数只允许 'onClick'、'onHover' 和 'onKeyPress' 三种事件处理函数，任何其他值都会导致 TypeScript 报错...Exclude 的高级应用：在 Zustand 中排除类型的使用 我们将探讨一个更高级的用例，展示如何在 React 应用中使用 Zustand 进行状态管理和动作分发时应用 Exclude。...假设我们在一个 React 应用中使用 Zustand 管理用户相关的动作。在某些组件中，我们需要排除像 FetchUser 这样的特定动作，不让其被分发。

47110
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Ant Design 4.0 发布，来看看如何升级？

    DatePicker 重写 提供 picker 属性用于选择器切换。 范围选择现在可以单独选择开始和结束时间。 onPanelChange 在面板值变化时也会触发。...对于无法自动修改的部分，codemod 会在命令行进行提示，建议按提示手动修改。修改后可以反复运行上述命令进行检查。 ? 注意 codemod 不能涵盖所有场景，建议还是要按不兼容的变化逐条排查。...迁移工具修改详情 @ant-design/codemod-v4 会帮你迁移到 antd v4, 废弃的组件则通过 @ant-design/compatible 保持运行, 一般来说你无需手动迁移。...用新的 @ant-design/icons 替换字符串类型的 icon 属性值 import { Avatar, Button, Result } from 'antd'; + import { QuestionOutlined...更多内容请查看官方文档：https://ant.design/docs/react/migration-v4-cn

    6.6K10

    Ant Design X专为 AI 应用设计的 UI 框架，正式发布！

    是一套AI界面解决方案Ant Design XAnt Design X of React@ant-design/x 是遵循 Ant Design 设计体系的一个 React UI 库，用于构建由 AI...在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 对话应用：通用: Bubble - 消息气泡、Conversations - 会话管理唤醒: Welcome - 欢迎、Prompts - 提示集表达...Design X通过提供 useXAgent 运行时工具，帮助你开箱即用的对接符合 OpenAI 标准的模型推理服务。...Design X 作为一款专注于 AI 应用的 UI 框架，为开发者提供了完善的组件库和工具支持，简化了界面开发的流程。...从设计到集成，从交互到定制，Ant Design X 提供了多种解决方案，适合不同规模和复杂度的项目需求。如果你正在从事 AI 应用开发，Ant Design X 是一个值得尝试的选择。

    2.9K20

    package.json 知多少？

    ": ">=16.0.0", "react-dom": ">=16.0.0" } 当你正在开发一个系统，使用了 ant-design ，所以也肯定需要依赖 React。...同时， ant-design 也是需要依赖 React 的，它要保持稳定运行所需要的 React 版本是16.0.0，而你开发时依赖的 React 版本是 15.x： 这时，ant-design 要使用...软件协议可分为开源和商业两类，对于商业协议，或者叫法律声明、许可协议，每个软件会有自己的一套行文，由软件作者或专门律师撰写，对于大多数人来说不必自己花时间和精力去写繁长的许可协议，选择一份广为流传的开源协议就是个不错的选择...命令行工具入口 当你的模块是一个命令行工具时，你需要为命令行工具指定一个入口，即指定你的命令名称和本地可指定文件的对应关系。...{ "config" : { "port" : "8080" } } 发布配置 preferGlobal 如果你的 node.js 模块主要用于安装到全局的命令行工具，那么该值设置为 true ，

    2.2K10

    掌握使用 React 和 Ant Design 的个人博客艺术之美

    在这个互联网浪潮中，选择使用 React 的 Ant Design库，为你的个人博客赋予了更为华丽而现代的外观。...在React的海洋中起航首先，我们选择了使用 Create React App 工具，这是一个快速初始化 React 项目的强大工具。...安装 Create React App使用 Create React App 工具可以快速初始化一个React项目。...在你的 React 组件中引入 Ant Design 组件。你可以从 Ant Design 的文档中选择适合你博客风格的组件，比如 Menu、Card、Typography 等。...美化与样式定制Ant Design 提供了一套丰富的主题和样式定制工具。通过这些工具，你可以根据个人喜好调整博客的颜色、字体、边距等样式属性。这不仅让博客更符合你的审美观，也展现了个性化的博客风格。

    82710

    如何优雅地覆盖组件库样式？

    定位要覆盖的样式 首先用开发者工具定位对应的样式：.ant-picker-calendar-date-today... 可以看到，原本的CSS选择器和HTML元素类名都从myWrapper变成了demo_myWrapper__Hd9Qg，前面加上了文件名，后面加上了哈希值，这样就能保障样式只在当前这个文件下生效了...但是在这种样式隔离情况下，我们原本用作覆盖的CSS也被加上了哈希值，就像下图这样，这时没有办法选中UI组件，覆盖也就不会成功。 所以，React给我们提供了一个语法:global。...使用很简单，把要“渗透“进组件内部的样式前面加上>>>，作用域内的CSS样式都不会带上哈希值作为属性选择器。...相较于React的:global，Vue的深度作用选择器是一种更优秀的方案，它必须要一个前导（也就是上面例子中的.myWrapper选择器），前导依旧会被打上哈希值作为属性选择器，要渗透进去的样式实际上是作为它的子选择器

    3.6K10

    『Ant Design』主题定制

    二、主题定制 打开官方文档，官方文档地址：https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单，点击进入，可以看到如下内容： Ant...方式三（通过 craco，推荐） 官方文档：https://4x.ant.design/docs/react/use-with-create-react-app-cn 第三种方式在 create-react-app...Button> + - ); 这里的 theme 属性就是用来配置主题的，token 属性就是用来配置主题色的，colorPrimary 就是主题色的值，...再来一个，我将 Link Button 也改为绿色，这个好像是文字颜色，再去官方文档找找有没有更改文字颜色的 Token 名称，然后我在文档中搜索了一下没有找到，我利用猜想加编辑工具的提示找到了我想要的...Token 名称： 我输入了 link，然后编辑器就提示了一堆出来我发现有一个 colorLink，我猜测这个就是用来配置 Link Button 文字颜色的，然后我将 Link Button 文字颜色改为绿色

    1.5K50

    类型即正义：TypeScript 从入门到实践（序章）

    确保你有一定的命令行使用基础，包括使用 Npm （Node.js 包管理工具）来安装包。...，就会提示已经初始化完成，并提供了对于的命令来帮助你开启项目，我们根据提示输入如下命令来开启项目： $ cd typescript-tea $ npm start 运行如上命令之后，会自动开启 Webpack...成功创建一个 TypeScript 版本的 React 应用！ 提示在下文中，为了简化语言，我们统一称 TypeScript 为 TS。...提示Ant Design [19]是蚂蚁金服孵化的一套企业级产品设计体系，提供了完备的 TS 类型定义，使得我们可以很方便的在 TS 项目中使用，在最近发布了 4.0 版本，致力于创造高效愉悦的工作体验...Mobile[21] 开箱即用的中台前端/设计解决方案：Ant Design Pro[22] 插画设计：海兔[23] 一款为设计者提升工作效率的 Sketch 工具集 ：Kitchen[24] 后面图雀社区计划围绕

    1.9K20

    掌握 Ant Design 主题定制实战指南

    二、主题定制 打开官方文档，官方文档地址：https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单，点击进入，可以看到如下内容： Ant...3.方式三（通过 craco，推荐） 官方文档：https://4x.ant.design/docs/react/use-with-create-react-app-cn 第三种方式在 create-react-app...Button> + - ); 这里的 theme 属性就是用来配置主题的，token 属性就是用来配置主题色的，colorPrimary 就是主题色的值，...再来一个，我将 Link Button 也改为绿色，这个好像是文字颜色，再去官方文档找找有没有更改文字颜色的 Token 名称，然后我在文档中搜索了一下没有找到，我利用猜想加编辑工具的提示找到了我想要的...Token 名称： 我输入了 link，然后编辑器就提示了一堆出来我发现有一个 colorLink，我猜测这个就是用来配置 Link Button 文字颜色的，然后我将 Link Button 文字颜色改为绿色

    95710

    Nest + Sharp 实现了一个 gif 压缩工具，帮我省不少钱

    比如这样一个图片： 在编辑器上传会提示超过 10 M 了： 这时候就需要 GIF 压缩，不然文章发不了。...于是我在百度搜素 GIF 压缩，就找到了一个工具： 它确实能解决我的问题： 但是要花钱： 一年 148 呢，对一个小工具来说还是挺贵的。 但没办法，这对我是刚需，总不能不发文章了吧。...然后我们来写下上传文件的 UI： import React from 'react'; import { InboxOutlined } from '@ant-design/icons'; import..., { useState } from 'react'; import { InboxOutlined } from '@ant-design/icons'; import { message, Upload...在点击登录的时候打印下表单的值和 filePath。 我们试试看： 3 个参数都拿到了，然后调用下压缩接口。

    89820

    7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐

    更棒的是内置的功能复杂，我们自己很难处理的常用组件，比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等，再进一步，还有帮我们把组件的轮子装好的 React admin 后台管理系统。...Ant Design of React 上手文档 | 阿里 Ant Design of React Github Antd of React 是基于 Ant Design 设计体系的 React UI...Ant Design 作为一门设计语言已经经历了多年的迭代和积累，它对 UI 的设计思想已经成为一套标准，也是 React 开发者手中的神器，大幅提高了产品设计研发的效率及质量，Ant Design 文档简洁清晰...Antd of React 是国内 React 项目的首选组件库。 当然，Ant Design 也帮大家造好了轮子，Ant Design Pro（React admin 后台管理框架）请享用。...Element 优秀的方面是常用组件写的非常扎实，比如日期时间选择器、树形组件、日历组件等，这些我们自己写太费劲了，引入第三方库又麻烦，如果选择的 UI 库写的很不错，节省非常多的时间。

    8.1K40

    Ant Design Table组件报错，提示table should have a unique `key` prop的解决办法

    在使用Ant Design for React对接数据时发现控制台报错如下： Warning: [antd: Table] Each record in dataSource of table should...have a unique `key` prop, or set `rowKey` of Table to an unique primary key, see https://u.ant.design...Ant Design Table组件的数据源必须用 "key" 属性吗？ 其实不是必须的，我们在使用中会发现 "key" 是 mysql 的保留字段，很不方便。...可以通过下面的方法解决： 可以给你的数据定一个 dataIndex 之类的值，最后会赋值到 react 的元素 key 上： rowKey : record => record.dataIndex, 或者...声明：本文由w3h5原创，转载请注明出处：《Ant Design Table组件报错，提示table should have a unique `key` prop的解决办法》 https://www.w3h5

    15.5K30

    ant-simple-pro2.0正式发布，助力vue3社区

    ant-simple-pro 提供了一套开箱即用的后台管理模版, 使得我们可以快速搭建后台管理项目, 并且对Vue3, React, Angular都有对应版本的支持, 我们可以应用于任何框架的管理系统中...此次的版本更新，react版本难度不大，难的是vue版本，因为react对应的插件和第三方库，vue3.0有的没有，哎，其实也不是没有，是完全没有，因此开启了我们造轮子的想法。...温馨提示：如下代码片段只是演示，并不是完整的，完整的请查看ant-simple-pro。...的源码思想，用vue3+ts写的一款颜色选择器组件，完全支持vue3,ts,我们对外暴露了SketchPicker,SwatchesPicker等组件选择器，api和组件选择器，更react-color...项目地址：https://github.com/lgf196/ant-simple-pro 文档地址：ant-simple-pro-document 温馨提示：ant-simple-pro-document

    1.4K10

    7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐

    更棒的是内置的功能复杂，我们自己很难处理的常用组件，比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等，再进一步，还有帮我们把组件的轮子装好的 React admin 后台管理系统。...Ant Design Mobile of React - 阿里前端 UI 库，面向企业级中后台 [02-Ant-Design-Mobile-React] Ant Design Mobile 上手文档 |...Ant Design Mobile Github Antd Design Mobile of React 是基于 Ant Design 设计体系的 React 移动端组件库，主要用于研发企业级中后台产品...TDesign React Mobile - 腾讯 UI 组件库，配套工具完满，设计工整，文档清晰 [03-TDesign-React-Mobile] TDesign React 上手文档 | TDesign...还提供了辅助设计工具及设计资源，大家常用的设计工具都能找到对应的设计物料。流程规范，使用清晰，强烈推荐。 4.

    24.6K23

    2025最全工具横评：腾讯云CodeBuddy凭95%还原度封神

    本文基于2025-09-12腾讯云官网及权威社区实测，横向对比6款热门“设计稿→代码”工具，重点拆解腾讯云代码助手CodeBuddy的“混元设计识别引擎+Ant Design Token自动对齐+云原生一键部署...二、6款热门工具横评（2025-09-12官网数据） 名称 支持格式 输出框架 还原准确率 设计系统对齐...设计系统智能对齐 自动检测是否使用Ant Design、TDesign、WeUI等官方Token，一键替换变量，保证品牌一致性，无需手动改色值。...四、实测：Figma登录页→React+TypeScript 00:00 粘贴Figma链接到CodeBuddy插件 00:03 选择“React+TypeScript+Tailwind+SCF” 00...导设计：右键“Send to CodeBuddy”→选择框架→生成代码。 云部署：侧边栏“Deploy to Tencent Cloud”→30秒拿到HTTPS域名。

    2.1K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券