TypeScript 体验

TypeScript是JavaScript的一个超集.是由微软开发的.因为开始H5的需要(使用WebStrom编辑器),所以没有使用VS重量级的IDE.

先建一个HTML来测试TP,步骤如下:

①: File->New Project...

我选择新建一个空项目,我只是想测试TypeScript

先停下 , 我们需要Node.js 的 npm ( 可以在node.js的官网下载并安装 )

好 , 使用DOS测试Node.js是否安装成功 命令:node -v

返回了node.js的版本号,显然是成功的.

通过npm(npm安装node.js会自动安装,所以需要先安装node.js)安装typescript插件(用它来翻译TS成JS)

在CMD中使用命令 npm install -g typescript (升级typescript版本而用这个命令)

我们可以先看看npm的版本号:

好了我的npm的版本为 : 5.3.0

可以安装typescript插件了,需要多等一些时间,大概3~5分钟:

下图状态为安装完毕

好了 , 回到WebStrom.

我写的TS如下(greeter.ts):

/**
 * Created by CV-PC153 on 2017/8/7.
 */

class  Student{
    fullName:string;
    constructor(public firstName,public middleInitial,public lastName){
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person{
    firstName : string;
    lastName : string;
}
enum Color{ Red , Green , Blue }
function greeter(person:Person):string{
    let  name : string = "snow";
    let  age : number = 27;
    let  call : string = `hello , my name is ${ name } , i will be ${ age + 1 } years old next month`;
    console.log(call);
    //数组
    let  list:number[] = [1,2,3];
    let  list_vector : Array = [1,2,3];
    console.log( list[0] );//打印第一个元素
    //元组测试
    let tuple : [string , number , number];
    tuple = ["Ainy", 1,2];
    console.log(tuple[0]);//打印第一个元素(Ainy)
    console.log(tuple[3]);//访问越界元素(不打印任何元素)
    tuple[3] = "Kayer";//越界赋值 增加一个元素
    tuple[3] = 3;//重新赋值 string -> number
    console.log(tuple[0]);
    //枚举(默认情况下从0开始为元素编号)
    let  c : Color = Color.Blue;
    //alert( c );//会弹出2
    alert(Color[2]);//弹出Blue
    //任意类型(any)
    let notSure : any = 1;
    notSure = "Kayer";


    return "Hello," + person.firstName + "." + person.lastName;
}
let user : Student = new Student("Aonaufly" , "H.","User");
document.body.innerHTML = greeter(user);

我们使用 tsc greeter.ts   (不过要注意的是 , DOS的path的要指向TS的路径),如下图:

可以看看 , 编译后的JS :

/**
 * Created by CV-PC153 on 2017/8/7.
 */
var Student = (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
function greeter(person) {
    var name = "snow";
    var age = 27;
    var call = "hello , my name is " + name + " , i will be " + (age + 1) + " years old next month";
    console.log(call);
    //
    var list = [1, 2, 3];
    var list_vector = [1, 2, 3];
    console.log(list[0]); //
    //
    var tuple;
    tuple = ["Ainy", 1, 2];
    console.log(tuple[0]); //(Ainy)
    console.log(tuple[3]); //(κ)
    tuple[3] = "Kayer"; //縳(-string , tuple[0])
    tuple[3] = 3; //2number,,number = 3
    console.log(tuple[0]);
    //(′0)
    var c = Color.Blue;
    //alert( c );//2
    alert(Color[2]); //Blue
    //(any)
    var notSure = 1;
    notSure = "Kayer";
    return "Hello," + person.firstName + "." + person.lastName;
}
var user = new Student("Aonaufly", "H.", "User");
document.body.innerHTML = greeter(user);

html :