跳到主要内容

如何开始使用TypeScript

TypeScript是使用该语言的一组语言之一JavaScript的运行时作为执行环境:包含TypeScript代码的.ts文件被编译为普通的JavaScript,然后可以由浏览器运行。

Jeremy Ashkenas首先使用他的CoffeeScript语言使这个概念变得流行,但遗憾的是,对于熟悉C#或Visual Basic的开发人员来说,它的相对简洁的语法很难学习。

随着微软扩展到Web 2.0技术,它选择从Jeremy Ashkenas那里获取灵感。由于Visual Studio的功能,开发人员可以在从各种语言扩展中获利的同时进行攻击。

TypeScript不仅限于静态类型:它还具有各种高级功能,允许您在Web上模拟面向对象的编程范例。本简短指南将向您介绍其一些主要功能。如果语言对您有吸引力,可以即时学习更多信息。

01.安装Visual Studio

Visual Studio 2017 comes with a new installer; the required features are split into payloads to make deployment easier

Visual Studio 2017附带了一个新的安装程序;所需的功能分为有效负载,以便于部署

即使TypeScript也可以在Linux或macOS上使用,我们将坚持使用微软的官方IDE。从中下载Visual Studio 2017的免费社区版微软,这里,并确保在部署期间标记ASP.NET有效内容。

02.添加SDK

由于TypeScript的快速发布节奏,Visual Studio需要使用SDK模块进行扩展,可以从中下载这里的微软网站。只需运行安装程序,就好像它是标准的Windows应用程序一样。

03.下载TypeScript,真实

如果不存在一些额外的麻烦,那就不是微软:当SDK升级你的Visual Studio安装时,实际的TSC编译器不会添加到你的命令行。通过在命令行上使用Node.js的npm包管理器可以最好地解决此问题。

PS C:\ Users \ tamha \ Downloads> npm install -g typescript

C:\ Users \ tamha \ AppData \ Roaming \ npm \ tsc - > C:\ Users \ tamha \ AppData \ Roaming \ npm \ node_modules \ typescript \ bin \ tsc

C:\ Users \ tamha \ AppData \ Roaming \ npm \ tsserver - > C:\ Users \ tamha \ AppData \ Roaming \ npm \ node_modules \ typescript \ bin \ tsserver

C:\ Users \用户tamha \应用程序数据\漫游\ NPM

` - Typescript@2.4.2

04.打破这个项目

Visual Studio期望在以解决方案为中心的过程中工作:虽然有趣,但这并不是我们需求的理想选择。而是创建一个名为worker.ts的文件,并将其放在文件系统中方便的位置。通过将其拖入Visual Studio将其打开,然后将其放在顶部的工具栏中。接下来,修改其内容以包含以下代码:

function sayOi(){alert(“Oi!”); sayOi();

05.创建一个入口点

正如在介绍中提到的,.ts文件本身无法做很多事情。因此,请继续创建名为index.html的文件,该文件必须位于同一文件夹中。接下来,添加此步骤附带的骨架代码。它加载编译器的输出,并像运行任何其他JavaScript一样运行它。

     

06.编译并运行

下一步涉及手动重新编译.ts文件。打开PowerShell,然后输入tsc命令,后跟输入文件的名称。默认情况下,输出文件将共享基本文件名,但扩展名为.js而不是.ts。最后,在选择的浏览器中打开index.html文件以证明消息框的外观。

PS C:\ Users \ tamha \ Downloads> tsc。\ worker.ts

07.打字

Use this reference table to find basic static types

使用此参考表查找基本静态类型

到目前为止,TypeScript所做的只不过是一个更复杂的JavaScript环境。下一步涉及激活对静态类型的支持:它使编译器能够执行参数的静态分析,并保留无效值。为此,需要一组类型 - 基本类型列在上表中,而类将在后面讨论。

08.试一试

In normal JavaScript, this error would be found only when the line in question gets invoked

在普通的JavaScript中,只有在调用相关行时才会发现此错误

TypeScript变量类型赋值通过放置在变量名称后面的“a:”进行。让我们修改我们的Oi函数来取一个数字,然后让我们传入一个字符串。最后,再次调用TSC编译器以大饱眼福看上面屏幕截图中显示的错误消息 - 顺便说一句,Visual Studio也会突出显示有问题的行。

function sayOi(whatToSay:number){alert(whatToSay); } sayOi(“你好”);

09.避免使用原型

JavaScript通过原型实现面向对象:一种在.NET和C / C ++世界中不常见的代码风格。 TypeScript通过允许创建类来解决此问题 - 此步骤附带的代码段中显示了一个过程。

class Imagine {public myResult:number; public myA:number; public myB:number;构造函数(_a:number,_b:number){this.myResult = _a + _b; this.myA = _a; }}

10.欣赏公众

The holding values created by setting the public attribute get populated automatically

通过设置public属性创建的保留值会自动填充

通常,public属性用于声明可以从外部访问程序的元素。当用作构造函数参数时,它会指示TypeScript编译器创建具有相同名称的本地字段。

class Imagine {public myResult:number; // public myA:number;构造函数(public myA:number,public _b:number){this.myResult = myA + _b; this.myA = myA; }}

11.方法和实例

让我们通过提供一个方法来扩展我们的示例类,该方法访问存储在myResult和myA中的值,并在屏幕上输出它们。最后,new参数用于创建类的实例 - 它用于调用方法。

class Imagine {public myResult:number; 。 。 。 public saySomething():void {alert(this.myResult);让myImagine:Imagine = new Imagine(2,2); myImagine.saySomething();

12.使用它的神奇功能

TypeScript的语言设计旨在尽可能地为开发人员节省开支。一个很好的功能是使用显示的快捷方式创建的参数的自动填充。

class Imagine {public myResult:number;构造函数(public myA:number,public myB:number){this.myResult = myA + myB; public SaySomething():void {alert(this.myA +“”+ this.myB); }}

13.执行继承

Our small example program proves that TypeScript satisfies the core tenets of object inheritance

我们的小示例程序证明TypeScript满足对象继承的核心原则

面向对象编程的核心原则之一是将类基于彼此。派生类可以覆盖其基类的内容,从而实现灵活调整的类层次结构。

class Future extends Imagine {public saySomething():void {console.log(this.myA); }}

14.分析覆盖

上面的代码片段使用名为Future的子元素扩展了Imagine类。 Future与Imagine的不同之处在于它的saySomething方法更加发展,它在浏览器的命令行中发出消息。

让myImagine:Imagine = new Future(2,2); myImagine.saySomething();让myFuture:Future = new Future(9,9); myFuture.saySomething();

15.分析覆盖,redux

有了它,可以测试实际代码。运行时,浏览器控制台将包含两个Future调用 - 高级类即使在作为Imagine对象调用时也会保留其属性。

16.限制访问

使用public修饰符公开成员变量是不受欢迎的:毕竟,它取消了对用户对变量内容的处理的大部分控制。 TypeScript访问器允许您以类似于传统OOP的方式解决此问题。请注意,也支持只读成员,但使用此功能需要激活ECMAScript5支持。

public _myCache:string; get fullCache():string {return this._myCache; set fullCache(newX:string){if(newX ==“hello”){this._myCache = newX; } else {console.log(“错误的数据!”); }}

17.把它抽象化

创建复杂的继承层次结构的能力将激励开发人员在抽象类中尝试运气。在这方面,TypeScript也让您了解 - 此步骤附带的示例创建了一个具有抽象和真实成员的类。尝试直接实例化抽象类会导致编译器错误。

抽象类想象一下{public myResult:number; abstract sayName():void;构造函数(public myA:number,public myB:number){this.myResult = myA + myB; public SaySomething():void {alert(this.myA +“”+ this.myB); class Future extends Imagine {。 。 。 public sayName(){console.log(“Hello”); }}

18.创建一个界面

随着对象结构变得越来越复杂,开发人员经常发现自己面临着一个类实现多个逻辑位的情况。在这种情况下,界面可以提供一个很好的解决方法 - 该示例显示了预期的结果。

interface DataInterface {field:number; workerMethod():void; }

19.实施它

与上面的类一样,如果我们不能使用它,接口对我们没有好处。幸运的是,实现它并不是特别困难:请注意,接口作者可以进一步声明其创建的部分是可选的。

class Worker实现DataInterface {field:number; workerMethod():void {throw new Error(“Method not implemented。”); }}

20.使用通用类

TypeScript编译器强制执行严格的变量有效性检查。在处理存储类时,泛型允许您让最终用户确定要处理的类型。此外,TypeScript还允许其他通用元素,如函数,如文档中的(重言式)片段所示。

//通用函数函数标识(arg:number):number {return arg; } //通用类类GenericNumber  {zeroValue:T; add:(x:T,y:T)=> T; }

21.查点问题

状态机和类似元素从限制变量到存储一些明确定义的状态的方法中受益匪浅。这可以使用Enum数据类型完成:

enum ParserState {Idle = 1,Read0,Read1} class Imagine {public myState:ParserState;构造函数(public myA:number,public myB:number){this.myState = ParserState.Idle;

22.了解更多

在单篇文章中覆盖像TypeScript这样复杂的语言几乎是不可能的。看着那(这TypeScript网站的示例了解有关语言绑定的更多信息。

本文最初发布于issue 266 网页设计者,创意网页设计杂志 - 提供专家教程,前沿趋势和免费资源。在这里购买第266期要么在这里订阅Web Designer

特别圣诞节优惠: 订阅Web Designer可节省高达49%的费用 为你或朋友圣诞节。这是一个有限的报价,所以快速行动......

相关文章:



翻译字数超限