如何入门网页字体脚本？TypeScript初步讲解
TypeScript关键功能及语法简要讲解。
TypeScript是使用Javascript的一组语言，包含在.ts文件中，作为JavaScript被浏览器运行。
Jeremy Ashkena以他的CoffeeScript使得这一概念被广泛传播，但令人遗憾的是这种相对简短的语言对于熟悉C#或Visual Basic的开发人员来说很难学习。
随着微软升级到Web 2.0技术，它也从Jeremy那里获得了灵感。通过对Visual Studio的功能升级，开发人员可以简单地利用各种语言拓展。
TypeScript不仅限于静态类型，还附带了高级功能，让您在Web上模拟面向对象的编程工程。这篇简短的指南将带您了解其中一些关键特性，如果你对这种语言感兴趣，可以系统学习一下。
01.安装Visual Studio
我们这里使用微软的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包管理器来解决这个问题。
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
`-- typescript@2.4.2
04.开始项目
Visual Studio致力于以解决方案为中心的工作流程，但这并不是我们理想的方式。你需要创建一个worker.ts文件，将它放在某个位置，然后拖入Visual Studio的顶部工具栏中，并将内容修改为以下代码：
function sayOi() {
alert("Oi!");
}
sayOi();05.创建文件入口
.ts文件本身并不能完成太多工作。接下来需要创建一个index.html文件，并和上述worker.ts文件放入一个文件夹中。接下来，添加下方的代码。它会加载编译器中的代码并运行它，就像普通JavaScript一样。
<html>
<head>
<script src="worker.js"></script>
</head>
<body></body>
</html>06.编译并运行
下一步需要手动便宜.ts文件，打开PowerShell，输入tsc+文件名的命令。默认情况下，输出的文件文件名是相同的，但拓展名是.js而不是.ts。最后，打开index.html来查看消息框的外观。
PS C:\Users\tamha\Downloads> tsc .\worker.ts07.加载字体
到目前位置，TypeScript仅仅作为一个更复杂的JavaScript环境工作。下一步需要激活对静态类的支持，它能够使编译器对参数进行静态分析并排除无效值。基本的类已经在上述列表中列出，稍后会再讨论这个问题。
08.尝试运行
TypeScript通过在变量名称后加入a:来为变量进行赋值。这里通过修改Oi函数来取一个数字，然后输入一个字符串。最后，请再次调用编译器，你会看到一大串错误信息顺便一提，Visual Studio也会突出显示相关行。
function sayOi(whatToSay: number) {
alert(whatToSay);
}
sayOi("Hello");09.避免原型（prototype）
JavaScript通过原型来实现面向对象，这是一种在.NET和C/C++中少见的代码风格。TypeScript允许创建类来应对此问题，以下附加的代码展示了这个过程。
class Imagine {
public myResult: number;
public myA: number;
public myB: number;
constructor(_a: number, _b: number)
{
this.myResult = _a + _b;
this.myA = _a;
}
}10.公共属性
通常，公共属性用于声明一个元素可以从外部访问。当用作构造函数的参数时，表示TypeScript编译器创建一个该名称的本地字段。
11.方法和实例
通过访问存储在myResult和myA的值，我们将做一个关于类的示例，并输出到屏幕上。下列代码展示了创建和调用的过程：
class Imagine {
public myResult: number;
. . .
public saySomething(): void {
alert(this.myResult);
}
}
let myImagine: Imagine = new Imagine(2, 2);
myImagine.saySomething();12.使用神奇的新功能
TypeScript语言设计只在尽可能使得开发变得简便。其中一个很好的功能自动填充，使用如下的快捷方式即可。
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.使用继承
面向对象编程和核心原则之一是将一个类放在另一个之上。然后，子类可以覆盖其父类的内容，使得层次结构十分灵活。
class Future extends Imagine
{
public saySomething(): void {
console.log(this.myA);
}
}14.分析覆盖
上述代码使用名为Future的子元素扩展了Imagine类。前者的不同之处是，在saySomething的方法上有所变化，向浏览器的命令行发送内容。
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方可使用。
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也包含了这方面内容，以下案例创建了一个类，包含了抽象和真实的实例。尝试将抽象类实例化会导致编译器错误。
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.接口制作
随着对象结构日益复杂，开发人员经常面临一个类需要实现多个逻辑为的情况。这种情况下，创建一个接口是一个很好的方法，以下实例即相关内容：
interface DataInterface {
field: number;
workerMethod(): void;
}19.执行
如同上面这个例子，如果不能使用，那么接口对我们而言毫无意义。幸运的是，这很容易实现，请注意接口作者还可以声明这部分模块是可选的。
class Worker implements DataInterface {
field: number;
workerMethod(): void {
throw new Error("Method not implemented.");
}
}20.使用泛型类
TypeScript编译器会强制执行严格的变量有效性检查。在处理存储类时，泛型类允许您让最终用户确定要处理的类型。此外，TypeScript还允许使用其他通用元素（如函数）。
//Generic function
function identity(arg: number): number {
return arg;
}
//Generic class
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T; }21.关于枚举
状态机和类似元素通过限制变量来存储一些明确定义的状态，可以使用Enum数据类型来完成：
enum ParserState {
Idle = 1,
Read0,
Read1
}
class Imagine {
public myState: ParserState;
constructor(public myA: number, public myB: number)
{
this.myState = ParserState.Idle;22.拓展学习
在一篇文章中说清楚TypeScript这样的复杂语言是几乎不可能的。前往TypeScript的网站，你可以获得更多案例和信息。
