如何学会TypeScript.docx
- 文档编号:12281106
- 上传时间:2023-04-17
- 格式:DOCX
- 页数:19
- 大小:22.29KB
如何学会TypeScript.docx
《如何学会TypeScript.docx》由会员分享,可在线阅读,更多相关《如何学会TypeScript.docx(19页珍藏版)》请在冰豆网上搜索。
如何学会TypeScript
今天我们来看一看TypeScript,它是一种可以编译成JavaScript的编程语言,是为构建大型复杂应用程序的开发者们而设计的。
它继承了许多语言的编程思想,比如C#和Java,并且相对于宽松自由式的JavaScript,它添加了更多的规则和约束。
这个教程适用于相当精通JavaScript,但刚接触TypeScript的开发者们。
本教程涵盖了大部分的基础知识和主要特性,同时包含了许多带有注释的例子,来帮助你学习这门语言。
让我们开始吧!
使用TypeScript的好处
JavaScript已经很棒了,你或许会怀疑,我真的需要学习TypeScript吗?
从技术层面上来说,成为一位出色的开发者确实不需要学习TypeScript,大多数人没有学习TypeScript也做的很好。
但是,工作中使用TypeScript确实有许多好处:
基于静态类型,用TypeScript编辑代码有更高的预测性,更易纠错。
由于模块,命名空间和强大的面向对象编程支持,使构建大型复杂应用程序的代码库更加容易。
TypeScript在编译为JavaScript的过程中,在它到达运行时间前可以捕获所有类型的错误,并中断它们的执行。
即将到来的Angular2框架就是用TypeScript编写的,同时推荐开发人员在项目中也使用这种语言。
(上述原因中的)最后一点,实际上是对于很多开发者们来说最重要的一点,也是使他们对TypeScript产生兴趣的主要原因。
Angular2是现在最热门的框架之一,尽管开发者们可以一起使用常规的JavaScript,但是大部分的教程和例子都是用TypeScript写的。
随着Angular2逐渐扩展自己的社区,越来越多的人将会选择TypeScript。
ImageofTypeScript
最近TypeScript的人气上升趋势,数据来源于GoogleTrends。
安装TypeScript
该教程需要Node.js和Npm。
如果没有安装请点击这里。
安装TypeScript最简单的方式就是通过npm。
使用以下命令行,可以全局安装TypeScript包,然后就可以在所有项目中使用TypeScript编译器了:
1
npminstall-gtypescript
打开终端然后运行tsc-v命令来查看是否正确安装了TypeScript.
1
2
3
tsc-v
Version1.8.10
支持TypeScript的文本编辑器
TypeScript是开源的项目,由微软开发和维护,因此最初只有微软的VisualStudio支持。
现在,出现了更多本身支持或者通过插件支持TypeScript语法、智能提示、纠错、甚至是内置编译器的文本编辑器和IDE。
VisualStudioCode–微软另外一个轻量级的开源代码编辑器。
内置支持TypeScript。
SublimeText的官方免费插件。
WebStorm的最新版本带有内置支持。
其他包括Vim,Atom,Emacs等。
编译成JavaScript
TypeScript是写在.ts文件(或者JSX的.tsx)里,不能直接在浏览器端运行,需要首先转译为vanilla.js。
这个编译的过程可以有多种实现方式:
在终端上运行前面提到的命令行工具tsc。
直接在VisualStudio或者其他IDE和文本编辑器上(操作)。
使用自动化构建工具,例如gulp。
我们发现第一个方法是最简单的,对于初学者也是最容易接受的,因此我们将在教程中使用该方法。
下面的命令行把TypeScript文件main.ts编译为JavaScript版本的main.js。
如果main.js已经存在的话会被覆盖。
1
tscmain.ts
也可以通过列出所有的文件或者使用通配符来一次编译多个文件:
1
2
3
4
5
6
7
#Willresultinseparate.jsfiles:
main.jsworker.js.
tscmain.tsworker.ts
#Compilesall.tsfilesinthecurrentfolder.DoesNOTworkrecursively.
tsc*.ts
有更改的时候也可以使用–watch来自动编译成TypeScript文件:
1
2
#Initializesawatcherprocessthatwillkeepmain.jsuptodate.
tscmain.ts--watch
更高级的TypeScript用户也可以创建一个tsconfig.json文件,包含多种构建设置。
因为配置文件在某种程度上是可以自动化进程的,所以在有许多.ts文件的大型项目中有配置文件是很方便的。
可以在这里阅读到更多关于tsconfig.json的TypeScript文档。
静态类型
TypeScript一个很独特的特征是支持静态类型。
意思就是可以声明变量的类型,(因此)编译器就可以确保赋值时不会产生类型错误。
如果省略了类型声明,TypeScript将会从代码中自动推测出正确的类型。
这有个例子。
任意变量,函数自变量或者返回值在初始化时都可以定义自己的类型。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
varburger:
string='hamburger',//String
calories:
number=300,//Numeric
tasty:
boolean=true;//Boolean
//Alternatively,youcanomitthetypedeclaration:
//varburger='hamburger';
//Thefunctionexpectsastringandaninteger.
//Itdoesn'treturnanythingsothetypeofthefunctionitselfisvoid.
functionspeak(food:
string,energy:
number):
void{
console.log("Our"+food+"has"+energy+"calories.");
}
speak(burger,calories);
因为JavaScript是弱类型语言(即不声明变量类型),因此TypeScript编译为JavaScript时,(变量类型的声明)全部被移除:
1
2
3
4
5
6
7
8
9
10
11
//JavaScriptcodefromtheaboveTSexample.
varburger='hamburger',
calories=300,
tasty=true;
functionspeak(food,energy){
console.log("Our"+food+"has"+energy+"calories.");
}
speak(burger,calories);
然而,如果我们试着输入非法的语句,tsc会警告代码里有错误。
例如:
1
2
//Thegiventypeisboolean,theprovidedvalueisastring.
vartasty:
boolean="Ihaven'ttriedityet";
1
main.ts(1,5):
errorTS2322:
Type'string'isnotassignabletotype'boolean'.
如果传入错误的函数自变量也会发出警告:
1
2
3
4
5
6
functionspeak(food:
string,energy:
number):
void{
console.log("Our"+food+"has"+energy+"calories.");
}
//Argumentsdon'tmatchthefunctionparameters.
speak("tripplecheesburger","atonof");
1
main.ts(5,30):
errorTS2345:
Argumentoftype'string'isnotassignabletoparameteroftype'number'.
以下是一些最常用的数据类型:
Number(数值类型)–所有数字都是数值类型的,无论是整数、浮点型或者其他数值类型都相同。
String(字符串类型)–文本类型,就如vanillaJS字符串一样可以使用单引号或者双引号。
Boolean(布尔类型)–true或者false,用0和1会造成编译错误。
Any(任意类型)–该类型的变量可以设定为字符串类型,数值类型或者任何其他类型。
Arrays(数组类型)–有两种语法:
my_arr:
number[];或者my_arr:
Array
Void(空类型)-用在不返回任何值的函数中。
可以到官方的TypeScript文档查看所有变量类型列表–点击这里。
Interfaces接口
接口通常会根据一个对象是否符合某种特定结构来进行类型检查。
通过定义一个接口我们可以命名一个特殊的组合变量,确保它们会一直一起运行。
当转译成JavaScript时,接口会消失–它们唯一的目的是在开发阶段里起到辅助的作用。
在下面的例子中我们定义了一个简单的接口来对一个函数自变量进行类型检查:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//HerewedefineourFoodinterface,itsproperties,andtheirtypes.
interfaceFood{
name:
string;
calories:
number;
}
//WetellourfunctiontoexpectanobjectthatfulfillstheFoodinterface.
//Thiswayweknowthatthepropertiesweneedwillalwaysbeavailable.
functionspeak(food:
Food):
void{
console.log("Our"+food.name+"has"+food.calories+"calories.");
}
//WedefineanobjectthathasallofthepropertiestheFoodinterfaceexpects.
//Noticethattypeswillbeinferredautomatically.
varice_cream={
name:
"icecream",
calories:
200
}
speak(ice_cream);
属性的顺序并不重要。
我们只需必要的属性存在并且是正确的类型。
如果哪里有遗漏,类型错误,或者命名不同的话,编译器都会报警告信息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interfaceFood{
name:
string;
calories:
number;
}
functionspeak(food:
Food):
void{
console.log("Our"+food.name+"has"+food.calories+"grams.");
}
//We'vemadeadeliberatemistakeandnameismisspelledasnmae.
varice_cream={
nmae:
"icecream",
calories:
200
}
speak(ice_cream);
1
2
3
main.ts(16,7):
errorTS2345:
Argumentoftype'{nmae:
string;calories:
number;}
isnotassignabletoparameteroftype'Food'.
Property'name'ismissingintype'{nmae:
string;calories:
number;}'.
这只是入门指南,所以我们并不准备介绍更多关于接口的细节。
不过,有很多没有提及到的地方,我们推荐查看TypeScript文档–点击这里。
类
在搭建大型规模的应用程序时,尤其是在Java或C#当中,许多开发者会优先选择面向对象编程。
TypeScript提供一个类系统,和Java、C#中的非常相似,包括了继承,抽象类,接口实现,setters/getters方法等。
值得一提的是由于最新的JavaScript更新(ECMAScript2015),这些类对于vanillaJS来说是原生的,并且在没有TypeScript的情况下也可以使用。
这两种实现方式非常相似但是也有不同的地方,TypeScript更加严格一些。
继续上面的food的例子,这里有一个简单的TypeScript类:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
classMenu{
//Ourproperties:
//Bydefaulttheyarepublic,butcanalsobeprivateorprotected.
items:
Array
pages:
number;//Howmanypageswillthemenube,anumber.
//Astraightforwardconstructor.
constructor(item_list:
Array
number){
//Thethiskeywordismandatory.
this.items=item_list;
this.pages=total_pages;
}
//Methods
list():
void{
console.log("Ourmenufortoday:
");
for(vari=0;i console.log(this.items[i]); } } } //CreateanewinstanceoftheMenuclass. varsundayMenu=newMenu(["pancakes","waffles","orangejuice"],1); //Callthelistmethod. sundayMenu.list(); 只要写过一点Java或者C#,就会发现TypeScript和它们在语法上非常相似。 继承也是一样: classHappyMealextendsMenu{ //Propertiesareinherited //Anewconstructorhastobedefined. constructor(item_list: Array number){ //Inthiscasewewanttheexactsameconstructorastheparentclass(Menu), //Toautomaticallycopyitwecancallsuper()-areferencetotheparent'sconstructor. super(item_list,total_pages); } //Justliketheproperties,methodsareinheritedfromtheparent. //However,wewanttooverridethelist()functionsoweredefineit. list(): void{ console.log("Ourspecialmenuforchildren: "); for(vari=0;i console.log(this.items[i]); } } } //CreateanewinstanceoftheHappyMealclass. varmenu_for_children=newHappyMeal(["candy","drink","toy"],1); //Thistimethelogmessagewillbeginwiththespecialintroduction. menu_for_children.list(); 更深入了解类,可以阅读TypeScript文档–点击这里。 泛型 泛型(Generics)是允许同一个函数接受不同类型参数的一种模板。 相比于使用any类型,使用泛型来创建可复用的组件要更好,因为泛型会保留参数类型。 一段简单的脚本例子,传入一个参数,返回一个包含了同样参数的数组。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //The //Whenwecallthefunction,everyinstanceofTwillbereplacedwiththeactualprovidedtype. //ReceivesoneargumentoftypeT, //ReturnsanarrayoftypeT. functiongenericFunc T): T[]{ vararrayOfT: T[]=[];//CreateemptyarrayoftypeT. arrayOfT.push(argument);//Push,nowarrayOfT=[argument]. returnarrayOfT; } vararrayFromString=genericFunc console.log(arrayFromString[0]);//"beep" console.log(typeofarrayFromString[0])//String vararrayFromNumber=genericFunc(42); console.log(arrayFromNumber[0]);//42 console.log(typeofarrayFromNumber[0])//number 第一次调用函数的时候,我们将类型手动设置成字符串。 第二次及以后再次调用的时候就不必这样做了,因为编译器会判断传递过什么参数并且自动决定哪种类型最适合。 虽然不是强制性的,但是由于编译器在众多复杂环境中确定正确类型的时候可能会失败,所以每次都传入类型是好的做法。 TypeScript文档里包含了一些比较新的例子,包括泛型类,泛型类与接口绑定等等,更多请点击这里。 在开发大型应用时,另一个重要的概念是模块化。 与一个有10000行代码的文件相比,把代码分成多个可复用组件,这样可以帮助项目保持条理性和易懂性。 TypeScript介绍了导入和导出模块的语句,但是并不能解决文件间的真正连接。 TypeScript依赖于第三方函数库来加载外部模块: 用于浏览器应用程序的require.js和用于Node.js的CommonJS。 我们来看一个简单的带有require.js的TypeScript模块例子: 我们会有两个文件。 一个是导出函数,另一个是导入并调用函数。 exporter.ts 1 2 3 4 5 varsayHi=function(): void{ console.log("Hello! "); } export=sayHi; importer.ts 1 2 importsayHi=require('./exporter'); sayHi(); 现在我们需要下载require.js,包含在一个script标签里–如何设置请点击这里。 最后一步是编译这两个.ts文件。 需要添加一个额外的参数来告诉TypeScript,我们是为require.js创建模块的(也被称为AMD),而不是CommonJS。 1 tsc--moduleamd*.ts 模块是相当复杂的而且也超出了本教程的范围。 如果想继续学习更多关于模块的知识,可以查看TypeScript文档–点击这里。 第三方声明文件 在使用一个常规JavaScript库时,我们需要用到一个声明文件来使这个库是否和TypeScript兼容。 一个声明文件包含.d.ts扩展名和关于该库的多种信息,还有API。 TypeScript的声明文件通常是手写的,但是极有可能你需要的库中已经有了一个由其他人创建的.d.ts文件。 DefinitelyTyped是最大的公共存储库,包括1000多个库文件。 也有一个用来管理TypeScript定义的N
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 学会 TypeScript