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

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

文章目录

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

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