TypeScript与JavaScript代码对比

发表于 2015-03-10 分类于 JavaScript

前言

TypeScript官方文档：http://www.typescriptlang.org/Handbook
首先需要明确的是TypeScript并不是一个真正的语言，准确的说它只是JavaScript的一个语法糖(syntactic sugar)。用TypeScript写的代码，最终还是要转化为JavaScript来执行的。
所以学习TypeScript之前，一定要学JavaScript。

a. 数组:
TypeScript代码

1 2	var list:number[] = [1, 2, 3]; var list:Array<number> = [1, 2, 3];

转化后的JS代码

1	var list = [1, 2, 3];

b. 枚举:
TypeScript代码

1
2
3

// 枚举类型默认从0开始，也可以自己指定
enum Color {Red = 1, Green = 2, Blue = 4};
var c: Color = Color.Green;

转化后的JS代码

var Color;
(function (Color) {
    Color[Color["Red"] = 1] = "Red";
    Color[Color["Green"] = 2] = "Green";
    Color[Color["Blue"] = 4] = "Blue";
})(Color || (Color = {}));
;
var c = 2 /* Green */;

c.类Class:
TypeScript代码

class Greeter {
    static count : number = 10;
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
var greeter = new Greeter("world");

转化后的JS代码

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    Greeter.count = 10; 
    return Greeter;
})();
var greeter = new Greeter("world");

接口interface

interface的主要作用就是在TypeScript编译为JavaScript的时候，做一些语法限制。转为JavaScrpit之后，其实并没有interface的关键字。
a.限制传递的参数必须为指定的变量名

interface LabelledValue {
    label : string;
    size ?: string;     // 加问号表示可选参数
}
function printLabel(labelledObj: LabelledValue) {
}
var myObj = {size2: 10, label: "Size 10 Object"};   // 编译通过, size 为可选
printLabel(myObj)
var myObj1 = {size: 10, label_1: "Size 10 Object"};  // 出错，没有label不属性
printLabel(myObj1)

b.定义函数
类似c++里面的函数指针，只检查类型，不检查参数名。

c.其它功能
如：定义数组、定义Class类型等可以查看官方手册

例子

a.TypeScript在String原型上增加方法
TypeScript代码

interface String {
    foo(): number;
}
String.prototype.foo= function() {
    return 0;
}

转化后的JS代码

1
2
3

String.prototype.foo = function () {
    return 0;
};

b.TypeScript在类型上增加静态成员
TypeScript代码

// As of TypeScript 1.4 you can now also extend static members:
interface StringConstructor {
    bar(msg: string): void;
}
String.bar = function(msg: string) {
    console.log("Example of static extension: " + msg);
}

前言

接口interface

例子

推荐资料