TS学习笔记--接口

基础类型

//  ts 变量一开始是什么类型，后续赋值只能沿用
 (()=>{
    console.log('测试');
    // 1、布尔类型
    let flag:boolean = true
    console.log(flag);

    // 2、数字
    let a1: number = 10 // 十进制
    let a2: number = 0b1010  // 二进制
    let a3: number = 0o12 // 八进制
    let a4: number = 0xa // 十六进制

    // 3、字符串
    let name:string = 'tom'
    name = 'jack'
    // name = 12 // error
    let age:number = 12
    const info = `My name is ${name}, I am ${age} years old!`

    console.log('================');
    

    // 4、undefind类型
    // let und:undefined = undefined
    // let nul:null = null
    // console.log(nul);
    // console.log(und);
    
    // undefind 和 null 都可以作为其他类型的子类型，如赋值给number,关闭严格模式
    //  tsconfig.json 中 设置 "strict": false, 
    // let flag1:number = undefined
    // console.log(flag1);

    console.log('================');

    // 5、数组类型
    // 数组定义方式1
    // let 变量名:数据类型[] = [值1，值2...]
    let arr1:number[] = [10,20,30]
    console.log(arr1);
    

    // 数组定义方法2 泛型写法
    let arr2:Array<number> =  [100,200,300]
    console.log(arr2);
    
    // 注意问题:数组定义后，里面的数据类型必须和定义时候的类型一致，否则会提示错误，编译也不会通过


    // 元组类型在定义数组的时候，类型和数据的个数一开始就限定了，一一对应
    let arr3:[string,number,boolean] = ['黄',123.12345,true]
    console.log(arr3);
    // 注意类型：元组类型在使用的时候，数据的类型的位置和数据的个数 一个和定义元组的时候的数据类型及位置
    console.log(arr3[0].split(''))
    console.log(arr3[1].toFixed(2))

    console.log('================');

    // 6、枚举类型,枚举里面的值都可以称之为元素，每个元素都有自己的编号，编号从0开始，依次递增加1

    enum Color{
        red=1,
        green,
        blue
    }
    
    // 定义Color的枚举变量来接受枚举的值
    let color:Color = Color.red
    console.log(color);
    console.log(Color.red,Color.green,Color.blue);
    console.log(Color[3]); // 输出blue

    // 小例子
    enum Gender{
        // 可以写中文的数据值，但是不推荐
        女,
        男
    }

    console.log(Gender.男);
    console.log('================');
    
    // 7、any 任何类型
    let str:any = 100
    str = '123'
    console.log(str);

    // 一个数组中要存储多个数据，个数不确定，类型不确定,可以用any定义
    let arr5:any[]= [100,'123',true]
    console.log(arr5);
    // 缺点 没有报错信息
    // console.log(arr5[0].split(''));
    console.log(arr5[1].split(''));
    
    // 8 void,在函数声明的时候，在小括号的使用冒号:void,代表该函数没有任何返回值
    function showMsg():void{
        console.log('测试void');
    }
    showMsg()
    console.log('================');

    // 9、object类型
    // 定义一个函数，参数是object,返回值也是object类型
    function getObj(obj:object):object{
        console.log(obj);
        return {
            name:'黄',
            age:27
        }
    }
    console.log(getObj({
        name:'卡卡西'
    }));
    console.log(getObj(new String('123')));
    console.log(typeof new String('123'));
    
    // 10、联合类型（Union Types）标识取值可以为多种类型中的一种
    // 需求1：定义一个函数得到一个数字或字符串值的字符串形式值
    function getString(str:number|string):string{
        return str.toString()
    }
    console.log(getString('123'));
    
    // 需求2：定义一个函数得到一个数字或字符串值的长度
    // 类型断言:告诉编辑器，我知道我自己是什么类型，也知道自己在干什么
    // 语法1:<类型>变量名
    // 语法2:值 as 类型

    function getString2(str:number|string):number{
        // return str.toString().length
        // 如果str本身就是string类型，呢么是没有必要调用toString类型
        if((<string>str).length){
            return (<string>str).length
        }else{
            return str.toString().length
        }
    }
    console.log(getString2('1235'));
    console.log(getString2(123555));

    // 类型推断:没有明确的指定类型时候推测出来一个类型
    let txt = 100
    console.log(txt);
    
    let txt2;
    txt2 = 100
    txt2 = '123'
    console.log(txt2);
    

 })()    

接口

// 接口:是一种类型，是一种规范，是一种规则，是一种能力，是一种约束
(()=>{
    console.log('123');
    // id是number类型, 必须有, 只读的
    // name是string类型, 必须有
    // age是number类型, 必须有
    // sex是string类型, 可以没有
 
    // 定义一个接口，该接口作为person对象的类型使用，限定或者是约束该对象的属性数据
    interface IPerson {
        readonly id:number // 只读 number类型
        name:string
        age:number
        sex?:string // 可有可无
    }


    // 定义一个对象，该对象的类型就是我定义接口IPerson
    const person:IPerson={
        id:1,
        name:'小甜甜',
        age:18,
        // sex:'女'
    }
})() 

函数类型

// 为了只是使用接口表示函数类型，我们需要给接口定义一个调用签名。
// 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
(()=>{
    // 函数类型：通过接口的方式作为函数的类型来使用

    // 定义一个接口 原来作为某个函数的类型来使用
    interface ISearchFunc{
        // 定义一个调用签名
        (source:string,subString:string):boolean
    }
    // 定义一个函数，该函数就是上面定义的接口
    const searchString:ISearchFunc = function (source:string,subString:string):boolean{
        // 在source 字符串中 查找 subString 字符串
        return source.search(subString) > -1
    }

    // 调用
    console.log(searchString('first','two'));
    
})()

类类型

// 类的类型，可以通过接口来实现
(()=>{
    // 定义一个接口
    interface IFly{
        // 该方法没有任何的实现
        fly()
    }

    // 定义一个类，这个类的类型就是上面定义的接口
    class Person implements IFly{
        fly(){
            console.log('我会飞我是超人');
        }
    }

    const person = new Person()
    person.fly()


    // 定义一个接口
    interface ISwim{
        swim()
    }

    // 这个类的类型就是IFly和Swim
    class Person2 implements IFly,ISwim{
        fly(){
            console.log('我会飞'); 
        }
        swim(){
            console.log('我会走');
        }
    }

    const person2 = new Person2()

    person2.fly()
    person2.swim()

    // 总结：类可以通过接口的方式，定义当前这个类的类型
    // 类可以实现一个接口，类也可以实现多个接口

    // 接口可以继承其他多个接口
    interface IMyFlyAndSwim extends IFly,ISwim{}
    class Person3 implements IMyFlyAndSwim{
        fly(){
            console.log('我会飞3');
        } 
        swim(){
            console.log('我会走3');
        }
    }
    const person3 = new Person3()

    person3.fly()
    person3.swim()

    // 总结：接口和接口之间叫继承(关键字：extends)，类和接口之间叫实现（使用的是implements）
})()