TypeScript教程

 

 

由于工做中用TypeScript，抽个时间，先大体的介绍一些基本知识，完整的学习仍是建议从官网教程出发，玩儿的愉快

JavaScript的通用浏览器支持和动态类型特性使其成为理想的通用Web语言。可是，任何来自面向对象背景的开发人员都知道，随着应用程序变得愈来愈大，JavaScript的灵活性可能成为一种负担。这就是微软建立TypeScript以帮助开发人员利用面向对象编程原理生成更好的JavaScript 的缘由。

在本文中，咱们将详细介绍TypeScript的内容，并向您展现如何开始使用它。

什么是TypeScript？
TypeScript的好处
第1部分）安装和设置
第2部分）编译为JavaScript
第3部分）静态打字
第4部分）数组
第5部分）接口
第6部分）课程
第7部分）泛型
第8部分）模块和命名空间
第9部分）第三方声明文件

什么是TypeScript？

TypeScript就是所谓的JavaScript超集。它不是JavaScript的替代品，也不会为JavaScript代码添加任何新功能。相反，TypeScript容许程序员在其代码中使用面向对象的构造，而后将其转换为JavaScript。它还包括类型安全和编译时类型检查等便利功能。最重要的是，它是彻底免费和开源的。

TypeScript 2.3是截至2017年中期的该语言的最新版本。若是您已经熟悉超集但已经不在循环中，TypeScript 2.0引入了一些重大改进，包括更全面的错误捕获以及直接经过npm install获取声明文件。

虽然TypeScript是由Microsoft开发的，而且是Visual Studio（IDE软件）的标准配置 ，但它能够在任何环境中使用。这个TypeScript教程将为您提供开发Web项目，生成JavaScript代码所需的工具。

使用TypeScript有各类好处，其中一些包括：

1.静态类型，TypeScript代码比JavaScript 更容易预测且更容易调试。
2. 面向对象的功能（如模块和命名空间）使组织大型代码库更易于管理。
3. 编译步骤在到达运行时以前捕获错误。
4. 流行的框架Angular是用TypeScript编写的。虽然您也能够在Angular中使用常规JavaScript，但您在框架中找到的大多数教程都是用TypeScript编写的。任何想要充分利用Angular和相似开发平台的人都会更好地了解TypeScript。
5. TypeScript相似于CoffeeScript，另外一种编译为JavaScript的语言，但因为静态类型，前者比后者更灵活。

第1部分）安装和设置

Visual Studio 2017已经配备了TypeScript插件，它包含在Visual Studio 2015的更新3中。若是您使用的是旧版本的Visual Studio或其余环境，则能够获取TypeScript源代码并将其安装为一个Node.js包：

npm install -g typescript

安装后，您能够开始制做TypeScript文件并将其添加到现有应用程序中。能够经过*.ts扩展名识别TypeScript文件。每当您保存TypeScript文件时，Visual Studio插件会自动生成一个具备相同名称的相应JavaScript文件，以供使用。每次建立新的TypeScript项目时，您都会注意到app.ts还生成了包含默认代码实现的文件。

Visual Studio为相应的TypeScript和JavaScript文件提供了精彩的并排视图。每当您保存TypeScript时，您均可以当即看到JavaScript中的更改。

这与您使用codepen.io时相似。使用CodePen，您能够编写TypeScript代码，而后查看已编译的JavaScript。下面是CodePen中一些未编译的TypeScript和已编译的JavaScript代码的并排比较。

 

image.png

此TypeScript教程中的示例假定您使用的是Visual Studio，但其余几个IDE和文本编辑器也提供TypeScript支持，包括自动完成建议，错误捕获和内置编译器。WebStorm，Vim，Atom，Emacs和Sublime Text都有TypeScript的内置支持或插件。

第2部分）编译为JavaScript

因为.ts文件没法直接在浏览器中使用，所以必须将它们编译为常规JavaScript，这能够经过几种方式实现。除了使用IDE或像Gulp这样的自动任务运行器以外，最简单的方法是使用命令行工具tsc，以下所示：

tsc index.ts 

上面的命令会给你一个名为的文件index.js。若是.js已存在具备该名称的文件，则将覆盖该文件。

也能够经过简单地列出它们来一次编译多个文件：

tsc index.ts main.ts 

您能够.ts使用如下命令编译当前文件夹中的全部文件，但请记住它不能递归地工做：

tsc * .ts 

要在对文件进行更改时自动编译，您能够设置观察程序进程：

tsc index.ts - watch 

若是你在与许多大型项目的工做.ts文件，它可能有助于建立一个tsconfig.json文件。您能够在TypeScript文档中阅读有关配置文件的更多信息。

第3部分）静态类型

TypeScript的定义功能是将它与JavaScript和CoffeeScript分开，它是静态类型，它容许您声明变量类型。编译器确保为变量分配正确的值类型，而且若是省略类型声明，它甚至能够进行推断。

除了“数字”，“布尔”和“字符串”等几种原始类型以外，您还可使用名为“any”的动态类型。“Any”相似于C＃中的“dynamic”关键字，由于它容许您为变量分配任何类型的值。所以，TypeScript不会标记“任何”变量的类型错误。

变量在TypeScript中声明的方式与它们在JavaScript中的方式相同。您能够经过添加冒号和类型名称来声明类型：

var num：number = 45; 

在上面的示例中，变量num已分配类型“number”。您能够阅读TypeScript文档中的全部可用数据类型。

第4部分）数组

使用TypeScript，您可使用括号建立数组：

var array：string [] = ['dog'，'cat']; var first：string = array [0]; 

上面的TypeScript会给你如下JavaScript：

var array = ['dog'，'cat']; var first = array [0]; 

如您所见，使用从零开始的索引访问TypeScript中的数组。您还可使用基本类型构建复杂变量：

var name = {firstName：'Steve'，lastName：'Jobs'}; 

即便您没有像上例中那样明确地为变量指定类型，TypeScript也会推断出“name”是一个带有字符串变量的复杂对象。若是您稍后将任何字符串之外的任何内容分配给这些变量中的任何一个，则会出现设计时错误。

第5部分）接口

定义接口容许您检查变量组合以确保它们使用一致。接口不会转换为JavaScript; 他们惟一的目的是帮助开发者。例如，您可使用如下属性和类型定义接口：

interface Food { name: string; calories: number; } 

而后，您能够告诉函数指望适合“Food”界面的对象，以确保始终可使用正确的属性：

function speak(food: Food): void { console.log("This " + food.name + " contains " + food.calories + " calories."); } 

如今，当您定义一个具备“Food”接口所需的全部属性的对象时，将自动推断出类型。若是TypeScript怀疑您犯了错误，编译器会通知您。例如，请使用如下代码：

var cherry_pie = { name: "cherry pie", caloreis: 500 } 

在上面的示例中，咱们的某个属性拼写错误，所以您应该会收到以下错误消息：

main.ts(16,7): error TS2345: Argument of type '{ name: string; caloreis: number; } is not assignable to parameter of type 'Food'. Property 'calories' is missing in type '{ name: string; caloreis: number; }'. 

只要存在所需属性且类型正确，属性顺序可有可无; 若是不是这种状况，您将收到编译器的警告，如上所述。

第6部分）类

TypeScript中的类与其余面向对象语言中的类大体相同。自ECMAScript 2015更新发布以来，类如今也是JavaScript的原生类，但类的规则在TypeScript中更严格一些。

您能够建立一个简单的TypeScript类，以下所示：

class Menu { items: Array<string> pages: number; } 

默认状况下，属性是公共的，但能够将它们设为私有。一旦创建了一些类，就能够设置构造函数来简化建立新对象的过程。

您也能够将一块儿使用的小的类（如Point，Size和Rectangle）组合到一个文件中，而不是为每一个类提供本身的文件。尝试将这些组合类保留在150行代码下以免任何问题。

第7部分）泛型

使用不一样类型的变量时，设置泛型可能会有所帮助。泛型是可重用的模板，容许单个函数接受不一样类型的参数。因为泛型保留类型，所以该技术优于过分使用“任何”类型变量。

看一下下面的脚本，它接收一个参数并返回一个包含相同参数的数组。函数名后面的“T”表示通用名称。调用该函数时，全部“T”实例将被提供的类型替换：

function genericFunc<T>(argument: T): T[] {
    var arrayOfT: T[] = [];
    arrayOfT.push(argument);
    return arrayOfT; } var arrayFromString = genericFunc<string>("beep"); console.log(arrayFromString[0]); console.log(typeof arrayFromString[0]) var arrayFromNumber = genericFunc(45); console.log(arrayFromNumber[0]); console.log(typeof arrayFromNumber[0]) 

在上面的示例中，当咱们第一次调用函数时，手动将类型设置为字符串。此步骤不是必需的，由于编译器知道哪一个参数已被传递，而且能够在下次调用函数时推断出哪一种类型是合适的。

即便它不是必需的，可是养成在编译器出错时始终提供类型的习惯是很好的，这可能会随着代码变得更复杂而发生。将泛型与接口相结合实际上能够保证生成的JavaScript完美无瑕。

第8部分）模块和命名空间

模块提供了另外一种组织和合并代码的方法。若是有效使用，将代码拆分为可重用组件能够减小项目的文件数量，从而使维护更加容易。在TypeScript中，内部模块称为“名称空间”，而外部模块称为模块。

TypeScript具备导出和导入模块的特殊语法; 可是，语言不能直接处理文件之间的连线，因此咱们须要一些第三方库来方便外部模块的使用。具体来讲，咱们请使用RequireJS为浏览器的应用程序或CommonJS的对Node.js的。

想象一下，您正在使用浏览器应用程序，而且您有两个.ts文件：一个用于导出功能; 另外一个用于导入和调用该函数。它们看起来以下：

exporter.ts

var sayHi = function(): void { console.log("Hello!"); } export = sayHi; importer.ts import sayHi = require('./exporter'); sayHi(); 

如今，要实现您的模块，首先须要下载require.js并将其粘贴到脚本标记上。而后，您必须设置一个额外的参数，让TypeScript知道您正在使用require.js，其操做以下：

tsc --module amd * .ts 

学习如何在TypeScript中使用模块须要时间，但收益是巨大的。您能够在模块上的TypeScript文档中阅读有关它们的更多信息。

第9部分）第三方声明文件

当您须要使用最初用于常规JavaScript的库时，必须应用声明文件以使其与TypeScript兼容。具备扩展名的声明文件包含.d.ts有关库及其API的信息。您能够手动制做本身的声明文件，但您能够轻松找到.d.ts其余人已经建立的任何库的文件。

最好看的地方是DefinitelyTyped，这是一个庞大的公共存储库，拥有数千个库。当你在那里时，你也能够选择Typings，一个方便的Node.js模块来管理你的TypeScript定义。

TypeScript教程摘要

使用TypeScript几乎老是比直接编写JavaScript更好。即便您对JavaScript彻底熟悉，花些时间学习TypeScript也会让您成为更快，更高效的Web开发人员。可是，TypeScript并非惟一的“替代”JavaScript语言。其余受欢迎的选择包括CoffeeScript（如前所述），Babel、Elm。

做者：HowardHuang连接：https://www.jianshu.com/p/70a03e21936c来源：简书简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。