TypeScript中文教程-新手上路

写在前面

本系列来自 @东北大客 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>

发表评论