18|数据类型:活用TypeScript做类型检查
宋一玮
你好,我是宋一玮,欢迎回到 React 应用开发的学习。
在前面两节课里,我们学习了应用状态管理的概念和代表性框架 Redux,以及 Redux 的封装库 Redux Toolkit + React Redux 的用法。
同时,我们也分析了 React 应用中的三种状态:业务状态、交互状态和外部状态,以及从数据流层面区分的全局状态和局部状态。最后根据这些分类,我们对 React 项目什么时候使用 Redux,什么时候混用 React 内建 state 和 Redux 提出了一些建议。
当 React 应用中的状态越来越多,越来越复杂时,你有可能遇到这样的痛点:
通过 props、context 传递状态数据时,时不时会用错数据的类型导致 Bug;
把自己开发的组件给别人用,别人不知道你的组件 props 的数据类型;
当你用别人开发的组件时,虽然有文档,但你发现已经跟现在的版本对不上了;
当你去自己一个月前写的组件里修 Bug 时,实在记不清了,要读上下游的代码或者在浏览器中设断点调试,才能判断出某个 props 的数据类型。
这些痛点归根结底都是因为 JavaScript 是弱类型的语言,变量类型在运行时才能确定,在开发阶段无法指定变量类型。在大中型 React 项目中,引入类型系统是十分必要的。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了在React应用开发中如何充分利用TypeScript进行类型检查。文章首先指出了JavaScript弱类型语言在开发阶段无法指定变量类型所带来的问题,随后详细介绍了TypeScript的强类型特性以及其在避免常见类型相关编程错误方面的优势。接着,文章详细介绍了在React项目中加入TypeScript支持的方法,包括在Create-React-App项目和Vite React项目中的配置步骤。此外,还重点讲解了在React项目中典型的TypeScript用法,包括函数组件与props类型的定义和使用。通过示例代码和详细解释,读者可以了解如何在React项目中利用TypeScript进行类型检查,提高代码的健壮性和可维护性。文章还提到了React数据类型检查的其他可选方案,如PropTypes、Flow和JSDoc,为读者提供了更多选择。最后,文章提出了一些在React项目中使用TS的建议,以及对于强类型的需求程度和开发时间精力之间取得平衡的思考。整体而言,本文为读者提供了全面的TypeScript在React应用开发中的应用指南,帮助读者更好地理解和应用TypeScript的强大功能。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《现代 React Web 开发实战》,新⼈⾸单¥59
《现代 React Web 开发实战》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(4)
- 最新
- 精选
- 恒`∞`真理回答一下第2个问题: 静态类型的好处是开发体验有保障、运行时类型错误少甚至可以完全避免,代价我认为有两个。其一是类型推断能力受限于编译器性能,有时不得不进行显式类型标注,稍显啰嗦;其二是静态类型一定程度上限制了扩展性,维护SemVer库需要格外注意不破坏类型接口。TypeScript算是在二者之间取得了一个不错的平衡,但是在遇到完全没有类型标注或者滥用动态性的JS库时还是会抓瞎。
作者回复: 你好,恒`∞`真理,对你提到的两个代价,我也有相同体会。尤其在DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped) 体量还很小的早期,很多依赖库的类型都要自己来。后来TS的流行造成了马太效应,不少开源库都自己提供了.dts,甚至用TS重写。这也反过来影响了开源库JS代码的写法(比如为了更容易推断TS类型,而避免写过于动态性的代码),这对JS生态有好有坏吧。
2022-11-29归属地:北京 - Faith信TS type和interface的差异 interface可以extends; type再某些场景下会出现 unknown影响类型推导,所以开源使用interface会多于type2022-11-21归属地:广东3
- 36#"TS 是在应用的开发期和编译期产生效果的,能帮开发者减少编程错误,但对运行时没有直接帮助。" 所以,线上表单数据验证不能用 ts2023-02-20归属地:湖北1
- 阿阳请问老师和各位同学,本节思考题的第1题,如何做线上表单的类型验证。平时开发中都是使用现有的组件库,配置一个属性就好了。如何用ts实现,还没想到什么办法。2023-01-13归属地:江苏1
收起评论