现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

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
立即购买
登录 后留言

全部留言(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会多于type
    2022-11-21归属地:广东
    3
  • 36#
    "TS 是在应用的开发期和编译期产生效果的,能帮开发者减少编程错误,但对运行时没有直接帮助。" 所以,线上表单数据验证不能用 ts
    2023-02-20归属地:湖北
    1
  • 阿阳
    请问老师和各位同学,本节思考题的第1题,如何做线上表单的类型验证。平时开发中都是使用现有的组件库,配置一个属性就好了。如何用ts实现,还没想到什么办法。
    2023-01-13归属地:江苏
    1
收起评论
显示
设置
留言
4
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部