浅探typescript(一)

        ts官网给出的定义：TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

首先通过npm 安装typescript

npm i -g typescript

 之后就可以在.ts文件中写ts代码啦，写好的代码可以通过tsc编译为js代码

tsc demo.ts

 之后会生成一个demo.js文件。

一、TS相比JS增加了数据类型，number,string,boolean,undefined,null等等。普通类型在定义之后就不能再改变类型。

二、任意类型 any

let a:any = 'string';
a = 123;

JS中var a = 123;此时未指定类型。便默认为任意类型。

三、联合类型 表示值可以符合多种类型

let b : string | number;
b = 12;
b = 'abc';
b = true; //此行报错
function fun(b:string|number){
    return b.length; //此行报错，返回值的类型必须是公共类型
}

四、数组 类型 + []

let arr1:number[] = [1,2,3];
let arr2:string[] = ['a','b','c'];
let arr3:any[] = [1,'abc',3];

五、对象           接口 对象的类型---接口

interface

接口首字母大写

interface Person{
   name:string;
   age:number;
}
//对象受到接口的约束
let ben:Person = {
   name:'ben',
   age:17
}
//定义的变量与接口保持一致

定义的变量必须与接口严格一致，也就是必须要有name和age两个属性，且数据类型一致。

可选属性

interface Person2 = {
    name: string;
    age?= number;    //可选属性
}
let ben4:Person2 = {
    name:'ben',
    age: 17   //这个属性是可以选择的，也就是有没有都是符合规范的
}

任意属性

interface Person3{
    name: string;            //确定属性
    age?: number;            //可选属性
    [paropName:string]:any;  //任意属性 注意：一旦定义，确定属性和可选属性必须是他的子属性
}
let ben5:Person3 = {
    name: 'ben',
    sex:'man'
}

任意属性可以添加任意多符合定义规范的属性，如

let ben:Person3 ={   
    name:'ben',
    sex:'man',
    look:'hansome',
    handsome:true
}

六、函数声明

 function f(x:number,y:number):number{    //函数声明 
        return x+y;
    }
    //f(3,5);   //参数个数匹配
    var f2 = function(x:number,y:number):number{   //函数表达式
        return x+y;
    }
    //f2(3,5);
    //参数默认值
    function f3(x:number=5,y:number):number{    //函数声明 
        return x+y;
    }
    //f3(3,5);

    //参数默认值
    function f4(x:number,y:number=5):number{    //函数声明 
        return x+y;
    }
    console.log(f4(3)); //8
    //可选参数   注意：可选参数必须接在必需参数的后面（可选参数后不允许出现必需参数）
    function f5(x:number,y?:number):number{    //函数声明 
        if(y){
            return x+y
        }else {
            return x
        }
    }
  // console.log(f5(3,8));   //11

  //类型别名   type
  type s = string; //类型别名 
  var name:s = 'sonia';
    function fun6(name:s):s{
        return 'hello ' + name;
    };
    fun(name);
    type abc = string | number[];
    type n = number;
    a3 = 'abc';
    a3 = [1,2,3];
    function fun7(a3:abc):n{
        return a3.length;      //对于联合类型返回符合所有类型里共有的属性和方法
    };