帮你培养类型思维TypeScript(一)
前言:作为一名程序员,相信你已经熟练掌握了JavaScript语言,由于其应用领域非常的广泛,所以算得上是每一个程序员必须要掌握的语言。
但是JavaScript自身的缺点,相信每一个程序员也是深有体会,约束上的缺陷会使项目存在极大的安全隐患,所以我们经常会说JavaScript不适合开发大型项目。
那么要如何解决这个问题呢?
是否有更好的语言可以弥补JavaScript的缺陷?
本文接下来以JavaScript的痛点展开,总结了一些由类型引发的相关问题,顺便带领大家全面认识TypeScrip。
TypeScript(一)
TypeScript培养类型思维
一. JavaScript的痛点
我始终坚信:任何新技术的出现都是为了解决之前某个技术的痛点。
1.1. 优秀的JavaScriptJavaScript是一门优秀的编程语言吗?·每个人可能观点并不完全一致,但是从很多角度来看,JavaScript是一门非常优秀的编程语言。·而且,可以说在很长一段时间内这个语言不会被代替,并且会在更多的领域被大家广泛使用。著名的Atwood定律:·Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律。·any application that can be written in JavaScript, will eventually be written in JavaScript.·任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现。·其实我们已经看到了,至少目前JavaScript在浏览器端依然无可替代,并且在服务端(Nodejs)也在备广泛的应用。优秀的JavaScript没有缺点吗?·其实上由于各种历史因素,JavaScript语言本身存在很多的缺点;·比如ES5以及之前的使用的var关键字关于作用域的问题;·比如最初JavaScript设计的数组类型并不是连续的内存空间;·比如直到今天JavaScript也没有加入类型检测这一机制;JavaScript正在慢慢变好·不可否认的是,JavaScript正在慢慢变得越来越好,无论是从底层设计还是应用层面。·ES6、7、8等的推出,每次都会让这门语言更加现代、更加安全、更加方便。·但是知道今天,JavaScript在类型检测上依然是毫无进展(为什么类型检测如此重要,我后面会聊到)。
1.2. 类型引发的问题首先你需要知道,编程开发中我们有一个共识:错误出现的越早越好·能在写代码的时候发现错误,就不要在代码编译时再发现(IDE的优势就是在代码编写过程中帮助我们发现错误)。·能在代码编译期间发现错误,就不要在代码运行期间再发现(类型检测就可以很好的帮助我们做到这一点)。·能在开发阶段发现错误,就不要在测试期间发现错误,能在测试期间发现错误,就不要在上线后发现错误。现在我们想探究的就是如何在 代码编译期间 发现代码的错误:·JavaScript可以做到吗?不可以,我们来看下面这段经常可能出现的代码问题。 function getLength(str) { return str.length;} console.log(“1.正在的代码执行”);console.log(“2.开始函数”);getLength(“abc”); // 正确的调用getLength(); // 错误的调用(IDE并不会报错) // 当上面的代码报错后, 后续所有的代码都无法继续正常执行了console.log(“3.调用结束”);在浏览器下的运行结果如下:这是我们一个非常常见的错误:·这个错误很大的原因就是因为JavaScript没有对我们传入的参数进行任何的限制,只能等到运行期间才发现这个错误;·并且当这个错误产生时,会影响后续代码的继续执行,也就是整个项目都因为一个小小的错误而深入崩溃;Uncaught TypeError: Cannot read property ‘length’ of undefined当然,你可能会想:我怎么可能犯这样低级的错误呢?·当我们写像我们上面这样的简单的demo时,这样的错误很容易避免,并且当出现错误时,也很容易检查出来;·但是当我们开发一个大型项目时呢?你能保证自己一定不会出现这样的问题吗?而且如果我们是调用别人的类库,又如何知道让我们传入的到底是什么样的参数呢?但是,如果我们可以给JavaScript加上很多限制,在开发中就可以很好的避免这样的问题了:·比如我们的getLength函数中str是一个必传的类型,没有调用者没有传编译期间就会报错;·比如我们要求它的必须是一个String类型,传入其他类型就直接报错;·那么就可以知道很多的错误问题在编译期间就被发现,而不是等到运行时再去发现和修改;
1.3. 类型思维的缺失·我们已经简单体会到没有类型检查带来的一些问题,JavaScript因为从设计之初就没有考虑类型的约束问题,所以造成了前端开发人员关于类型思维的缺失:·前端开发人员通常不关心变量或者参数是什么类型的,如果在必须确定类型时,我们往往需要使用各种判断验证;·从其他方向转到前端的人员,也会因为没有类型约束,而总是担心自己的代码不安全,不够健壮;·所以我们经常会说JavaScript不适合开发大型项目,因为当项目一旦庞大起来,这种宽松的类型约束会带来非常多的安全隐患,多人员开发它们之间也没有良好的类型契约。·比如当我们去实现一个核心类库时,如果没有类型约束,那么需要对别人传入的参数进行各种验证来保证我们代码的健壮性;·比如我们去调用别人的函数,对方没有对函数进行任何的注释,我们只能去看里面的逻辑来理解这个函数需要传入什么参数,返回值是什么类型。·为了弥补JavaScript类型约束上的缺陷,增加类型约束,很多公司推出了自己的方案:·2014年,Facebook推出了flow来对JavaScript进行类型检查;·同年,Microsoft微软也推出了TypeScript1.0版本;·他们都致力于为JavaScript提供类型检查;·而现在,无疑TypeScript已经完全胜出:·Vue2.x的时候采用的就是flow来做类型检查;·Vue3.x已经全线转向TypeScript,98.3%使用TypeScript进行了重构;·而Angular在很早期就使用TypeScript进行了项目重构并且需要使用TypeScript来进行开发;·而甚至Facebook公司一些自己的产品也在使用TypeScript;·学习TypeScript不仅仅可以为我们的代码增加类型约束,而且可以培养我们前端程序员具备类型思维。·下面就让我们今天的主角TypeScript隆重登场吧!
二. 邂逅TypeScript
2.1. 什么是TypeScript虽然我们已经知道TypeScript是干什么的了,也知道它解决了什么样的问题,但是我们还是需要全面的来认识一下TypeScript到底是什么?我们来看一下TypeScript在GitHub和官方上对自己的定义: GitHub说法:TypeScript is a superset of JavaScript that compiles to clean JavaScript output.TypeScript官网:TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.翻译一下:TypeScript是拥有类型的JavaScript超集,它可以编译成普通、干净、完整的JavaScript代码。 怎么理解上面的话呢?·我们可以将TypeScript理解成加强版的JavaScript。·JavaScript所拥有的特性,TypeScript全部都是支持的,并且它紧随ECMAScript的标准,所以ES6、ES7、ES8等新语法标准,它都是支持的;·并且在语言层面上,不仅仅增加了类型约束,而且包括一些语法的扩展,比如枚举类型(Enum)、元组类型(Tuple)等;·TypeScript在实现新特性的同时,总是保持和ES标准的同步甚至是领先;·并且TypeScript最终会被编译成JavaScript代码,所以你并不需要担心它的兼容性问题,在编译时也不需要借助于Babel这样的工具;所以,我们可以把TypeScript理解成一身神装的JavaScript,不仅让JavaScript更加安全,而且给它带来了诸多好用的装备特效;
2.2. TypeScript的特点官方对TypeScript有几段特点的描述,我觉得非常到位(虽然有些官方,了解一下),我们一起来分享一下:始于JavaScript,归于JavaScript·TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码,包括流行的JavaScript库,并从JavaScript代码中调用TypeScript代码。··TypeScript可以编译出纯净、 简洁的JavaScript代码,并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3(或更高版本)的JavaScript引擎中。·TypeScript是一个强大的工具,用于构建大型项目·类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。··类型是可选的,类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为。·拥有先进的 JavaScript·TypeScript提供最新的和不断发展的JavaScript特性,包括那些来自2015年的ECMAScript和未来的提案中的特性,比如异步功能和Decorators,以帮助建立健壮的组件。··这些特性为高可信应用程序开发时是可用的,但是会被编译成简洁的ECMAScript3(或更新版本)的JavaScript。·正是因为有这些特性,TypeScript目前已经在很多地方被应用:·包括我们前面提到的Vue3和Angular已经使用TypeScript进行重构;·vue3源码 angular源码 ·包括Vue3以后的开发模式必然会和TypeScript更加切合,大家也更多的需要使用TypeScript来编写代码;·包括目前已经变成最流行的编辑器VSCode也是使用TypeScript来完成的··包括在React中已经使用的ant-design的UI库,也大量使用TypeScript来编写: ant-design源码·包括小程序开发,也是支持TypeScript的 小程序开发2.3. 体验TypeScript本来想在这个位置放上一个体验TypeScript的程序,但是涉及到过多TypeScript的安装流程和vscode的配置信息。所以,我打算在下一篇中专门讲解这部分的内容,包括使用webpack搭建一个可以自动测试TypeScript代码的环境。So,稍安勿躁,这一个章节我们就和TypeScript有一个简单的邂逅就好,后面再进行深入了解。三. 前端学不动系列3.1. 前端开发者的难在之前的Flutter文章中,我说到一个话题,大前端是一群最能或者说最需要折腾的开发者:·客户端开发者:从Android到iOS,或者从iOS到Android,到RN,甚至现在越来越多的客户端开发者接触前端相关知识(Vue、React、Angular、小程序);·前端开发者:从jQuery到AngularJS,到三大框架并行:Vue、React、Angular,还有小程序,甚至现在也要接触客户端开发(比如RN、Flutter);·目前又面临着不仅仅学习ES的特性,还要学习TypeScript;·Vue3马上也会到来,又必须学习Vue3新特性;大前端开发就是,不像服务器一样可能几年甚至几十年还是那一套的东西。前端新技术会层出不穷。但是每一样技术的出现都会让惊喜,因为他必然是解决了之前技术的某一个痛点的,而TypeScript真是解决了JavaScript存在的很多设计缺陷,尤其是关于类型检测的。并且从开发者长远的角度来看,学习TypeScript有助于我们前端程序员培养 类型思维,这种思维方式对于完成大型项目尤为重要。我也会更新一个TypeScript的系列文章,带着大家一起来学习TypeScript,并且培养大家可以形成类型思维。3.2. 解除心中的疑惑回到我们开篇提出的一些疑惑:TypeScript到底是什么?为什么每个人都在说TypeScript怎么怎么好,到底好在哪里?Angular、Vue3接连使用TypeScript进行了重构是否意味着我们必须掌握TypeScript,它们又为什么要选择TypeScript?我需要什么样的基础才能学会或者说学好TypeScript呢?
以上就是我的干货分享和一些分享计划,后面也会陆续在平台更新,持续关注我,带你一起进阶打怪!
感觉意犹未尽还想学的朋友,想获取更多技能提升秘籍,欢迎加微信:19950277730,我在这里为你随时解答。这里有很多如 iOS、数据结构与算法等编程技巧的免费视频和学习资料。
从下一篇开始,就让我们把TypeScript环境搭建好,然后开始正式学习它吧!
帮你培养类型思维TypeScript(一)的更多相关文章
- “类型思维”之Typescript,你掌握了吗?
(一)背景 JavaScript是一门动态弱类型语言 对变量的类型非常宽容 而且不会在这些变量和它们的调用者之间建立结构化的契约. 试想有这么几个场景: 1: 你调用一个别人写的函数,但是这个人没有写 ...
- java编程思想-枚举类型思维导图
- 与TypeScript的一场美丽邂逅
TypeScript(一)前言:当你点开这篇文章时,我相信你已经在很多地方都已经听说过或者见过TypeScript了.但是可能对TypeScript依然有很多问号:TypeScript到底是什么?为什 ...
- 初始TypeScript
什么是TypeScript? TypeScript是拥有类型系统的JavaScript的超集,可以编译成纯JavaScript: 1.类型检查:TS会在编译代码时进行严格的静态类型检查,这意味着可以在 ...
- JavaScript的这个缺陷,让多少程序员为之抓狂?
相信提到JavaScript语言,每一个程序员的心理状态都是不一样的,有的对此深恶痛绝,有的又觉得其可圈可点,造成这种两级分化态度的原因还是由于其自身类型约束上的缺陷,直到现如今依旧无法解决. 本文由 ...
- GitHub 热点速览 Vol.18:刷 LeetCode 的正确姿势
作者:HelloGitHub-小鱼干 摘要:找对路子,事半功倍,正如本周 GitHub Trending #刷 LeetCode# 主题想表达的那般,正确的学习姿势方能让人走得更远,走进大厂
- TypeScript 高级类型 接口(interface)
在代码的实现或者调用上能设定一定的限制和规范,就像契约一样.通常,我们把这种契约称为接口. TypeScript的核心原则之一是对值所具有的结构进行类型检查. 有时称为“鸭式辨型法”或“结构性子类型化 ...
- 用 F# 手写 TypeScript 转 C# 类型绑定生成器
前言 我们经常会遇到这样的事情:有时候我们找到了一个库,但是这个库是用 TypeScript 写的,但是我们想在 C# 调用,于是我们需要设法将原来的 TypeScript 类型声明翻译成 C# 的代 ...
- TypeScript 素描-基础类型
博文读自 TypeScript 官方文档而来,不具有学习性,仅是本人学习时记录以供日后翻阅 ,有学习TypeScript的朋友还请去看更为详细的官方文档 TypeScript官网文档中的基础类型, T ...
随机推荐
- 9.11 myl模拟赛
9.11 myl 模拟赛 100 + 100 + 0 第一题耗费了太多的时间,导致最后一题没有时间想,直接去写了暴力,而且出题人没有给暴力分.... Problem 1. superman [题目描述 ...
- UOJ426. 【集训队作业2018】石像 [状压DP,min_25筛]
UOJ 思路 (以下思路是口胡,但正确性大概没有问题.) 刚学min_25筛的时候被麦老大劝来做这题? 结果发现这题是个垃圾二合一?? 简单推一下式子可以得到答案就是这个: \[ \sum_{T=1} ...
- 本地Windows远程桌面连接阿里云Ubuntu服务器
本地Windows远程桌面连接阿里云Ubuntu 16.04服务器: 1.目的:希望通过本地的Windows远程桌面连接到阿里云的Ubuntu服务器,通过远程桌面图形界面的方式操作服务器. 2.条件: ...
- mac clion c/c++环境配置
下载安装:https://www.cnblogs.com/sea-stream/p/11220036.html 切换语言:https://www.cnblogs.com/sea-stream/p/11 ...
- 用sublime3编写运行16位汇编程序_详细教程
最近需要学8086汇编,课堂教学竟然是PPT看代码,然而不运行程序是没法学编程的.网上的教程有很多坑点,摸索出了正确的步骤. 1.安装sublime3.安装MASM32.64位系统安装DOSBOX(因 ...
- org.postgresql.util.PSQLException:致命:抱歉,已经有太多客户了(org.postgresql.util.PSQLException: FATAL: sorry, too many clients already)
我正在尝试连接到Postgresql数据库,我收到以下错误: 错误:org.postgresql.util. PSQLException:致命:抱歉,已经有太多客户 错误是什么意思,我该如何解决? 我 ...
- Audit(二)--清理Audit数据
(一) 概述 Audit的数据主要存储在sys.aud$表中,该表默认位于system表空间中,我们根据需求,将该表移到了sysaux表空间中.由于审计数据量较大,需要经常关注sysaux表空间的使用 ...
- input type color
<input type="color"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input ...
- xhr.js:108 Refused to set unsafe header "Cookie"
https://stackoverflow.com/questions/7210507/ajax-post-error-refused-to-set-unsafe-header-connection/ ...
- Flutter -------- Drawer侧滑
侧滑菜单在安卓App里面非常常见 抽屉通常与Scaffold.drawer属性一起使用.抽屉的子项通常是ListView,其第一个子项是DrawerHeader ,它显示有关当前用户的状态信息.其余的 ...