TS基础1（类型定义、接口）-学习笔记

TS基础1（类型定义、接口）-学习笔记

什么是TS

    //ts用法
    var n:number = 10;
    let str:string = '10';
    let str2:string = 'abc';
    let str3:string = `hello ${str2}`;
    let flag:boolean = true;
    let u:undefined = undefined;
    let nu:null = null;

    //类型定义后，不允许类型改变
    var a:string = '10';
   // a = 10;  error
    //任意值(Any) 用来表示允许赋 值为任意类型
    var a2:any = '10';
    a2 = 10;
    a2 = true;

    //变量如果在声明的时候，未指定其类型，会被识别为任意值
    var a3;
    a3 = 'abc';
    a3 = 10;

    // 10,  '10'  
    //联合类型   可以为多种类型中的一种
    var a4:string | number;
    a4 = 10;
    a4 = '10';

    //注意！！！！ 访问的是联合属性共有的属性中方法
    function getLength(str:string | number): number{
        return str.length
    };
    getLength(a4)
    //正确的写法
    // function getLength2(str:string | number[]): number{
    //     return str.length
    // };
    // getLength2([1,2,3])

    //数组  有多种定义方式
    //最简单的方式 类型+方括号 来表示数组
    var arr:number[] = [1,2,3,9];
    var arr2:string[] = ['a','b','c'];
    var arr3:any[] = ['a',2,true,[1,2]];

    //对象的类型  —— 接口
    //接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。
    //规范
    //接口首字母大写
    interface Person {
        name: string;
        age: number;
    };
    //对象受到接口的约束
    var tom: Person = {
        name:'tom',
        age:20
    };
    //定义的变量比接口少了属性是否允许  ——不允许
    var tom2: Person = {
        name:'tom'
    };
    //定义的变量比接口多了属性是否允许  ——不允许
    var tom3: Person = {
        name:'tom',
        age:20,
        sex:'男'
    };

    //可选属性  希望接口中有可选属性
    interface Person2 {
        name: string;
        age?: number;   //age属性是可选属性
    }
    var tom4: Person2 = {
        name:'tom'
    };
    var tom5: Person2 = {
        name:'tom',
        age:20
    };
    //可选属性只针对于当前设置的属性，仍然不能添加其它属性
    // var tom6: Person2 = {
    //     name:'tom',
    //     age:20,
    //     sex:'男'
    // };

    //任意属性   接口中添加一个任意的属性
    interface Person3 {
        name: string; //
        age?: number;   //age属性是可选属性
        [propName: string]: any;   //任意属性 
    }
    //注意：写入了任意属性[propName: string]  那么确定属性和可选属性必须是它的子属性
    var tom7: Person3 = {
        name:'tom',
        age:20,
        sex:'男',
    };

    //函数类型   输入和输出的约束
    //函数声明
    function f1(x: number,y: number): number{   //(x: number,y: number) 输入约束  : number 输出的约束
        return x+y
    }
    f1(1,1);
    //函数表达式
    var f2 = function(x: number,y: number): number{
        return x+y
    };
    //能否允许传多、少参数--不允许
    function f3(x: number,y: number): number{   
        return x+y
    }
    //f3(1,1,5);
    //f3(1);

    //参数默认值
    function f4(x: number= 5,y: number): number{   
        return x+y
    };
    //参数可选 
    //注意！！！ 可选参数必须接在必需参数后面
    //换句话说：可选 参数后面不允许再出现必需参数
    function f5(x: number= 5,y?: number): number{   
        if(y){
            return x+y;
        }else {
            return x;
        }
    };
    f5(10);
    //f5(10,10); //OK

补充：

	//类型别名   type
    type n = number;
    function f(i:n): n{
        return i
    };
    let n2: n = 100;

    //联合类型别名
    type a = string | number[];
    var x1:a = [2];
    var x2:a = '111';
    //var x3:a = 222;  //error