TypeScript:React、拖拽、实践!【上】

简介: 通过上一篇文章的学习,我们知道,typescript其实是一套约束规则。理解了这一点,就可以大概确定我们的学习方向。• 是规则,那么知识点之间,就不会有太强的关联性。我们可以一条一条的逐步学习。也就意味着我们并不用急于把官方文档里所有的规则一次性学完。甚至可以把文档当成一个手册,在具体使用时再去查询。• 是约束,也就意味着开发方式的改变与限制。ts的开发会与通常情况下松散灵活的开发不太一样,这就必然会带来初期的不适应。约束带来的痛苦无法避免,我们要有这样一个心理预期。

1


方法


通过上一篇文章的学习,我们知道,typescript其实是一套约束规则。


理解了这一点,就可以大概确定我们的学习方向。


  • 是规则,那么知识点之间,就不会有太强的关联性。我们可以一条一条的逐步学习。也就意味着我们并不用急于把官方文档里所有的规则一次性学完。甚至可以把文档当成一个手册,在具体使用时再去查询。


  • 是约束,也就意味着开发方式的改变与限制。ts的开发会与通常情况下松散灵活的开发不太一样,这就必然会带来初期的不适应。约束带来的痛苦无法避免,我们要有这样一个心理预期。


最后抛开规则的学习,最重要的应该是什么?毫无疑问,是实践。这也是无法从官方文档获取到的重要讯息。


许多人只看官方文档,一脸懵逼!规则的学习好像不难,可运用到实践到底是什么样子?不知道。


所以,第一件事情,我们要抛开规则,来看一看,把ts用在实践里到底是什么样。这里以react中实现拖拽为例。


拖拽的原理与实现过程之前已经学习过,所以这里就把之前的代码直接拿过来调整一下


2


环境


一个简单的方式,是直接使用create-react-app创建一个已经支持typescript开发的项目。


> create-react-app tsDemo --typescript


当然,在不同的项目中支持typescirpt可能不太一样,因此这里就不做统一讲解,大家根据自己的需求在网上搜索方案即可。


除此之外,也可以clone我们的**练习项目**。


https://github.com/daraluv/practice


3


.d.ts


在ts的开发中,.d.ts文件扮演着至关重要的作用。通常情况下,这样的文件,我们称之为声明文件。


那么声明文件是一个什么样的东西呢?


前一篇文章我们讲过,ts的规则能够描述一个简单的变量,能够描述一个复杂的JSON数据,能够描述函数,也能够描述对象class。可是大量的描述规则代码如果和实际功能代码糅合在一起,势必会导致整个代码冗余杂乱。因此在实践中,当声明内容很多时,通常会统一在一个文件中编写ts的描述规则,这个文件,就是以.d.ts为后缀名的声明文件。


如果声明文件过多,那么就非常可能重名,为了避免相互干扰,typescript又引入了作用域namespace概念。


因此,如果我们要利用ts实现拖拽组件,那么文件结构会如下展示:


+ Drag
   - index.tsx
   - style.scss
   - interface.d.ts


其中interface中会声明在开发过程中遇到的所有复杂数据结构。大概内容如下:


declare namespace drag {
  ...
}


我们可以使用interface语法来约束一个JSON数据。


微信图片_20220511152402.gif


JSONdemo


在创建一个需要符合这个约束规则的数据时,只需要直接使用命名空间drag即可。ts会自动帮助我们识别而无需引入,或者ts会自动帮助我们引入(必要时)。


微信图片_20220511152406.gif

使用


整个拖拽功能完整声明文件如下


/** declare 为声明关键字,让外部组件能访问该命名空间*/
declare namespace drag {
  interface JSONDemo {
    name: string,
    age: number
  }
  interface DragProps {
    width?: number,
    height?: number,
    left?: number,
    top?: number,
    zIndex?: number,
    maxWidth?: number,
    maxHeight?: number,
    className?: string,
    onDragEnd?: (target: DragEndParam) => any,
    children?: any
  }
  interface DragState {
    left: number,
    top: number
  }
  interface DragEndParam {
    X: number,
    Y: number
  }
  type TouchEvent = React.TouchEvent & React.MouseEvent;
  interface LiteralO {
    width: number,
    height: number,
    [key: string]: any
  }
}


本文的主要目的在于帮助大家了解实践中ts的运用,所以如果初学ts,对一些语法不是很熟悉不用太过在意,具体的语法可以通过官方文档,或者后续文章中学习


通常情况下,每个「复杂」组件都会对应创建一个.d.ts的声明文件。


如果比较简单,我们不会需要.d.ts

相关文章
|
4月前
|
前端开发 JavaScript
深入理解并实践React Hooks —— useEffect与useState
深入理解并实践React Hooks —— useEffect与useState
190 1
|
3月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
303 2
|
9天前
|
移动开发 前端开发 API
React 拖拽上传组件 Drag & Drop Upload
拖拽上传(Drag & Drop Upload)是现代文件上传方式,允许用户通过简单拖拽操作将文件上传至网页。本文介绍如何在React应用中实现拖拽上传组件,涵盖HTML5拖放API、React状态管理、组件构建及常见问题解决。包括视觉反馈、文件类型和大小限制等优化措施,确保组件的用户体验和稳定性。
49 27
|
10天前
|
前端开发 JavaScript UED
React 拖拽排序组件 Draggable List
在现代Web应用中,拖拽排序功能显著提升用户体验。使用React结合`react-dnd`库,可以轻松创建高效且易于维护的拖拽排序组件。通过简单的拖拽操作,用户能直观调整列表项顺序,适用于任务管理、看板工具等场景。实现步骤包括项目初始化、安装依赖、创建基础组件、添加拖拽功能及管理状态和事件。常见问题如拖拽效果不流畅、顺序未更新等可通过性能优化、正确处理索引交换等方式解决。移动端支持也需考虑,确保跨平台的良好体验。
68 25
|
7天前
|
移动开发 前端开发 数据可视化
React 拖拽布局组件 Drag & Drop Layout
本文介绍了如何在React中构建拖拽布局组件,涵盖基础知识、常见问题及解决方案。首先解释了拖拽操作的三个阶段:开始、过程中和结束。接着推荐了几个常用的拖拽库,如`react-beautiful-dnd`,并详细展示了如何使用该库创建基础拖拽组件,包括安装依赖、初始化容器和处理拖拽结束事件。文章还探讨了常见问题,如拖拽不生效、性能优化、嵌套拖拽和跨浏览器兼容性,并提供了进阶技巧,如自定义样式、多列布局和集成其他UI组件。通过这些内容,读者可以掌握构建高效拖拽布局的方法。
34 16
|
3月前
|
移动开发 前端开发 JavaScript
React DnD:实现拖拽功能的终极方案?
本文首发于微信公众号“前端徐徐”,介绍了一个强大的 React 拖拽库——React DnD。React DnD 帮助开发者轻松创建复杂的拖拽界面,适用于 Trello 风格的应用、列表重排序、可拖拽的 UI 组件等场景。文章详细介绍了 React DnD 的基本信息、主要特点、使用场景及快速上手指南。
336 3
React DnD:实现拖拽功能的终极方案?
|
2月前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
267 9
|
2月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
3月前
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
43 3
|
5月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
55 1