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

相关文章
|
2月前
|
监控 JavaScript 安全
TypeScript在员工上网行为监控中的类型安全实践
本文演示了如何使用TypeScript在员工上网行为监控系统中实现类型安全。通过定义`Website`类型和`MonitoringData`接口,确保数据准确性和可靠性。示例展示了从监控设备获取数据和提交到网站的函数,强调了类型定义在防止错误、提升代码可维护性方面的作用。
114 7
|
2月前
|
数据采集 Web App开发 JavaScript
TypeScript 爬虫实践:选择最适合你的爬虫工具
TypeScript 爬虫实践:选择最适合你的爬虫工具
|
3天前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
3天前
|
JavaScript 前端开发 IDE
React 项目中有效地使用 TypeScript
React 项目中有效地使用 TypeScript
|
3天前
|
前端开发 JavaScript 开发者
React 和 TypeScript
React 和 TypeScript
|
17天前
|
前端开发 JavaScript 数据管理
引领潮流:React框架在前端开发中的革新与实践
React,始于2013年,由Facebook驱动,以其组件化、Virtual DOM、单向数据流和Hooks改革前端。组件化拆分UI,提升代码复用;Virtual DOM优化渲染性能;Hooks简化无类组件的状态管理。庞大的生态系统,包括Redux、React Router等库,支持各种需求。例如,`useState` Hook在计数器应用中实现状态更新,展示React的实用性。React现已成为现代Web开发的首选框架。【6月更文挑战第24天】
82 2
|
1月前
|
前端开发 JavaScript 开发者
React和TypeScript各自以其独特的优势赢得了广大开发者的青睐
【6月更文挑战第12天】React和TypeScript是前端开发的强强联合。TypeScript提供静态类型检查和面向对象特性,增强代码健壮性和团队协作效率;React凭借组件化、高性能和丰富生态系统引领UI构建。两者结合,能精确定义React组件类型,提升代码组织和维护性,通过安装TypeScript、配置、编写及构建步骤,可在React项目中实现这一优势。这种结合为前端开发带来进步,未来应用将更加广泛。
25 1
|
2月前
|
JavaScript 前端开发 安全
【TypeScript技术专栏】TypeScript在Electron桌面应用中的实践
【4月更文挑战第30天】本文介绍了如何在Electron桌面应用中采用TypeScript以提升代码质量和可维护性。Electron利用Chromium和Node.js让前端开发者能创建桌面应用,而TypeScript的强类型系统和高级语言特性有助于管理复杂项目。通过初始化项目、安装依赖、配置TypeScript、编写主进程和渲染进程代码,开发者可以在Electron中实践TypeScript。一个简单的文本编辑器案例展示了TypeScript在确保类型安全方面的优势。尽管有学习成本,但TypeScript对大型Electron项目来说是值得的。
|
2月前
|
传感器 JavaScript 前端开发
【TypeScript技术专栏】TypeScript在大型项目中的实践与挑战
【4月更文挑战第30天】TypeScript在大型前端项目中日益流行,以其类型系统和ES6+支持提升代码安全与维护性。然而,采用 TypeScript 面临学习曲线、构建时间增加及类型推断挑战。通过最佳实践和成熟工具链(如 tsc、tslint 和 Visual Studio Code)可克服这些问题。案例如Angular、Basecamp和Slack已成功应用TypeScript。掌握TypeScript对提升开发者技能和市场竞争力至关重要。
|
2月前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript与React的完美结合
【4月更文挑战第30天】React和TypeScript在前端开发中备受推崇。React以其组件化、高性能和灵活的生态系统引领UI构建,而TypeScript通过静态类型检查和面向对象特性增强了代码的健壮性和可维护性。两者结合,能提升开发效率,降低错误,使React组件结构更清晰。通过安装TypeScript,配置tsconfig.json,然后用TypeScript编写和打包代码,可实现两者的无缝集成。这种结合为前端开发带来更强的代码质量和团队协作效果,随着技术发展,其应用将更加广泛。