TypeScript Quick Start（译）

,

开始学习 TypeScript.

安装 TypeScript

1
npm install -g typescript

新建文件 greeter.ts

1
2
3
4
5
function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

编译文件

1
tsc greeter.ts

编译结果是生成了一个 js 文件。

强类型

JavaScript 是一种弱类型的语言，变量的类型并不是确定的，虽然弱类型使用起来会比较灵活，但是在开发大型项目时，强类型更有利，可以在进行编译时就发现程序错误。

将 greeter 函数的 person 变量定义为 string 类型。

1
2
3
4
5
function greeter(person: string) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

尝试将一个数组作为 greeter() 的参数，重新编译，看看会发生什么。

1
2
3
4
5
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

使用接口

我们继续对例子进行扩展。使用接口描述一个 person 对象，其中包含了 firstname 和 lastname 属性，代码如下：

1
2
3
4
5
6
7
8
9
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);

类

创建一个学生类，其中包含一个构造函数和一些属性，注意这个程序中包含了类和接口，由开发人员决定采用什么样的抽象层次。
另外值得注意的是构造函数的 public 参数，能够很方便的创建属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);

在浏览器中运行

创建文件 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>