如何入门网页字体脚本?TypeScript初步讲解

TypeScript关键功能及语法简要讲解。

TypeScript - design, sharing - 如何入门网页字体脚本?TypeScript初步讲解

TypeScript是使用Javascript的一组语言,包含在.ts文件中,作为JavaScript被浏览器运行。

Jeremy Ashkena以他的CoffeeScript使得这一概念被广泛传播,但令人遗憾的是这种相对简短的语言对于熟悉C#或Visual Basic的开发人员来说很难学习。

随着微软升级到Web 2.0技术,它也从Jeremy那里获得了灵感。通过对Visual Studio的功能升级,开发人员可以简单地利用各种语言拓展。

TypeScript不仅限于静态类型,还附带了高级功能,让您在Web上模拟面向对象的编程工程。这篇简短的指南将带您了解其中一些关键特性,如果你对这种语言感兴趣,可以系统学习一下。

01.安装Visual Studio

3348601 - design, sharing - 如何入门网页字体脚本?TypeScript初步讲解

我们这里使用微软的IDE,但TypeScript也可以在Linux或MacOS上使用。从Microsoft可以下载Visual Studio 2017免费的社区版,并确保在安装过程中勾选ASP.NET。

02.添加SDK

由于TypeScript发布节奏快速,Visual Studio需要使用SDK模块进行扩展,Microsoft官网上也可以下载到SDK模块。下载完成后,直接安装即可。

03.下载TypeScript

不出意外的话,微软不会带有它。在SDK升级你的Visual Studio时,TSC的编译器并不会被纳入。可以通过在命令行中使用Node.js的npm包管理器来解决这个问题。

1
2
3
4
5
6
7
8
9
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\AppData\Roaming\npm

`-- [email protected]

04.开始项目

Visual Studio致力于以解决方案为中心的工作流程,但这并不是我们理想的方式。你需要创建一个worker.ts文件,将它放在某个位置,然后拖入Visual Studio的顶部工具栏中,并将内容修改为以下代码:

1
2
3
4
5
6
7
function sayOi() {

alert("Oi!");

}

sayOi();

05.创建文件入口

.ts文件本身并不能完成太多工作。接下来需要创建一个index.html文件,并和上述worker.ts文件放入一个文件夹中。接下来,添加下方的代码。它会加载编译器中的代码并运行它,就像普通JavaScript一样。

1
2
3
4
5
6
7
8
9
10
11
<html>

<head>

<script src="worker.js"></script>

</head>

<body></body>

</html>

06.编译并运行

下一步需要手动便宜.ts文件,打开PowerShell,输入tsc+文件名的命令。默认情况下,输出的文件文件名是相同的,但拓展名是.js而不是.ts。最后,打开index.html来查看消息框的外观。

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

07.加载字体

59678712 - design, sharing - 如何入门网页字体脚本?TypeScript初步讲解

到目前位置,TypeScript仅仅作为一个更复杂的JavaScript环境工作。下一步需要激活对静态类的支持,它能够使编译器对参数进行静态分析并排除无效值。基本的类已经在上述列表中列出,稍后会再讨论这个问题。

08.尝试运行

43660037 - design, sharing - 如何入门网页字体脚本?TypeScript初步讲解

TypeScript通过在变量名称后加入a:来为变量进行赋值。这里通过修改Oi函数来取一个数字,然后输入一个字符串。最后,请再次调用编译器,你会看到一大串错误信息顺便一提,Visual Studio也会突出显示相关行。

1
2
3
4
5
6
7
function sayOi(whatToSay: number) {

alert(whatToSay);

}

sayOi("Hello");

09.避免原型(prototype)

JavaScript通过原型来实现面向对象,这是一种在.NET和C/C++中少见的代码风格。TypeScript允许创建类来应对此问题,以下附加的代码展示了这个过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Imagine {

public myResult: number;

public myA: number;

public myB: number;

constructor(_a: number, _b: number)

{

this.myResult = _a + _b;

this.myA = _a;

}

}

10.公共属性

31451548 - design, sharing - 如何入门网页字体脚本?TypeScript初步讲解

通常,公共属性用于声明一个元素可以从外部访问。当用作构造函数的参数时,表示TypeScript编译器创建一个该名称的本地字段。

11.方法和实例

通过访问存储在myResult和myA的值,我们将做一个关于类的示例,并输出到屏幕上。下列代码展示了创建和调用的过程:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Imagine {

public myResult: number;

. . .

public saySomething(): void {

alert(this.myResult);

}

}

let myImagine: Imagine = new Imagine(2, 2);

myImagine.saySomething();

12.使用神奇的新功能

TypeScript语言设计只在尽可能使得开发变得简便。其中一个很好的功能自动填充,使用如下的快捷方式即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Imagine {

public myResult: number;

constructor(public myA: number, public  myB: number)

{

this.myResult = myA + myB;

}

public saySomething(): void {

alert(this.myA + “ “ + this.myB);

}

}

13.使用继承

 

面向对象编程和核心原则之一是将一个类放在另一个之上。然后,子类可以覆盖其父类的内容,使得层次结构十分灵活。

1
2
3
4
5
6
7
8
9
10
11
class Future extends Imagine

{

public saySomething(): void {

console.log(this.myA);

}

}

14.分析覆盖

上述代码使用名为Future的子元素扩展了Imagine类。前者的不同之处是,在saySomething的方法上有所变化,向浏览器的命令行发送内容。

1
2
3
4
5
6
7
let myImagine: Imagine = new Future(2, 2);

myImagine.saySomething();

let myFuture: Future = new Future(9, 9);

myFuture.saySomething();

15.分析覆盖并缩减

实际的代码在此已被测试,运行时,浏览器控制台将包含Future的两个调用,即使在作为Imagine对象调用时,父类也保留了它的属性。

16.限制访问

使用public修饰符来让变量暴漏出来并不是很好的做法,因为它限制了用户对变量内容的操作。TypeScript访问器允许你用类似传统OOP的方式解决此问题。只读的内容也可支持,但需要激活ECMAScript5方可使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public _myCache: string;

get fullCache(): string {

return this._myCache;

}

set fullCache(newX: string) {

if (newX == "hello") {

this._myCache = newX;

}

else {

console.log("Wrong data!");

}

}

17.抽象化

创建复杂的层次结构的功能,鼓励开发人员使用抽象类。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
29
30
31
abstract class Imagine {

public myResult: number;

abstract sayName(): void;

constructor(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.接口制作

随着对象结构日益复杂,开发人员经常面临一个类需要实现多个逻辑为的情况。这种情况下,创建一个接口是一个很好的方法,以下实例即相关内容:

1
2
3
4
5
6
7
interface DataInterface {

field: number;

workerMethod(): void;

}

19.执行

如同上面这个例子,如果不能使用,那么接口对我们而言毫无意义。幸运的是,这很容易实现,请注意接口作者还可以声明这部分模块是可选的。

1
2
3
4
5
6
7
8
9
10
11
class Worker implements DataInterface {

field: number;

workerMethod(): void {

throw new Error("Method not implemented.");

}

}

20.使用泛型类

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//Generic function

function identity(arg: number): number {

return arg;

}

//Generic class

class GenericNumber<T> {

zeroValue: T;

add: (x: T, y: T) => T; }

21.关于枚举

状态机和类似元素通过限制变量来存储一些明确定义的状态,可以使用Enum数据类型来完成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
enum ParserState {

Idle = 1,

Read0,

Read1

}

class Imagine {

public myState: ParserState;

constructor(public myA: number, public  myB: number)

{

this.myState = ParserState.Idle;

22.拓展学习

28433040 - design, sharing - 如何入门网页字体脚本?TypeScript初步讲解

在一篇文章中说清楚TypeScript这样的复杂语言是几乎不可能的。前往TypeScript的网站,你可以获得更多案例和信息

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注