# Ant Design 与 TypeScript：构建优雅的 UI 组件
在现代前端开发中，**Ant Design**（简称 **antd**）凭借其丰富的组件库和优雅的设计理念，逐渐成为了开发者构建企业级应用的首选。而结合 **TypeScript**，可以让我们的代码在开发过程中更具可维护性和可读性。本文将深入探讨如何在 antd 项目中使用 TypeScript，并附带代码示例，帮助你
# 如何在 Ant Design 项目中升级 TypeScript
在现代前端开发中，Ant Design（简称 Antd）是一个非常流行的 UI 组件库，而 TypeScript 则是一种强类型的 JavaScript 超集，用于提高代码的可维护性和可靠性。如果你正在开发一个使用 Ant Design 的项目，并希望将其迁移至 TypeScript，本文将为你提供详尽的指导。
## 流程概述
前言文中内容都是参考https://www.typescriptlang.org/docs/handbook/2/typeof-types.html , 以及参考TypeScript 之 Typeof Type Operator — mqyqingfeng 内容。typeof 类型操作符先来看看JavaScript中typeof的用法： 具体可参考 MDN typeoftypeof 操作符返回一个
转载
2023-09-06 07:46:23
58阅读
最近vue 3.0 版本发布，让我认识到 typescript 将占有越来越重要的地位，所以我也开启了typescript学习之旅。 要想编写第一个 hello typescript 程序，当然要经过安装这个必要的过程，我们分为接下来几个步骤： 步骤一：全局安装 typescriptnpm install -g typescript 步骤二：全局安装 ts-node 安装它的原
转载
2023-06-14 14:58:17
50阅读
Ant的核心功能有两个基本概念：特性和datatypes。
1. Datatype概述：
Ant能够构建Java工程的主要问题域，这使得Ant成为用于构建和打包Java应用程序的强大工具。在构建一个典型Java工程时，多数步骤都用于处理文件和路径，例如classpath。Ant提供Datatypes来处理这两个概念。Ant的Datatype可以认为是类
## TypeScript 扩展 Antd/ES
在前端开发中，我们经常使用 Ant Design (Antd) 这样的UI框架来构建用户界面。而 TypeScript 又是目前前端开发中越来越流行的语言。本文将介绍如何使用 TypeScript 扩展 Antd/ES，以提高开发效率和代码质量。
### 为什么使用 TypeScript
TypeScript 是 JavaScript 的一个
原创
2023-08-30 10:36:54
180阅读
# TypeScript 命名规范在 Ant Design 中的应用
在前端开发中，遵循一定的命名规范对于代码的可读性和维护性至关重要。Ant Design 是一个优秀的 React UI 组件库，而 TypeScript 则是越来越受到前端开发者青睐的静态类型检查工具。在 Ant Design 中，我们需要遵循一定的 TypeScript 命名规范来编写代码，以确保代码的质量和一致性。
##
# 重写Ant Design组件的类型定义
## 引言
在使用Ant Design这样的UI库时，我们经常需要根据自己的业务逻辑进行定制化。然而，在使用TypeScript时，Ant Design的类型定义并不总是完全符合我们的需求。因此，我们可能需要重写Ant Design组件的类型定义，以便更好地适配我们的项目。
本文将介绍如何重写Ant Design组件的类型定义，以及如何创建一个自定
文章目录一、基本用法二、常见用途2.1、将一个联合类型断言为其中一个类型2.2、将一个父类断言为更加具体的子类2.3、将任何一个类型断言为 any2.4、将 any 断言为一个具体的类型三、用法对比3.1、类型断言 vs 类型转换3.2、类型断言 vs 类型声明3.3、类型断言 vs 泛型 一、基本用法TypeScript 允许你覆盖它的推断，并且能以你任何你想要的方式分析它，这种机制被称为「类
1.v-decorator和v-model区别v-decorator在我看来更加适合于有验证的操作，比如不为空，唯一值，只能是数字等等。而v-model更加适合用来定义一些组件返回的接收参数，更好处理和获取，以及一些默认隐藏或者不显示但保存或修改需要用到的参数。2.v-decorator的用法部分测试代码......
<a-form-item label="name" :labelCol="
前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。 一、使用Form组件开发登录页面 pages->form->login.js：对应路由/admin/form/loginimport React from 'react'
import {Card, Form, Input, Button, message, Icon, Checkbox} f
简介antd的部分组件是基于react-component封装而来的，今天我们要讲的antd table也是基于react-component/**table**封装而来的，这次antd的源码解析，大部分也是基于rc-table，这次源码分析主要是讲一些特殊的知识点。如果想了解更多，可以评论一下，我看到评论后会添加。antd Table先上源码的链接 从这里可以看到antd Table的代码只有5
转载
2023-08-30 10:45:59
244阅读
近期准备升级antd4.0开发，发现form组件改动非常大，于是抽空看了改动点，于是有了这篇文章：首先回顾一下antd3的用法import React from "react";
import { Form, Input, Button } from "antd";
const Demo = ({ form }) => {
const { getFieldDecorator, vali
TypeScript 3.0 新功能介绍（一）
项目引用TypeScript 3.0引入了项目引用(project references)的新概念。 项目引用允许TypeScript项目依赖于其他TypeScript项目 - 特别是允许tsconfig.json文件引用其他tsconfig.json文件。 指定这些依赖项可以更容易地将代码拆分为更小的项目，因为它为TypeScript（及
# antd form 如何设置typescript类型
在使用 antd 的 Form 组件时，我们常常需要为表单元素设置类型，以提高代码的可维护性和可读性。本文将介绍如何使用 TypeScript 来为 antd 的 Form 组件设置类型，并结合一个具体的示例来说明。
## 问题描述
假设我们有一个用户注册页面，需要用户输入用户名、密码和确认密码。我们使用 antd 的 Form 组件
首先。vue 的数据流是双向的，而 react 的数据流是单向的。这意味着什么？这意味着，vue 中，子组件可以用 emit 把数据更新传给父组件。而 react 中， 需要通过父组件把回调函数传给子组件实现类似功能。 为什么要说这个？因为框架的设计会影响到组件库的设计。组件库的设计必须配合框架。 我们回忆一下， antd3 中表单是怎么用的？我们需要传入 onSubmit 回
转载
2023-08-21 15:55:26
88阅读
antd mobile2升级到antd mobile5官网上有两种升级方法，使用 antd-mobile-v2安装和通过别名安装 v5。 第一种方法要把项目中所有对 antd-mobile 的引入都替换为 antd-mobile-v2，成本比较大，而且也没有足够时间去测试替换后的项目。因此这里采用第二种安装方式，别名安装。一.antd2升级到antd5$ npm install --save an
转载
2023-09-16 20:32:14
263阅读
该专栏为纯前端（算半成品），但是基本可以适用于中台系统了，后期会继续完善。技术栈功能实现动态路由、vuex架构、布局设置、主题颜色切换、国际语言切换、响应试布局。
原创
2022-07-31 00:25:25
142阅读
## antd form 自定义组件 typescript 实现流程
### 步骤概览
以下是实现 antd form 自定义组件 typescript 的流程步骤概览：
| 步骤 | 描述 |
| --- | --- |
| 1 | 创建自定义组件 |
| 2 | 编写自定义组件的 props |
| 3 | 实现自定义组件的表单控件 |
| 4 | 集成自定义组件到 antd form
原创
2023-08-18 12:36:35
365阅读
有时候表单中的某些字段是需要调用后台接口验证,比如账号,ID之类的.这时候页面需要根据后台返回结果提示// 验证账号是否已经被添加过
const checkAccount = (value: string | number) => { // 这个是rules自定义的验证方法
return new Promise((resolve, reject) => { // 返回一个
转载
2023-06-05 17:51:33
289阅读
