TYPESCRIPT+REACT WEB应用开发实战

第1篇 TypeScript快速开发 第1章 TypeScript语言基础 2 1.1 为什么要学TypeScript语言 2 1.1.1 什么是TypeScript语言 2 1.1.2 TypeScript语言的背景 3 1.1.3 学习TypeScript语言的必要性 3 1.2 JavaScript语言、ECMAScript标准规范与 TypeScript语言 3 1.2.1 JavaScript语言 4 1.2.2 ECMAScript标准规范 4 1.2.3 TypeScript语言的特性 5 1.2.4 TypeScript语言与JavaScript语言的区别 5 1.3 TypeScript编译器 6 1.3.1 TypeScript编译器的基础 6 1.3.2 TypeScript源码的编译流程 7 1.3.3 TypeScript编译器的架构 8 1.4 TypeScript语言的思维方式 10 1.4.1 JavaScript语言的不足之处 10 1.4.2 弱类型与强类型、静态语言与动态语言 11 1.4.3 TypeScript类型思维 12 1.5 开发实战：搭建TypeScript开发环境 12 1.5.1 获取TypeScript的方式 13 1.5.2 安装TypeScript开发环境 14 1.5.3 TypeScript应用 18 1.6 小结 23 第2章 TypeScript项目开发与配置 24 2.1 通过Babel编译工具编译TypeScript项目 24 2.1.1 Babel编译工具介绍 24 2.1.2 开发实战：通过Babel编译工具编译JavaScript代码 25 2.1.3 开发实战：通过Babel编译工具编译TypeScript代码 30 2.2 通过Rollup工具打包TypeScript项目 34 2.2.1 Rollup工具介绍 34 2.2.2 开发实战：通过Rollup工具打包JavaScript项目 35 2.2.3 开发实战：通过Rollup工具打包TypeScript项目 40 2.3 通过webpack工具构建TypeScript项目 44 2.3.1 webpack工具介绍 44 2.3.2 开发实战：通过webpack工具构建JavaScript项目 45 2.3.3 开发实战：通过webpack工具构建TypeScript项目 49 2.4 小结 51 第3章 TypeScript语言基础进阶 52 3.1 TypeScript语法基础 52 3.1.1 变量声明、变量作用域与变量提升 52 3.1.2 开发实战：TypeScript变量类型声明应用 53 3.1.3 开发实战：TypeScript变量作用域应用 55 3.1.4 开发实战：TypeScript变量提升应用 56 3.1.5 开发实战：TypeScript函数提升应用 57 3.1.6 let关键字与块级作用域 61 3.1.7 开发实战：let关键字与块级作用域 61 3.1.8 const关键字的常量声明 63 3.1.9 开发实战：const关键字的常量声明应用 63 3.1.10 开发实战：const关键字的常量作用域应用 64 3.1.11 开发实战：const关键字的常量对象应用 65 3.1.12 解构赋值 67 3.1.13 开发实战：TypeScript数组解构赋值应用 67 3.1.14 开发实战：TypeScript对象解构赋值应用 69 3.1.15 开发实战：TypeScript函数参数解构赋值应用 70 3.2 TypeScript基础类型 72 3.2.1 布尔类型、数字类型与字符串类型 72 3.2.2 开发实战：遍历字符串应用 72 3.2.3 数组与元组类型 74 3.2.4 开发实战：数组操作应用 74 3.2.5 开发实战：元组操作应用 75 3.2.6 枚举类型 77 3.2.7 开发实战：枚举类型应用 78 3.2.8 Any类型 80 3.2.9 开发实战：Any类型应用 80 3.2.10 Void、Null与Undefined类型 82 3.2.11 开发实战：Void、Null与Undefined类型应用 82 3.2.12 联合类型 84 3.2.13 开发实战：联合类型应用 84 3.3 TypeScript接口 85 3.3.1 接口类型与接口继承 85 3.3.2 开发实战：基于属性类型接口设计实现用户信息应用 87 3.3.3 开发实战：基于函数类型接口设计实现算术四则运算应用 90 3.3.4 开发实战：基于可索引类型接口设计实现字符串数组类型应用 91 3.3.5 开发实战：基于类类型接口设计实现日期时间应用 93 3.3.6 开发实战：基于单接口继承设计实现计算周长的应用 94 3.3.7 开发实战：基于多接口继承设计实现计算周长和面积的应用 96 3.3.8 开发实战：基于混合类型接口设计实现计数器应用 98 3.4 TypeScript类 100 3.4.1 类与类继承 100 3.4.2 公共、私有与保护修饰符 101 3.4.3 开发实战：设计实现存取器应用 101 3.5 TypeScript函数 103 3.5.1 函数基础 103 3.5.2 开发实战：函数类型应用 104 3.5.3 开发实战：函数参数应用 106 3.5.4 开发实战：匿名函数应用 107 3.5.5 开发实战：箭头函数与this关键字应用 108 3.6 TypeScript泛型 111 3.6.1 泛型基础 111 3.6.2 开发实战：泛型函数应用 111 3.6.3 开发实战：泛型变量应用 112 3.6.4 开发实战：泛型类型应用 115 3.6.5 开发实战：泛型接口应用 118 3.6.6 开发实战：泛型类应用 120 3.7 TypeScript枚举 121 3.7.1 开发实战：数字枚举应用 122 3.7.2 开发实战：字符串枚举应用 123 3.7.3 开发实战：常量和计算量的枚举应用 124 3.8 小结 126 第4章 TypeScript语法高级特性 127 4.1 TypeScript类型推论 127 4.2 TypeScript类型兼容性 128 4.2.1 类型兼容性介绍 128 4.2.2 开发实战：对象类型正向兼容性测试应用 129 4.2.3 开发实战：对象类型逆向兼容性测试应用 130 4.2.4 开发实战：接口类型兼容性测试应用 131 4.2.5 开发实战：类类型兼容性测试应用 132 4.3 TypeScript高级类型 133 4.3.1 高级类型基础 134 4.3.2 开发实战：交叉类型应用 135 4.3.3 开发实战：联合类型应用 137 4.3.4 开发实战：typeof关键字应用 142 4.3.5 开发实战：instanceof关键字应用 143 4.3.6 开发实战：可选参数应用 145 4.3.7 开发实战：可选属性应用 146 4.3.8 开发实战：类型别名应用 148 4.3.9 开发实战：字面量应用 151 4.3.10 开发实战：可辨识的联合类型应用 154 4.3.11 开发实战：索引类型应用 157 4.3.12 开发实战：映射类型应用 159 4.4 TypeScript迭代器与生成器 162 4.4.1 迭代器与生成器介绍 162 4.4.2 开发实战：迭代器应用 163 4.4.3 开发实战：生成器应用 168 4.5 TypeScript模块与命名空间 169 4.5.1 模块与命名空间介绍 170 4.5.2 开发实战：模块应用 170 4.5.3 开发实战：命名空间应用 175 4.5.4 TypeScript模块解析 179 4.6 TypeScript装饰器 180 4.6.1 装饰器介绍 180 4.6.2 开发实战：装饰器应用 181 4.6.3 开发实战：类装饰器应用 182 4.6.4 开发实战：类方法装饰器应用 183 4.6.5 开发实战：类属性装饰器应用 185 4.7 小结 187 第2篇 React快速开发 第5章 React框架发展过程 190 5.1 React框架介绍 190 5.2 React框架特点 191 5.3 React框架应用方式 191 5.4 编写React应用 192 5.5 搭建React开发环境 194 5.6 在React应用中使用TypeScript模板功能 197 5.7 小结 199 第6章 React框架基础进阶 200 6.1 React虚拟DOM 200 6.1.1 什么是虚拟DOM 200 6.1.2 开发实战：虚拟DOM应用 201 6.2 React JSX/TSX语法扩展与表达式 203 6.2.1 JSX/TSX语法扩展与表达式的介绍 203 6.2.2 开发实战：JSX/TSX语法扩展应用 203 6.2.3 开发实战：React表达式应用 205 6.3 React渲染机制 208 6.3.1 React渲染机制的介绍 208 6.3.2 开发实战：设计实现页面动态时钟应用 208 6.4 React组件设计与参数 210 6.4.1 React组件设计与参数的介绍 210 6.4.2 开发实战：基于React框架实现登录界面 211 6.4.3 开发实战：基于Props参数与UI交互方式设计用户信息界面 213 6.4.4 开发实战：基于TSX语法与Props参数设计用户信息界面 216 6.4.5 开发实战：基于Props默认参数设计用户信息界面 218 6.4.6 开发实战：React组件切分与提取应用 221 6.5 React状态与生命周期 227 6.5.1 状态与生命周期的介绍 227 6.5.2 开发实战：在React组件中引入状态 228 6.5.3 开发实战：基于组件状态与JSX语法实现页面动态时钟 230 6.5.4 开发实战：基于组件状态与TSX语法实现页面动态时钟 233 6.6 参数、状态与生命周期 235 6.6.1 参数、状态与生命周期的关系 235 6.6.2 开发实战：斐波那契数列应用 235 6.7 React事件处理 241 6.7.1 React事件处理的介绍 241 6.7.2 开发实战：基于单击事件弹出消息框 242 6.7.3 开发实战：实现状态切换按钮组件应用 244 6.7.4 开发实战：文本框事件处理应用 246 6.8 开发实战：React组件条件渲染 249 6.9 开发实战：React列表转化 255 6.10 React表单与受控组件 257 6.10.1 表单与受控组件的介绍 258 6.10.2 开发实战：React受控组件表单应用 258 6.11 开发实战：React状态提升 261 6.12 组合模式与特例关系 266 6.12.1 组合模式与特例关系的介绍 267 6.12.2 开发实战：基于组合模式设计实现UI组件 267 6.12.3 开发实战：基于特例关系设计实现UI组件 272 6.13 小结 274 第7章 React高级指引 275 7.1 React代码分割 275 7.1.1 什么是代码分割 275 7.1.2 开发实战：React传统加载方式应用 276 7.1.3 开发实战：React动态加载方式应用 277 7.2 React Context 278 7.2.1 Context介绍 278 7.2.2 开发实战：Context传递参数应用 278 7.2.3 开发实战：Context传递动态参数应用 283 7.2.4 开发实战：更新Context对象应用 288 7.2.5 开发实战：消费多个Context对象应用 293 7.3 错误边界 297 7.3.1 错误边界介绍 298 7.3.2 开发实战：错误边界应用 298 7.4 Ref属性与Ref转发 302 7.4.1 Ref属性基础 303 7.4.2 开发实战：Ref回调方式应用 303 7.4.3 开发实战：React.createRef()方式应用 305 7.4.4 开发实战：React.useRef()方式应用 310 7.4.5 Ref转发介绍 311 7.4.6 开发实战：Ref转发应用 311 7.5 开发实战：React高阶组件技巧 314 7.6 PropTypes静态类型检查 317 7.6.1 PropTypes静态类型检查介绍 317 7.6.2 开发实战：类型验证应用 318 7.6.3 开发实战：属性验证应用 320 7.6.4 开发实战：限制单一子代元素验证应用 323 7.7 小结 325 第8章 React Hook 326 8.1 React Hook基础 326 8.2 State Hook应用 327 8.2.1 开发实战：State Hook计数器应用 328 8.2.2 开发实战：State Hook动态更新用户信息应用 329 8.2.3 开发实战：State Hook页面动态时钟应用 331 8.3 Effect Hook应用 333 8.3.1 开发实战：Effect Hook计数器应用改进 333 8.3.2 开发实战：Effect Hook动态更新用户信息应用改进 335 8.3.3 开发实战：Effect Hook页面动态时钟应用改进 338 8.4 开发实战：Context Hook特性应用 340 8.5 React Hook使用规则 344 8.6 自定义Hook应用 345 8.6.1 自定义Hook基础介绍 345 8.6.2 开发实战：基于自定义Hook改进计数器应用 346 8.6.3 开发实战：基于自定义Hook实现页面动态时钟应用 348 8.7 小结 351 第3篇 TypeScript + React开发实战 第9章 基于TypeScript + React Hook + antd构建Web计算器应用 354 9.1 Web计算器应用功能介绍 354 9.2 应用架构设计 356 9.3 主面板容器 359 9.4 计算显示面板容器 362 9.5 数据输入面板容器 364 9.6 一元运算符面板容器 374 9.7 二元运算符面板容器 398 9.8 等于运算符面板容器 406 9.9 数据修改面板容器 413 9.10 小结 420 第10章 基于TypeScript + React + antd + Vite构建Web应用管理系统 421 10.1 Web应用管理系统功能介绍 421 10.2 应用架构设计 422 10.3 首页容器组件 423 10.4 顶部菜单栏容器组件 428 10.5 用户登录容器组件 439 10.6 左侧导航栏容器组件 445 10.7 路由功能容器组件 452 10.8 路由权限功能 458 10.9 首页容器组件 461 10.10 文档容器组件 472 10.11 表单容器组件 475 10.12 表格容器组件 477 10.13 侧边栏容器组件 480 10.14 选项卡组件 482 10.15 单选卡片容器组件 485 10.16 小结 487