ts+antd design版本升级v3到v4，interface接口定义无法使用

最新推荐文章于 2023-08-17 14:52:49 发布
最新推荐文章于 2023-08-17 14:52:49 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： antd版本升级v4 antd design升级版本踩坑注意 文章标签： react typescript ant yarn npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43739925/article/details/105674002
版权
在将antd从v3.26.14升级到v4.0.0的过程中，遇到ts接口定义问题及Button组件type属性的变更。升级后，PaginationConfig和ColumnProps接口需从新位置导入，Button的'danger'属性不再作为type的值，而是独立的属性。
摘要由CSDN通过智能技术生成

ts+antd design版本升级v3到v4，interface接口定义无法使用

版本v3升级v4的过程

antd初始版本3.26.14 升级到4.0.0
react版本16.12.0

  1. 项目下运行
npx -p @ant-design/codemod-v4 antd4-codemod src

运行后提示
在这里插入图片描述
按照提示执行
npm install antd@4.0.0
npm install @ant-design/icons@4.0.0
npm install @ant-design/compatible@1.0.0

  1. 重启项目
  2. 报错如下
    （1）ts报错
    ts的报错
    看了下源码找到了ts报错的原因：
    在这里插入图片描述
    原本从antd/lib/table/interface导出的接口PaginationConfig变成了从antd/lib/pagination导出，ColumnProps变成了antd/lib/table中导出，所以修改后如下图
最低0.47元/天 解锁文章
外号十八
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3+TS 结合ant design实现简单列表页和详情页
weixin_48914380的博客
02-06 4446
Vue+Ts实现列表页详情页，ant design+tailwindcss实现简单列表页详情页。详情页新增、修改、查看如何实现。
ant vue 兼容性问题_Ant Design of Vue使用遇到的问题以及解决方法总结
weixin_36089954的博客
01-17 1527
问题1：在modal里使用select多选的时候，当modal关闭之后，select框的值未初始化？解决方法：将参数 destroyOnClose 设置为true，表示当关闭时自动销毁Modal的子元素。问题2：控件select的备选项option标签属性key和value值的区别？解决方法：style="width: 100%"placeholder="请选择开班课程"v-decorator="...
antd组件库封装9-interface初探
qq_41632427的博客
01-28 100
前端
antdesgin vue +ts +vue3.0 分页器的封装
我只是个很菜的前端
07-12 881
antdesgin vue +ts +vue3.0 分页器的封装
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
热门推荐
XSL_HR的博客
10-19 1万+
一个好项目的编写不仅需要完美的逻辑，以及相应的技术，同时也需要一个设计规范的高质量UI组件库。本期文章将会详细讲解Ant Design Vue组件库的安装、引入和使用。
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤（Layout组件未封装）...
vue3+ts+antd 前端基础模板
01-14
vue3结合vite使用typescript搭建的带有路由的轻量级布局模板。 Vue.js 的最新版本，它引入了许多新的特性和改进。以下是一些 Vue 3 的新特性： Composition API：Vue 3 引入了一个新的 API，称为 Composition API。...
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
最新发布
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
antd3升级到antd4（已解决所有报错）
owo_ovo的博客
08-17 2377
react项目将antd3升级到antd4，并解决常见报错
23 版本以上的v4包_Ant Design Pro V2升级到V4 小结
weixin_29553791的博客
12-29 743
前言前不久接手过一个历史悠久的项(shi)目(shan)，技术栈之复杂(混乱)令我潸然泪下：你甚至可以在一个项目里使用前端三大框架(Angular1, Vue, React)。 三份的代码，本应该给我带来更多的快乐，但是为什么会变成这样呢?鉴于接到的是一个全新的需求，于是我又双叒叕引入了Ant Design Pro V4全家桶(第四份的快乐)。Hooks和Ant Design V4的搭配，的确用着...
arp 华为 查看 路由器_华为查看配置命令是什么
weixin_33491377的博客
12-31 1828
无线路由器是单纯型AP与宽带路由器的一种结合体，是带有无线覆盖功能的路由器，主要应用于用户上网和无线覆盖。下面是学习啦小编给大家整理的一些有关华为查看配置命令大全，希望对大家有帮助!华为查看配置命令大全华为路由器简单配置(老命令行)en 进入特权模式conf 进入全局配置模式in s0 进入 serial 0 端口配置ip add xxx.xxx.xxx.xxx xxx.xxx.xxx.xxx 添...
React+Antd+TypeScript 开发规范
caoyan0829的博客
09-19 5135
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则 提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官方规范] 出自：深圳市伙伴行网络科技有限公司 编辑：前端开发-毛昱宇 (https://zhongsp.gitbooks.io/typescript-handbook/doc/w...
antd 相关学习 Button
draft
06-12 1万+
api：Ant Design of React 按钮有四种类型：主按钮（primary）、次按钮（default）、虚线按钮（dashed）、危险按钮（danger） 通过配置type属性即可： 图标按钮： 当需要在Button内嵌入Icon时，可以设置icon属性，或者直接在Button内使用Icon组件。如果想控制Icon具体的位置，只能直接使用Icon组件，而非icon属性。
ant-design V3升级V4记录（成功篇）
ime33的博客
01-16 2762
原因：babel版本兼容问题以及.babelrc文件配置，可在下方沿用我的babel相关版本。一是antd是一个开源性生态框架，人家社区一直在更新迭代，如果产品不及时更新，一直在使用不维护的，甚至有问题的框架，后果可想而知。原因：检查style-loader\less-loader\css-loader版本，挨个尝试。这篇博客没有一步步记录升级过程中的错误以及解决办法，所以只罗列的大致的错误项，希望对在升级之路上的你有所帮助。另外在我升级V4时，其实框架已经到了V5了，无奈升级到V5前，必须先升级V4。
ts3.4版本特性
Gloomysunny的博客
10-14 210
ts3.4版本特性 Faster subsequent builds with the--incrementalflag --incremental其实是和--tsBuildInfoFile联合起来使用的，--incremental是为我们上一次的compile信息做一次硬缓存，在我们下一次修改项目时会进行信息比对然后减少编译的消耗。--tsBuildInfoFile指定我们的缓存文件的目录，相对于cmd shell的相对路径吧。 同时--outFile也会影响--tsBuildInfoFile的文件位置。
antd4-codemod把antd3.X升级到antd4.9最新版本
DavidZhao的博客
12-16 2941
项目做了好多年，框架一直用的antd3.X的，一直在3的版本上升级，React也一直用的16.6的版本，所以也不支持react Hook。 最近领导让把所有项目的antd升级都到4.X的版本，方便以后迭代，所以升级研究了一下，有antd4-codemod工具还是很简单的，一个小时搞定。 第一步： 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src 或者 全局安装 # 使用 npm npm i -g @ant-design/code.
ts+antd报错：TS2604: JSX element type ‘XXX‘ does not have any construct or call signat
S_SL_rule的博客
08-21 2073
ts+antd报错：TS2604: JSX element type 'XXX' does not have any construct or call signat
vue-cli+ts+antd项目汇总
09-07
Vue-cli是一个官方推出的Vue项目脚手架工具，用于快速搭建Vue项目。ts是TypeScript的简称，是一种由微软开发的开源编程语言，它是JavaScript的超集，可以为JavaScript代码添加静态类型检查和封装类、模块等面向对象编程的特性。antd是蚂蚁金服开源的一套基于React封装的UI组件库，提供了丰富的高质量的React组件。 将这三者结合在一起，意味着我们可以利用Vue-cli搭建一个基于Vue和TypeScript的项目，并使用antd组件库来构建界面。这样的项目结合了Vue的简洁、易用和高效性能，TypeScript的类型检查和面向对象编程特性，以及antd的高质量UI组件，可以提升开发效率和代码质量。 在使用Vue-cli创建项目时，可以选择使用TypeScript作为项目的开发语言，这样项目就会自动集成TypeScript的相关配置和支持。通过使用Vue-cli提供的命令和配置，我们可以快速搭建一个工程化的项目结构，并集成Webpack等构建工具。 在项目中使用antd组件库时，可以通过npm或者yarn安装antd包，然后在Vue的组件中引入所需的组件，并进行相关配置和使用。antd提供了丰富的UI组件，包括按钮、表单、弹窗、表格等常见的界面元素，可以根据项目需求进行选择和使用。 在使用TypeScript编写Vue项目时，可以利用TypeScript的静态类型检查、类型提示功能，提升代码的可读性和可维护性。同时，可以使用面向对象的编程方式来组织代码，更好地管理和封装组件、模块等。 综上所述，使用Vue-cli搭建一个基于Vue、TypeScript和antd的项目，可以充分发挥各自的优势，提升开发效率和代码质量，同时能够满足丰富的UI界面需求。这样的项目具备良好的可扩展性和可维护性，适合于中大型前端项目的开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值