对比TypeScript与JavaScript

首先，引用TypeScript官网的一段话：

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Any browser. Any host. Any OS. Open source.

TypeScript是JavaScript的超集，它可以编译成纯JavaScript，可以在任何浏览器、任何计算机、任何操作系统上使用，并且是开源的。

也就是说，TypeScript是完全兼容JavaScript的，并在JavaScript的基础上扩展了语法。

TypeScript代码保存在ts文件中，ts文件经过编译之后会生成一个js文件，任何有效的JavaScript代码都可以直接作为TypeScript代码编译，只不过编译过后的代码与原JavaScript代码相同，TypeScript代码编译后则会转换为对应的JavaScript代码。

下面简述我在TypeScript学习过程中所了解到的其与JavaScript所不同的语法：

其在JavaScript的基础上扩展了面向对象编程的能力，同时从一门弱类型的语言变得可以像一门强类型的语言一样工作。

1. 类型注解
2. 接口
3. 类
4. 函数
5. 泛型
6. 枚举

1.类型注解

TypeScript通过类型注解提供编译时的静态类型检查。

let str: string;//ts代码
let str;//编译生成的js代码

通过对比可以清晰的看到，在ts代码中可以在声明变量的时候加上": 类型"来描述变量的类型，即类型注解。

此时如果给str赋予其他类型的数据：

let str: string;
str = 123;//test.ts(2,1): error TS2322: Type '123' is not assignable to type 'string'.

编译器会报错，但是仍可以编译生成js文件，类型注解在编译时就能检查出类型问题，ts代码在编译成js时也能检查出语法问题，不必像JavaScript一样只能在运行时才能发现语法问题，而且因为JavaScript是一门弱类型的语言，在类型上出现的问题很难发现且容易导致意料之外的问题。

2.接口

interface Point{
    x: number;
    y: number;
}

TypeScript支持接口，编译过后对应js代码为空，TypeScript中的接口与其他面向对象编程语言所不同的一点是其在接口中可以声明变量，而且可以继承类，但只继承类的成员但不包括其实现。

3.类

ts：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

编译生成的js：

class Greeter {
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

虽然ES6已经支持类，但从上述代码中我们可以看到TypeScript与ES6的类还是不完全一样的，ts代码可以通过类型注解声明变量的类型。

4.函数

ts：

function add(x: string, y: string, z?:string): string{ 
    return x + y; 
}

编译生成的js：

function add(x, y, z) {
    return x + y;
}

在TypeScript的函数中我们可以给每个参数提供类型注解，还能为函数提供返回类型注解（在参数列表后的":类型"），同时TypeScript可以在参数名右边加上一个？表示可选参数。

5.泛型

ts：

class Greeter {
    greeting: T;
    constructor(message: T) {
        this.greeting = message;
    }
    greet() {
        return this.greeting;
    }
}

let greeter = new Greeter("Hello, world");

编译生成的js：

class Greeter {
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return this.greeting;
    }
}
let greeter = new Greeter("Hello, world");

在实际工作中，我们要考虑代码的可重用性，不仅要支持当前的数据类型，同时也要能支持未来的数据类型，TypeScript可以使用泛型来编写可重用的代码，一份代码可以支持多种类型的数据，极大的提高了可重用性。

6.枚举

ts：

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

编译生成的js：

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));

TypeScript支持枚举，与其他面向对象编程语言枚举的差别在于TypeScript的枚举支持基于字符串的枚举，即枚举成员的值可以为字符串类型，如

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

总结：

TypeScript是JavaScript的超集，提供了类型注解，这是TypeScript中Type的体现，增加了代码的可读性和可维护性，使开发人员能够在编译时发现错误并修改，方便了代码的调试与不必要错误的出现；扩展了面向对象的语法，使开发人员能够更好的进行面向对象的编程。

水平有限，如有错误，还请批评指正。