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

柔光的暖阳◎ 2022-10-19 08:05 42阅读 0赞

### 文章目录 ###

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

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

### 什么是TS ###

![在这里插入图片描述][20210710110654984.png]  
![在这里插入图片描述][20210710110729960.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]

//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

[20210710110654984.png]: /images/20221005/ad3d178b2b54450aa0087e4509dfe591.png
[20210710110729960.png]: /images/20221005/de44d5ac58014e878adba7170a451ca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/a0e66abfb0074928ad350295d0013588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/bdc8bd21b0b940269055882e6f3d857a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/85764572ca984ffe9c87681e4be0aec0.png