帮你培养类型思惟TypeScript(一)

时间 2019-11-25

原文原文链接

TypeScript培养类型思惟前言：当你点开这篇文章时，我相信你已经在不少地方都已经据说过或者见过TypeScript了。可是可能对TypeScript依然有不少问号：TypeScript究竟是什么？为何每一个人都在说TypeScript怎么怎么好，到底好在哪里？Angular、Vue3接连使用TypeScript进行了重构是否意味着咱们必须掌握TypeScript，它们又为何要选择TypeScript？我须要什么样的基础才能学会或者说学好TypeScript呢？没有关系，在这个章节中咱们就来解答上面的疑惑，而且我但愿你们学完这个章节能够对一个概念有深刻的理解，就是类型思惟。不着急，下面就让咱们和TypeScript有一场美丽的邂逅~前端

一. JavaScript的痛点我始终坚信：任何新技术的出现都是为了解决以前某个技术的痛点。vue

1.1. 优秀的JavaScript JavaScript是一门优秀的编程语言吗？ 每一个人可能观点并不彻底一致，可是从不少角度来看，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正在慢慢变得愈来愈好，不管是从底层设计仍是应用层面。 ES六、七、8等的推出，每次都会让这门语言更加现代、更加安全、更加方便。 可是知道今天，JavaScript在类型检测上依然是毫无进展（为何类型检测如此重要，我后面会聊到）。 1.2. 类型引起的问题首先你须要知道，编程开发中咱们有一个共识：错误出现的越早越好 能在写代码的时候发现错误，就不要在代码编译时再发现（IDE的优点就是在代码编写过程当中帮助咱们发现错误）。 能在代码编译期间发现错误，就不要在代码运行期间再发现（类型检测就能够很好的帮助咱们作到这一点）。 能在开发阶段发现错误，就不要在测试期间发现错误，能在测试期间发现错误，就不要在上线后发现错误。如今咱们想探究的就是如何在代码编译期间发现代码的错误： JavaScript能够作到吗？不能够，咱们来看下面这段常常可能出现的代码问题。webpack

function getLength(str) { return str.length; }程序员

console.log("1.正在的代码执行"); console.log("2.开始函数"); getLength("abc"); // 正确的调用 getLength(); // 错误的调用(IDE并不会报错)web

// 当上面的代码报错后, 后续全部的代码都没法继续正常执行了 console.log("3.调用结束"); 算法

image01

在浏览器下的运行结果以下：编程

image02 这是咱们一个很是常见的错误： 这个错误很大的缘由就是由于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的标准，因此ES六、ES七、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进行重构；数组

image03  vue3源码

image04

angular源码浏览器

包括Vue3之后的开发模式必然会和TypeScript更加切合，你们也更多的须要使用TypeScript来编写代码； 包括目前已经变成最流行的编辑器VSCode也是使用TypeScript来完成的 

image05

包括在React中已经使用的ant-design的UI库，也大量使用TypeScript来编写：

image06

ant-design源码 包括小程序开发，也是支持TypeScript的

image07

小程序开发 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新特性；大前端开发就是，不像服务器同样可能几年甚至几十年仍是那一套的东西。前端新技术会层出不穷。

image08 可是每同样技术的出现都会让惊喜，由于他必然是解决了以前技术的某一个痛点的，而TypeScript真是解决了JavaScript存在的不少设计缺陷，尤为是关于类型检测的。而且从开发者长远的角度来看，学习TypeScript有助于咱们前端程序员培养类型思惟，这种思惟方式对于完成大型项目尤其重要。我也会更新一个TypeScript的系列文章，带着你们一块儿来学习TypeScript，而且培养你们能够造成类型思惟。 3.2. 解除心中的疑惑回到咱们开篇提出的一些疑惑： TypeScript究竟是什么？为何每一个人都在说TypeScript怎么怎么好，到底好在哪里？Angular、Vue3接连使用TypeScript进行了重构是否意味着咱们必须掌握TypeScript，它们又为何要选择TypeScript？我须要什么样的基础才能学会或者说学好TypeScript呢？

看完文章，相信对于上面的问题，你内心应该已经有了答案，以后也会更新其余技术文章，如：TypeScript、React、Node、数据结构与算法等等，也会更新一些本身的学习心得等，欢迎你们添加微信：19950277730，获取更多干货分享及学习资源。