TypeScript初体验

最近在调研ionic2，先入门下typescript

• 环境搭建

sudo npm install -g typescript

安装在/usr/local/lib/node_modules/typescript路径下，在bin下有tsc和tsserver两条命令。

• 工程配置
  编译typescript，需设置配置文件tsconfig.json，可支持的参数详见官网

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

demo目录结构

屏幕快照 2016-12-01 下午7.45.43.png

main.js文件

interface Person {
    name: string;
    age: number;
}

function sortByName(a) {
    var result = a.splice(0);
    result.sort(function (x,y) {
        return x.name.localeCompare(y.name);
    });
    return result;
}

var result = sortByName([{name: "g3",age: 10},{name: "g2", age: 12}]);
alert(result[0].name + " " + result[1].name);

index.html

执行tsc命令，这时在built生成main.js文件

function sortByName(a) {
    // body...
    var result = a.splice(0);
    result.sort(function (x, y) {
        // body...
        return x.name.localeCompare(y.name);
    });
    return result;
}
var result = sortByName([{ name: "g3", age: 10 }, { name: "g2", age: 12 }]);
alert(result[0].name + " " + result[1].name);

html执行结果

屏幕快照 2016-12-01 下午7.51.09.png

发现是按照名字排序打印。

这种写html方式闲烦的话：直接执行node main.js，其结果也是g2 g3。