Hook.ts 接口就是专门为json而生的一种类型定义方式,当然也可以定义类他是一 种规范。 函数定义

本文详细介绍了TypeScript中接口的应用,包括readonly属性用于创建只读对象、接口定义函数、类的实现接口以及接口的多重继承。同时展示了如何定义数组类型、泛型数组和元组,并演示了枚举的使用方式,包括通过下标获取枚举值。
摘要由CSDN通过智能技术生成

第一中是  readonly  只读取属性不可修改

   // 需求:创建人的对象,需要对人的属性进行一定的约束
    // id是number类型,必须有,只读的
    // name是string类型,必须有
    // age是number类型,必须有
    // sex是string类型,可以没

    接口中对应好每个的个数 
     ? 代表当前属性可有可无
    readonly  只允许你读取不可修改
    interface iPerson {
         readonly id: number,
       name: string,
         age: number,
         sex: string
     }

     const person: iPerson = {
         id: 1,
       name: "超人",
         age: 35,
         sex: '男'
     }
     person.id = 2;

第二中是   接口定义一个  函数function

 // 2、接口定义一个  函数function
     interface iSearchFunc {
         (source: string, substring: string): boolean
     }
     // 实现一个在字符串中查找的一个方法,找到就是true 没有就是 flase
     const searchString: iSearchFunc = (source: string, substring: string) => {
         return source.search(substring) > -1;
     }
     console.log(searchString('你好啊!李总', '李'));
    // 找到就是true 没有就是 flase

     return{
         searchString
     }

第三中  1.接口定义一个  类class

 interface iFly {
         fly(): string
    }

     class MyPerson implements iFly {   // implements 让当前的类  使用当前的接口
         fly(): string {
           return '我的高层决定,乘坐煤气罐完成fly的梦想!'
        }
     }
     const person = new MyPerson(); // 实例对象
    //console.log(person.fly());

    return {
         MyPerson
    }

  2.不建议把属性定义到 interface 上 interface 中定义方法就行


     interface iFly {
         name: string
         fly(): string
    }

     class MyPerson implements iFly {   // implements 让当前的类  使用当前的接口
         name: string = 'blue'
         fly(): string {
             return '我的高层决定,乘坐煤气罐完成fly的梦想!'
         }
     }
     const person = new MyPerson(); // 实例对象
     console.log(person.fly());

     return {
         MyPerson
     }

   3.多个接口 的使用

  interface iFly {
        fly(): string
  }
  interface iSwin {
        swin(): string
  }


  //interface iFly {
  //      swin(): string
  //      fly(): string
  //}
  //  这个方法可以用,但是因为有时候会有多个接口所有,根据实际情况去选择


 // implements 让当前的类  使用当前的接口

    class MyPerson implements iFly, iSwin {  
        fly(): string {
            return '我是第一个接口'
        }
        swin(): string {
            return '我是多个接口'

        }
    }
    const person = new MyPerson(); // 实例对象
    console.log(person.fly());
    console.log(person.swin());

    return {
        MyPerson
    }

 4.类的继承  和3里的差不多多了一行代码

 interface iFly {
        fly(): string

    }
    interface iSwin {
        swin(): string
    }
    // 类的   继承
    interface FlyAndSwim extends iFly, iSwin { };



    class MyPerson implements FlyAndSwim {   // implements 让当前的类  使用当前的接口
        fly(): string {
            return '我是第一个接口'
        }
        swin(): string {
            return '我是多个接口'

        }
    }
    const person = new MyPerson(); // 实例对象
    console.log(person.fly());
    console.log(person.swin());

    return {
        MyPerson
    }

 数组的类型定义


    // var arr: number[] = [12, 34, 45, 56, 78]

    // 泛型的写法
    var arr1: Array<number> = [12, 34, 35, 56, 67]
    var arr2: Array<string> = ['ccc', 'aaa', 'bbb']

    var arr3: Array<{ a?: number, b?: number }> = [{ a: 34 }, { b: 43 }]

    var arr4: Array<number[]> = [[45, 67], [12, 34]]

    var arr5: Array<string | number> = ['ccc', 12, 'ppp']

    // 元组
    // 所有人的位置和类型一定要对应上
    // 个数上也是有所限制的  [string, number, string]  = 3个['aa', 12, 'ccc'] 就是3个
    const arr6: [string, number, string] = ['aa', 12, 'ccc']

 默认的每个都会标注(下标) 而且还是一个递增的关系


    // enum Color {
    //     red,
    //     green,
    //     blue
    // }
    // console.log(Color.red, Color.green, Color.blue);

    // return Color

 根据下标也可以拿到对应的值

   // enum Color {
    //     red=20,
    //     green,
    //     blue
    // }
    // console.log(Color.red, Color.green, Color.blue);

    // return Color


    enum Color {
        red,
        green,
        blue = 22
    }
    console.log(Color.red, Color.green, Color.blue);
    console.log(Color[22]);

    return Color

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值