Typescript使用

Typescript v0.8.1发布后使用有段时间了，相信很快就能发布1.0正式版了，由于目前的项目主要使用Actionscript3、Jquery以及vanilla.js(Ecmascript 262 + DOM，也就是一般泛指的Javascript)，实际用到项目中的并不多。

以前，微软也发布过基于Ecmascript 262的实现JScript，后来还是被vanilla.js和Jquery替代了，感觉这个版本的实现会成为未来主流的web语言，至少是操作XML的主流语言。

类型

Typescript依然分为值类型和引用类型：

1. number数值类型，这里不同的是没有常用的int和unit类型
2. string字符串类型
3. boolean布尔类型/门类型
4. undefined类型
5. null类型
6. any类型，同常用的*类型
7. array数组类型，只有这种数组，没有常用的Vector类型
8. function类型
9. object类型

类型和语法使用上差不多，感觉变成语言的语法越来越统一了。

类型转换

var str2: any = "abc";
var strNum2: number = <number> str2;
strNum2 += 5;

any类型可以转换任意类型。

类型判断

还是原型链的判断：

function CalculateArea(div: HTMLElement): string {
    if (div instanceof HTMLDivElement) return "div";
    if (div instanceof HTMLCanvasElement) return "canvas";
    if (div instanceof HTMLVideoElement) return "video";
    throw new Error("不支持的类型!");
}

访问修饰符

private str: string = "hk";
public num: number = 666;
var num2: number = 888;
num3: number = 999;
static b: boolean = true;
public data: object;

访问权限语法上更简洁，可以类中类，也可以public 私有访问。

数组

一维数组

var arr: any[] = new Array();
var strArr: object[] = [{id: 1, name: "hk1"}, {id: 2, name: "hk2"}];

简洁了好多。

二位数组

var array1: number[][] = [
    [1, 2, 3],
    [4, 5, 6]
];

var array2: string[][] = new Array();
array2.push(["哇", "哈", "哈"]);
array2.push(["啦", "啦", "啦"]);

多维数组的时候，可能会有好多[]。

接口

interface IInterface { 
    name: string, 
    age: number
} 

函数接口：

interface IInterfaceFunc {
    (input: string) : string;
}

函数

函数依然是Typescript的一等公民，传参也一样。

function func(index: number = 0, sprite: {x: number, y: number}, shape: Shape): string
{
    return console.log("x:", x, "y:", y);
}

还可以签名，也就是返回指定类型和传递指定参数：

var fun : (str: string) => void;
var func : (num: number) => number = otherFunc;

但是，这也导致不易读。

还可以加可选参数：

function func(index: number, data?: object): string
{
    if(data){}
}

省略参数：

function func(...nums: number[]): string
{
    return nums.toString();
}

箭头函数（Arrow Function）

var fun: function = () => {};
setTimeout(() => {}, 1000);

其实就是封装了一下，还是在 prototype 里，但是感觉会成为以后的Ecmascript 262标准，现在的 runtime 确定 this 指向，没有词法确定指向好用。

多了一个之前的Ecmascript实现中都没有直接支持的特性： 函数重载

function attr(name: string): string;
function attr(name: string, value: string): Sprite;

function attr(objMap: any, value?: string): any {
    if (objMap && typeof objMap === "object") {}
    else {}
}

模块和类

模块相当于package:

module indeex { 
    export class Module1
    {
        public index: number = 0;
        constructor()
        {
            this.index ++;
        }

        static consoleIndex(): void
        {
            console.log(this.index);
        }
    }
}

Class 类的构造函数变成了constructor关键字，extends 继承方式都一样。

也是封装，编译后就是现在的写法：

var Module1;
(function(Module1) {
    var index = 0;
    function consoleIndex() {
        console.log(this.index);
    }
    Module1.consoleIndex = consoleIndex;
})(Module1 || (Module1 = {}));

枚举

enum Names { Red, Green, Blue }
console.log(Color.Red);
var c: number = Color.Green;
console.log(Color[c]);

实现和现在差不多。