前言:“我们为需要构建和维护大型JavaScript程序以满足他们需求的团队设计了TypeScript。TypeScript可以帮助他们定义软件组件之间的接口,并有助于理解现有JavaScript库的行为在同时,使用TypeScript的团队可以将代码构建到动态加载的模块中以减少命名冲突。TypeScript的可选类型系统使开发人员能够使用一些高效的开发工具和最佳实践:静态检查、基于Symbol的导航、代码完成和代码重构。摘自-TypeScriptLanguageFeatures》基本配置环境:这部分直接开始我们的干货之旅。以下是笔者的亲身实践,图文结合,详细讲解基础知识。开始配置环境的过程。如果你正在使用VsCode,那么作者为你感到高兴,因为这意味着你与作者站在一起。废话不多说,先说干货:看到上图就知道你的Ts环境已经搭建完成,接下来需要撸起袖子写你的第一句话HelloWorld!2.如果你使用其他代码编译器或者使用OSX或Linux操作系统,你可以下载一个NPM模块。如果您不熟悉npm,请不要担心。到目前为止,只知道它是Node包管理的标准。它是Node.js默认的包管理工具。为了使用npm,您需要在开发环境中安装node.js。它可以在Node.js的官方网站上找到,网址为https://node.js.org/...。(写了这么多是想告诉你,不管你用什么样的节点,它已经是无孔不入了。它不再适合您,现在就下载一个吧!)正确的!不要忘记npminstall-gtypescript3。继续在命令行环境输入tsc-init进行初始化,你会发现在根目录下多了一个tsconfig.json文件,里面记录了编译成JS的选项打开这个文件,你会发现主要的选项已经为你设置好了。比较常用的设置是“target”:编译成什么样的规范,一般设置为ES5或者ES2016/2017“outdir”:输出目录“alwaysStrict”:开启严格模式('usestrict')命令下输入代码线。打开VSCode进入目录,按Ctrl+shift+B快捷键进行编译,第一次编译会选择编译模式,如下图:我们这里选择监控模式,所以根据以上几点进行基本配置Ts的任务类型已完成。经过笔者(*中宝)上一段的讲解,不知道给大家讲解了多少。如果还有不明白的地方,可以联系作者本人。类型介绍:一、一个概念:首先,我们了解到TypeScript是JavaScript的超集。TypeScript通过向JavaScript添加可选的静态类型声明,将JavaScript变成一种强类型编程语言。可选的静态类型声明可以约束函数、变量、属性等程序实体,以便编译器和相应的开发工具在开发过程中提供更好的正确性验证和帮助功能。满口我靠,我靠,我靠。我说的,感觉好专业,一个字都听不懂。为了让大家收到最专业的类型解说语句,作者自己从书中的视频学习过程中提取精华,自己重构语句。嘻嘻,你要是不想看就装点,有没有真材实料的?说了这么多,请看下图笔者自己的实际操作:写到这里,很多小伙伴问我你最喜欢Ts的哪一部分。目前:1.强类型特性让程序员可以控制自己和其他开发者。团队成员在代码中表达了他们的意图2.TypeScript类型检测在编译时执行,没有运行时开销。这里温馨提醒一下,let和const关键字在TypeScript1.4中是可以使用的,但前提是编译目标是ECMAScript6以上版本。如果要使用,需要在package.json中手动配置使用。2.接下来最重要的就是我们要讲的类型了。由于本章讲的是类型,所以先带大家了解下Ts的基本类型(这里与JS略有不同,请仔细阅读)。基本类型包括boolean、number、string、array、void和所有用户定义的枚举类型。(这里需要大家理解的重点是,上面提到的所有类型在TS中都是,都是顶层AnyType类型的子类型,any关键字代表的就是这个类型。我们来看看这些原始类型。)以下是我整合的一些内容,基本就到这里了)不知道大家有什么想法吗?(反正我没有),接下来给大家介绍一种关节型(主要是图中的内容)。联合类型用于声明可以存储多种类型的值的变量。在上面的示例中,我们声明了一个变量Lzb,它可以存储一个(字符串)或一组路径(字符串数组)。在例子中,我们也给这个变量赋值,合法地给这个变量赋值字符串和字符串数组。然而,当我们试图给它分配一个数字时会得到一个编译错误,因为联合类型没有将数字声明为它的合法类型。这里给大家介绍一些功能的内容(个人觉得这部分特别重要):再看下图。下面是Ts转JS后的内容。继续看下图:类在ECMAScript6(JavaScript的最新版本)中,增加了基于类的面向对象编程语法。由于TS基于ES6,开发人员今天可以开始使用基于类的面向对象语法。TS编译器会负责将TS代码编译成兼容主流浏览器和平台的JavaScript代码。我们来看一个在TS中定义类的例子:(如下图)简单的说,在上面的例子中,我们一起定义了一个新的类,名字叫Character。这个类有三个成员:一个名为fullname的属性、一个构造函数和一个greet方法。当我们在Ts中声明一个类时,所有的属性和方法默认都是public的。或许你可能已经注意到,在访问对象中(对象内部)的成员时,我们都是在前面加上this操作符,this操作符表示这是一个成员访问操作(嗯,排除了前面的大佬对于一些日常的自命不凡操作,如果你想在类内部定义一个属性,如果你没有在构造函数中给它赋值,属性“fullname”用有道词典的话来说是没有初始化器的,并且在构造函数中没有显式指定。)简单来说就是会报错。别着急,我们还没完(我们使用new运算符构造Character类的实例,会调用该类的构造函数,根据定义初始化实例)注:为了兼容使用ECMAScript3和ECMAScript5,TS中的类将被编译为JavaScript中的函数。函数在学习这部分内容之前,首先要介绍一下我们的函数:函数是任何TypeScript应用程序中的基本功能块,功能非常强大。我们第一次接触函数的概念应该是在数学上。记得当时的解释是:函数是执行特定功能的模块。同样的概念也可以推广到我们的编程中。函数声明和函数表达式:TS中的函数分为显示指定函数名的(具名函数)和不显示指定名的函数(匿名函数)。我们看下图中的代码来详细了解一下。一切都很美!就像上面两个函数一样(好熟悉,好相似),只是它们的行为不同,解释器在代码解释阶段会先执行函数声明,反之,除非函数表达式被赋值。否则不会执行。(嗯,这里我相信我需要再白话解释一下,简单来说,如果你只是一个函数声明,就像图中的第一个函数,你的调用可以发生在前后,但是如果是第二种,会发生变量提升的过程,所以如果你之前调用过,结果会和画红线的图一样。)函数的类型先看下面的截图,我们来解释一下:在上面函数,我们定义了参数名的类型(字符串)和返回值的类型(字符串)。有时我们不仅需要定义函数中元素的类型,还需要定义函数本身的类型。让我们再看看下面的截图:在上面的例子中,我们声明了变量greetUnnamed及其类型。greetUnnamed类型是一个函数,只包含一个名为name的字符串类型参数,调用后返回一个字符串类型的函数。声明变量后,将一个完全符合变量类型的函数赋值给它。我们也可以在同一行声明greetUnnamed的类型并为其赋值一个函数,而不是拆分成两行,比如下面的例子:和上面的例子一样,前面的代码片段也声明了变量greetUnnamed和它的类型.我们也可以在同一行给这个变量赋值一个函数,赋值的函数类型必须和变量类型一致。带有可选参数的函数与JavaScript不同,当调用函数时传递的参数个数或类型不符合函数中定义的参数要求时,TypeScript编译器会报错。让我们用一个代码示例来证明这一点:上面的函数名为Add,包含三个类型为number的参数:LZB、Bar、LZBbar。如果调用这个函数时三个参数都没有传入,会出现编译错误,提示提供的参数与函数声明中的参数不匹配。在某些场景下,我们可能希望在不提供所有参数的情况下调用此函数。TypeScript提供了一个函数可选参数特性,可以帮助增加这个函数的灵活性。这可以在TypeScript中通过将字符附加到函数参数来完成吗?,指定函数参数是可选的。更新之前的函数,将LZBbar参数从必填参数改为可选参数。请看清楚我们把参数LZBbar的名字改成了LZBbar?,检查函数内部是否提供了LZBbar参数。修改后,当我们用两个或三个参数调用此函数时,TypeScript编译器不再抛出错误。值得注意的是,可选参数必须在必需参数列表之后。带默认参数的函数当函数有可选参数时,我们必须检查是否传递了参数(就像前面的例子一样)。在某些情况下,应该为可选参数设置一个默认值。可以使用内联if结构重写Add函数(来自前面的代码片段)。这个函数没有错,但是可以通过为LZBbar参数提供默认值而不是将其标记为可选来提高其可读性。我们只需要在声明函数签名时使用=运算符提供一个默认值,以指定函数参数是可选的。当LZBbar参数未传递给函数时,TypeScript编译器将在JavaScript输出中生成一个if结构以设置默认值。带有剩余参数的函数我们已经看到了如何使用可选参数和默认参数来改进函数调用。让我们回到前面的例子:我们在前面的学习过程中已经学会了如何调用Add函数并传递两三个参数,但是如果我们想让其他开发者传递四五个参数呢?必须添加两个额外的默认或可选参数。如果你想让开发者传递任意数量的参数怎么办?解决方案是使用rest参数。剩下的参数语法允许将无限数量的参数表示为数组(这种方式与原生JS中的arguments非常相似):看上面的代码片段,我们用参数LZB替换了之前的参数。您会注意到参数LZB前面有一个带三个点的省略号。rest参数必须包含数组类型,否则会出现编译错误。我们现在可以使用任意数量的参数调用Add函数:虽然参数数量没有具体限制,但理论上可以取数值类型的最大值。但实际上,这取决于函数的调用方式。JavaScript函数有一个名为arguments的内置对象,可以通过arguments局部变量访问它。arguments变量是一个非常像数组的对象,它包含调用函数时的所有参数。(如果我们检查JavaScript输出,TypeScript会迭代arguments参数以将所有参数添加到foo变量:)对于函数参数的这种额外遍历存在一些争论。虽然很难想象这种额外的遍历是否会成为性能瓶颈,但如果您认为这可能是您的应用程序的性能问题,请考虑不使用剩余参数,而是仅使用数组作为函数参数。上面的代码只有一个包含数字类型的数组。调用API会和剩下的参数有些不同,但是可以去掉遍历函数参数列表的操作:函数作用域一些低级语言(比如C语言)包括低级内存管理特性。在抽象层次更高的编程语言(如TypeScript)中,变量创建时分配内存,不用时清理。这种清理内存的过程称为垃圾收集,由JavaScript运行时的垃圾收集器实现。
