TypeScript总结

TypeScript主要是为了解决JavaScript的弱类型和没有命名空间的特点。JS作为弱类型语言，好处就是编译的时候更简洁更灵活，但对于大型项目，强类型更有利，可以降低系统的复杂度，在编译时就发现类型错误。
在语法上，TypeScript并没有摒弃JS语法，而是做成了JS的超集，因此任何JS语句在TypeScript下都是合法的。

安装

通过npm安装

npm install -g typescript

创建TypeScript文件

在编译器里创建一个.ts文件hello.ts

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

编译代码

在命令行运行TypeScript编译器

tsc greeter.ts

然后会输出一个hello.js文件

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。
例如：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

这时编译后会报错

greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

这就是TS的类型检测
声明变量类型后，其他任何类型的赋值都会引起编译错误。

但尽管提示错误，还是会创建js文件。

接口

接口可以扩展一个实例，可以作为类型注解使用。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

类

类包含构造函数和一些公共字段，可以和接口一起运作。

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;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

模块化

利用TypeScript的module，可以起到命名空间的效果，export可以控制是否能被外部访问。

运行TypeScript

与普通js一样，在html中加入script标签。