写在前面
本系列来自 @东北大客 http://14ms.net/ 的翻译，虽然没有全部翻译，但是仍然帮我我这种初学者且英语苦手的大忙。
我在东北大客翻译的基础上改了改错别字和一些描述上的问题，算是一点优化。
原文链接为：http://www.typescriptlang.org/
1、安装typescript支持 。
有两种主要方法获得typescript工具：通过node.js的包管理（npm），或者安装VS2012的TypeScript插件。
对于VS 2013用户，点击一下链接：
Install TypeScript for Visual Studio 2013
对于NPM用户：
|
1
|
> npm install -g typescript
|
2、在编辑器（如webstrom）中新建greeter.ts文件，敲入一下代码：
|
1
2
3
4
5
6
7
|
function greeter(person) {
return “Hello, ” + person;
}
var user = “Jane User”;
document.body.innerHTML = greeter(user);
|
3、编译TypeScript文件
以上文件使用 .ts为扩展名，但实际代码仍为 javascript。可以直接拷贝粘贴至现有的Javascript 程序中。
在命令行里键入 如下命令，运行 TypeScript 编译器
注：当前目录为greeter.ts的目录。
请完成以上步骤1，即已经安装了typeScript支持。
|
1
|
> tsc greeter.ts
|
4、类型声明
结果是生成了一个带有相同代码的js文件。TypeScritpt 已经运行起来了。
接下来我们利用TypeScript提供的新工具进行一些改良。给greeter函数的person参数添加“:string”类型声明。
|
1
2
3
4
5
6
7
|
function greeter(person: string) {
return “Hello, ” + person;
}
var user = “Jane User”;
document.body.innerHTML = greeter(user);
|
5、变量控制
类型声明是一种控制函数变量期望的简单方法。在这里，我们期望给greeter函数传递一个字符串类型的产生。我们将传递进来的参数改成数组试一下：
|
1
2
3
4
5
6
7
|
function greeter(person: string) {
return “Hello, ” + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);
|
重新编译将会看到如下的错误：
|
1
|
greeter.ts(7,26): Supplied parameters do not match any signature of call target
|
6、接口
同样的，如果将调用greeter函数时不传入任何参数，TypeScript将会告诉你传入的参数个数不符。TypeScript提供根据私有声明和代码结构两种静态分析方法。
需要注意的是，以上仍然会建立greeter.js文件。尽管有错误仍然可以使用TypeScript，但TypeScript将会告知以上代码可能不会按照期望的方式运行。
接下来更进一步的改造我们的例子。我们使用接口interface来描述person对象，其包含名字和姓氏，即firstname和lastname。在TypeScript如果两个类型的内部结构兼容的话就会被兼容。这使得我们可以通过声明接口的形态即可实现接口，而不用详述一个接口的实现条款。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
interface Person {
firstname: string;
lastname: string;
}
function greeter(person : Person) {
return “Hello, ” + person.firstname + ” ” + person.lastname;
}
var user = {firstname: “Jane”, lastname: “User”};
document.body.innerHTML = greeter(user);
|
7、类的声明和构造
最后我们扩展类class。TypeScript支持现在的ES6基于类的面向对象程序声明。
下面通过构造函数和几个公有域创建一个Student类，需要注意的是Person和Student可以同时声明，并交给程序正确的抽象出来。
需要注意的是，构造函数的public参数是一种帮助我们快速建立属性的速记方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
class Student {
fullname : string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + ” ” + middleinitial + ” ” + lastname;
}
}
interface Person {
firstname: string;
lastname: string;
}
function greeter(person : Person) {
return “Hello, ” + person.firstname + ” ” + person.lastname;
}
var user = new Student(“Jane”, “M.”, “User”);
document.body.innerHTML = greeter(user);
|
8、添加HTML并运行
再运行一次 tsc greeter.js 我们发现生成的js 和以前我们写的代码相同。类class只是帮助我们建立基于OO的原型的方法。
下面添加 greeter.html 并在浏览器里打开就可以看见最终效果了。
|
1
2
3
4
5
6
7
|
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src=”greeter.js”></script>
</body>
</html>
|