(三万字长文)类型即正义:TypeScript 从入门到实践系列,正式完结!
❝
本文由「图雀社区」认证作者 「pftom」 写作而成,感谢作者的优质输出,让我们的技术世界变得更加美好,欢迎加入图雀社区,一起创作优质的免费技术实战教程,予力编程行业发展????
❞
源起
Tim Berners-Lee 于1989年发明了万维网并于1991年对外发布了世界上第一个网页浏览器 WorldWideWeb,从此拉开了 Web 时代的序幕。
1994 年网景公司(Netscape)发布了 Navigator 浏览器 0.9 版本,这是历史上第一个比较成熟的网络浏览器,轰动一时。
1995 年,受雇于 Netscape 的 Brendan Eich 用了十天时间设计出了 JavaScript。之后便开启了浏览器兼容和争夺的至暗时刻,到 1997 年 ECMA 组织开始发布公开标准,JavaScript 即将进入标准化进程。得益于 ECMA 的标准,JavaScript 愈发的强大,并借助 Babel 实现了标准制定和浏览器实现的兼容,使得我们可以写最现代化的代码而不用过多的考虑浏览器兼容性,并且还诞生 Node.js、React Native 等服务器端、移动端的 JavaScript 运作方式,谁也想不到二十年后的今天 JavaScript 似乎印证了 Write Once Run Anywhere 的优势,Brendan Eich 作为 JavaScript 之父,在编程的历史上留下了他的印记。
随着时间的推移,微软发现外部客户在开发大规模 JavaScript 应用的过程中遭遇了语言本身的短板,在 2012 年 10 月,微软发布了首个公开版本的TypeScript,2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScript,当前最新版本为TypeScript 3.9。
TypeScript 是 JavaScript 的严格超集,因此任何 JavaScript 都是合法的 TypeScript(非常像 C 和 Objective-C 的关系)。TypeScript 为 JavaScript 带来了强大的类型系统和对 ES2015的支持,它的编译工具可以运行在任何服务器和任务系统上。类型系统实际上是非常好的文档,增强了编辑器在 「智能提示」,「跳转定义」,「代码补全」 等方向上的功能,并且在编译阶段能发现大部分的错误,对于大型工程的代码可读性和可维护性起到了了不起的作用。
TypeScript 的流行趋势
事实上 TypeScript 拥有活跃的社区,大部分第三方库都有提供 TypeScript[1] 类型定义文件,甚至知名的前端或后端库都完全使用 TypeScript 来进行开发,比如 Google 的 Angular[2],Nest.js[3], 还有一些著名的 UI 组件库,如蚂蚁金服的 Ant Design[4],Google 的 Material Design[5]:
我们在平时工作中实实在在使用的库或框架都使用了 TypeScript 构建或正在调研使用中...
我们可以通过一些数据来了解 TypeScript 的流行趋势:
TypeScript 的优势和收益是什么?
类型系统可在编译阶段发现大部分的错误
类型系统也是一个很直观的编程文档,可以查看任何函数或API的输入输出类型
类型系统增强了编辑器或IDE的功能
TypeScript 可以自动的推导类型
一切 JavaScript 都是合法的 TypeScript 降低了使用成本
TypeScript 拥抱 ES2015 以及 ESNext 草案规范
几乎第三方库都有 TypeScript 类型定义文件
当然,凡事都有两面性,TypeScript 有一定的学习成本,比如:Interfaces,Generics,Enums 等前端工程师不是很熟悉的概念,短期内多少会增加一些开发成本,集成和构建一些库会有一定的工作量。
我的观察
了解到 TypeScript 的优势和流行趋势之后,相比大部分人都跃跃欲试的想学习这门强大的语言了,但是笔者在学习过程中发现市面上的 TypeScript 学习资源少之又少,优质且免费的就更加的少了,笔者在学习过程中主要参考了下面几个资料:
TypeScript 官方文档[6] :现在在 A/B 测试 V2 版,之前的 V1 版本写得比较枯燥,很多人都死在看这个文档上,但是现在的 V2 层次比较分明,在一定程度上缓解了学习的疲劳,不过仅仅对需要对英文好的同学比较友好,如果对自己英文比较自信的同学可以学习和观看 V2 版本的文档[7]。
查阅 React 里面写 TypeScript 的一些技巧:typescript-cheatsheets[8]
阮一峰老师推荐的 TypeScript 入门教程[9],内容比较短小精悍,浅尝辄止。
DefinitedType 社区的维护者 Basarat[10] 写得 TypeScript Deep Dive[11],以及其中文版[12] ,这本书很大而全,但是建议用作 TypeScript 查询手册,不适合学习。
TypeScript 中文网[13],但是很久没更新了(建议不看...)
还有更多...
努力与收获
看上面的资料学习无疑是痛苦的,于是在经过自己的一番广泛查阅资源和学习实践之后,希望自己可以写一个 TypeScript 实战入门系列,帮助更多的想学习 TypeScript 但是找不到门路的小伙伴们快速找到入门的法子,因此有了本系列文章:类型即正义:TypeScript 从入门到实践,它知识凝练而又不失深度,讲解 TypeScript 最最最常用的知识点,并通过动手做一个 React 待办事项小应用来串联讲解这些 TypeScript 知识点。目前一共有五篇文章,整个系列文章写下来一共三万字有余,并且收获了 111 个赞,4845 次阅读,16条评论,希望这系列实战入门文章能够帮助你在学习 TypeScript 的路上走得轻松些。
加星的代码仓库
因为图雀社区所有的实战技术教程都是使用图雀社区自研的开源写作工具:Tuture[14] 写作而成,且都是基于一个项目进行写作的,所以 类型即正义:TypeScript 从入门到实践背后的源码也是经过验证的且可以直接运行的,这也鼓励了很多读者去下载源码,自己跑服务,也因此给仓库点了 Star,在这里感谢你们的鼓励:
仓库地址:https://github.com/tuture-dev/typescript-tea
当然,如果你偏爱 Gitee,那么也可以找到我们的源码:https://gitee.com/tuture/typescript-tea
会总结的人运气都不会太差
为了帮助掘友们更好的学习 TypeScript 开发,整理是一种很好的方式,经过掘友的反馈和建议,图雀社区决定将之前发的文章做一个总结,方便查漏补缺和系统学习,下面会列一个大纲,然后给出对应的摘要,接着给出对应的可视化图数据,展示此文章收获的:阅读、点赞、评论,以及对于的字数,帮助掘友建立一个体系化的同时,还能很方便的了解每篇文章的一个概要和数据详情。
大纲
我们将在下面放上每篇文章的封面、链接和摘要,供读者欣赏:
类型即正义:TypeScript 从入门到实践(序章)[15] :使用 Create-React-App 快速初始化一个 React TypeScript 项目,并使用 Ant Design[16] 组件库来辅助界面编写,使用了 antd V4 的黑暗模式。使得我们可以专注于学习 TypeScript 的核心知识,并快速实践运用在 React 项目里面,而避免一上来就谈 tsconfig.json、TypeScript 编译原理等枯燥、难懂的知识。
类型即正义:TypeScript 从入门到实践(一)[17]:讲解 TypeScript 类型系统,以及枚举和接口的知识,并完成我们 React 待办事项应用的界面和数据准备过程。
类型即正义:TypeScript 从入门到实践(二)[18]:讲解 TypeScript 函数、交叉类型、联合类型、字面量类型和类型守卫等知识,只讲 TypeScript 相比较 JavaScript 的不同,并通过 JavaScript 的形式讲解 TypeScript,接着我们使用学到的知识完成 React 待办事项一些状态修改,函数触发,事件处理等功能逻辑。
类型即正义:TypeScript 从入门到实践(三):类型别名和类[19]:讲解了 TypeScript 中和接口很像的类型别名和类的知识,由表及里的剖析了 TypeScript 类的独特之处,并继续完成 React 待办事项小应用中一些类型的处理以及类组件的编写,并引出了泛型的概念。
类型即正义:TypeScript 从入门到实践(四):5000字长文带你重新认识泛型[20]:写了一整篇文章讲解 TypeScript 泛型,也是 TypeScript 类型编程的基础,并额外讲解了如何从零搭建 TypeScript 的开发环境。
字数总览
文字数据
其中一共写作字数:3.03 万字,在各篇分布如下:
类型即正义:TypeScript 从入门到实践(序章)[21] :2983 字
类型即正义:TypeScript 从入门到实践(一)[22]:8412 字
类型即正义:TypeScript 从入门到实践(二)[23]:6933 字
类型即正义:TypeScript 从入门到实践(三):类型别名和类[24]:6919 字
类型即正义:TypeScript 从入门到实践(四):5000字长文带你重新认识泛型[25]:5752 字
图示数据
图雀酱的话
第一篇是个小插曲,但是后面几篇都很均匀,最高的有 8000 呢✌️
阅读数总览
文字数据
其中一共收获阅读数:4845 次,在各篇分布如下:
类型即正义:TypeScript 从入门到实践(序章)[26] :1155 次
类型即正义:TypeScript 从入门到实践(一)[27]:1376 次
类型即正义:TypeScript 从入门到实践(二)[28]:952 次
类型即正义:TypeScript 从入门到实践(三):类型别名和类[29]:988 次
类型即正义:TypeScript 从入门到实践(四):5000字长文带你重新认识泛型[30]:374 次
图示数据
图雀酱的话
为啥最重要的泛型,阅读却少的可怜????,能不能燥起来!
点赞总览
文字数据
其中一共收获点赞数:111 赞,在各篇分布如下:
类型即正义:TypeScript 从入门到实践(序章)[31] :34 赞
类型即正义:TypeScript 从入门到实践(一)[32]:28 赞
类型即正义:TypeScript 从入门到实践(二)[33]:19 赞
类型即正义:TypeScript 从入门到实践(三):类型别名和类[34]:20 赞
类型即正义:TypeScript 从入门到实践(四):5000字长文带你重新认识泛型[35]:10 赞
图示数据
图雀酱的话
整体获赞还是有点低的,点赞点赞点赞,是我最大的动力????
评论数总览
文字数据
其中一共收获评论数:16 条,在各篇分布如下:
类型即正义:TypeScript 从入门到实践(序章)[36] :0 评论
类型即正义:TypeScript 从入门到实践(一)[37]:2 评论
类型即正义:TypeScript 从入门到实践(二)[38]:5 评论
类型即正义:TypeScript 从入门到实践(三):类型别名和类[39]:9 评论
类型即正义:TypeScript 从入门到实践(四):5000字长文带你重新认识泛型[40]:0 评论
图示数据
图雀酱
难道程序员真的是人狠话不多?评论有点少,想听见你的声音!
总结与展望
这一系列文章通过实战的方式呈现了 TypeScript 最最最常用的一些知识点,时代在变化, JavaScript 可以说是目前为止唯一实现了 Write Once Run Anywhere 的脚本语言,它的热度和趋势长久不衰,但 JavaScript 本身也有其语言的缺陷,也许在未来新的标准会慢慢补齐它,至少现在让我们用 TypeScript 来解决你可能面临的问题吧!
参考资料
TypeScript 百度百科:https://baike.baidu.com/item/typescript/4314718
万物起源-从 JavaScript 到 TypeScript:https://zhuanlan.zhihu.com/p/61345416
草图绘制库:https://github.com/jwilber/roughViz#Scatter
❝
想要学习更多精彩的实战技术教程?来图雀社区[41]逛逛吧。
❞
Reference
[1]
TypeScript: https://github.com/microsoft/TypeScript
[2]
Angular: https://github.com/angular/angular
[3]
Nest.js: https://github.com/nestjs/nest
[4]
Ant Design: https://github.com/ant-design/ant-design
[5]
Material Design: https://github.com/mui-org/material-ui
[6]
TypeScript 官方文档: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
[7]
V2 版本的文档: https://www.staging-typescript.org/docs/handbook/intro.html
[8]
typescript-cheatsheets: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
[9]
TypeScript 入门教程: https://ts.xcatliu.com/
[10]
Basarat: https://github.com/basarat
[11]
TypeScript Deep Dive: https://github.com/basarat/typescript-book/
[12]
中文版: https://jkchao.github.io/typescript-book-chinese/
[13]
TypeScript 中文网: https://www.tslang.cn/
[14]
Tuture: https://github.com/tuture-dev/tuture
[15]
类型即正义:TypeScript 从入门到实践(序章): https://juejin.im/post/5e8a82d2518825737b4ae3e0
[16]
Ant Design: https://ant.design/
[17]
类型即正义:TypeScript 从入门到实践(一): https://juejin.im/post/5e8a831cf265da48046988cb
[18]
类型即正义:TypeScript 从入门到实践(二): https://juejin.im/post/5e8b3153e51d4546f70d0d3c
[19]
类型即正义:TypeScript 从入门到实践(三):类型别名和类: https://juejin.im/post/5e97b3c7518825737e0f88dc
[20]
类型即正义:TypeScript 从入门到实践(四):5000字长文带你重新认识泛型: https://juejin.im/post/5ec2951ce51d454dda7f5dd6
● 类型即正义:TypeScript 从入门到实践(序章)● 类型即正义:TypeScript 从入门到实践(三):类型别名和类● 类型即正义,TypeScript 从入门到实践(四):5000字长文带你重新认识泛型
·END·
图雀社区
汇聚精彩的免费实战教程
关注公众号回复 z 拉学习交流群
喜欢本文,点个“在看”告诉我
(三万字长文)类型即正义:TypeScript 从入门到实践系列,正式完结!相关推荐
- 类型即正义:TypeScript 从入门到实践(序章)
作者:一只图雀 仓库:Github .Gitee 图雀社区主站(首发):图雀社区 博客:掘金.知乎.慕课 公众号:图雀社区 联系我:关注公众号后可以加图雀酱微信哦 原创不易,❤️点赞+评论+收藏 ❤️ ...
- Vue3+TypeScript从入门到精通系列之:泛型接口
Vue3+TypeScript从入门到精通系列之:泛型接口 一.TypeScript的泛型接口代码 二.TypeScript的泛型接口代码转化为js代码 三.泛型接口.js输出如下所示 一.TypeS ...
- Vue3+TypeScript从入门到精通系列之:Try changing the lib compiler option to es2015 or later
Vue3+TypeScript从入门到精通系列之:Try changing the lib compiler option to es2015 or later tsc ./泛型接口.ts tsc编译 ...
- 18个月自学AI,2年写就三万字长文,过来人教你如何掌握这几个AI基础概念
来源:机器之心 本文约30000字,建议阅读10分钟. 这是一篇真正针对初学者的 AI 教程,不只讲概念,还讲概念的底层原理. David Code 有多个身份:他是旅行作家,通晓多国语言,他还是一名 ...
- 重磅综述:三万字长文读懂单细胞RNA测序分析的最佳实践教程 (原理、代码和评述)
原文链接: https://www.embopress.org/doi/10.15252/msb.20188746 主编评语 这篇文章最好的地方不只在于推荐了工具,提供了一套分析流程,更在于详细介绍了 ...
- 【收藏】CSAPP深入理解计算机系统三万字长文解析
CSAPP深入理解计算机系统 文章目录 CSAPP深入理解计算机系统 信息 信息存储 字长 字节序 位运算 位运算符 逻辑运算 移位运算 整数 补码规则 表示范围 整数运算 浮点数 编码 规格化数 阶 ...
- 三万字长文让你彻底掌握 FastAPI
楔子 随着 Python 的发展,与协程相关的 Web 框架也层出不穷,其中最受欢迎的莫过于 FastAPI.相比其它的协程框架,FastAPI 要更加的成熟,社区也更加的活跃. 那么 FastAPI ...
- Python可视化应用实战-三万字长文(建议收藏)matplotlib可视化实例,实操有效
前言 以下是我为大家准备的几个精品专栏,喜欢的小伙伴可自行订阅,你的支持就是我不断更新的动力哟! MATLAB-30天带你从入门到精通 MATLAB深入理解高级教程(附源码) tableau可视化数据 ...
- 女友问粉丝过万如何庆祝,我发万字长文《保姆级大数据入门篇》感恩粉丝们支持,学姐|学妹|学弟|小白看了就懂
2021大数据领域优质创作博客,带你从入门到精通,该博客每天更新,逐渐完善大数据各个知识体系的文章,帮助大家更高效学习. 有对大数据感兴趣的可以关注微信公众号:三帮大数据 目录 粉丝破万了 新星计划申 ...
- 万字长文,一篇文章带你入门Python
注释 Python中用#表示单行注释,#之后的同行的内容都会被注释掉. 很多人学习python,不知道从何学起. 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手. 很多已经做案例 ...
最新文章
- Elasticsearch 100问(上)
- Flask系列06--(中间件)Flask的特殊装饰器 before_request,after_request, errorhandler
- 前端学习(2846):css浮动和定位布局
- 从阿里云数据库入选Gartner谈数据库的演化
- jdk1.6+Maven
- application.properties引用其他文件_企业级SpringBoot应用多个子项目配置文件规划、多环境支持(一)...
- python中文分词与词云画像_使用Python绘制肖像词云
- 维纳滤波python 函数_python实现逆滤波与维纳滤波示例
- xmapp环境搭建注意事项
- 计算机网络之TCP最大连接限制
- iPhone/iPad怎么进入恢复模式?
- 什么是智能制造?如何实现智能制造?
- CYCADA: cycle-consistent adversaial domain adaption阅读笔记
- EChat(简易聊天项目)七、保存聊天记录
- 视频教程-Go语言实战合集-Go语言
- Uncaught ReferenceError: xxx is not defined 解决办法
- 亚马逊ec2 ng 文件服务器,在亚马逊EC2云服务器上装完后访问不了
- 关于什么时候用精灵图什么时候用字体图标
- Mozilla发布最大的人类语音数据集(Common Voice)
- 菲记单词隐藏技能,英语童鞋一定要看
热门文章
- Pyramidal Convolution Rethinking Convolutional Neural Networks for Visual Recognition
- IOC 之深入理解 Spring IoC
- 计算机函数average意思,average函数的功能是计算什么
- python写鼠标宏_win操作(1)-键盘鼠标输入
- 微博之争,没有硝烟的互联网战争
- 在不知道密码情况下卸载企业版360
- html代码入门书记,“seo优化”学习基本的html代码知识(入门级)
- [CF838D]Airplane Arrangements
- 20220525商汤算法岗实习面试经历
- 微信支付详细教程实战