TypeScript极速入门示例

1. 全局安装typescript

   cnpm install -g typescript
   # 查看typescript版本
   tsc -v
   # 编译ts文件
   tsc test.ts
   

2. 基础代码示例

   //test.ts
   window.onload = function() {
     //定义/声明变量，变量赋值
     let num:number = 100;
     let str:string = 'a';
     str = 'b';
     console.log(str);
   
     var a:null = null;
     var b:undefined = undefined;
     var c:boolean = true;
   
     //任意类型
     var x:any = 1;//等价于js中var x = 1;
     x = true;
   
     //联合类型
     var y:string|number;
     y = 10;
     y = 'a';
   
     //函数
     function sum(x:number, y:number) {
       return x + y;
     }
     console.log(sum(2,3));
   
     //数组
     var arr:number[] = [1,2,3];
   
     //泛型
     var arr4:Array<number> = [1,2,3];
     var arr5:Array<number|string> = [1,'2',3];
   
     //接口（定义约束）  -- 类
     interface Person {
       name:string;
       age?:number;//可选属性
       [propName:string]:any;//任意属性，不建议写多个
     }
   
     //对象
     var tom:Person = {
       name:'tom',
       // age:18
     };
     var lucy:Person = {
       name:'lucy',
       sex:'女',
       msg:'11',
       abc:1
     };
   
     //函数的类型 参数（输入）和返回值（输出）
     function f(x:number, y:number):number {
       return x+y;
     }
     //void函数
     function fvoid(x:number, y:number):void {
       console.log(x,y,x+y);
     }
     //默认参数
     function fdefaultArg(x:number=5,y:number=10):number {
       return x + y;
     }
     fdefaultArg();//15
     fdefaultArg(1);//11
     fdefaultArg(2,10);//12
   
     //联合类型，作为函数参数
     var z:string|number;
     z = 'z';
     z = 10;
     function getLength(str:string|number[]):number {
       return str.length;
     }
     getLength('abc');
     getLength([1,2,3]);
   
   
   }