美文网首页
TypeScript 之 接口 基本类型 类 函数

TypeScript 之 接口 基本类型 类 函数

作者: _一九九一_ | 来源:发表于2019-09-26 15:59 被阅读0次

    本文关键字:

    interface
    as
    type
    public
    private
    protected
    readonly
    static
    implements

    接口定义对象 变量 数组等

    interface List {
      readonly id:number; // 只读  属性
      name:string,
      [x:string]:any,   // 用任意的字符串去索引List,可以得到任意的结果
      age?:number,    // 可选属性
    }
    
    interface Result {
      data:List[]
    }
    
    function render(result: Result){
      result:data.forEach(value => {
        console.log(value.id,value.name)
      })
    }
    
    // 后端接口返回
    let result = {
      data:[
        {id:2,name:'A',sex:'man'}, // sex:不可控字段 莫名其妙传来
        {id:3,name:'B'}
      ]
    }
    
    render(result);
    

    类型断言

    // 方式1:
    render({
      data:[
        {id:2,name:'A',sex:'man'}, // sex:不可控字段 莫名其妙传来
        {id:3,name:'B'}
      ]
    } as Result)
    
    // 方式2:
    render(<Result>{
      data:[
        {id:2,name:'A',sex:'man'}, // sex:不可控字段 莫名其妙传来
        {id:3,name:'B'}
      ]
    })
    

    不确定一个接口有多少属性的时候,使用可索引接口

    • 数字索引
    interface StringArray {
      [index: number]: string   // 用任意的数字去索引StringArray 都会得到一个string 声明了一个字符串类型的数组
    }
    
    let chars: StringArray = ['A','B'];
    
    • 字符串索引
    interface Names {
      [index: string]: string,   // 用任意的字符串去索引Names 都会得到一个string 声明了一个字符串类型的数组
      [z: number]: string,      // 用数字去索引Names  兼容number的类型
      [z: number]: any,        // 用数字去索引Names  兼容number的类型
      // y: number,           // 报错
    }
    
    let chars: Names = ['A','B'];
    

    接口定义函数

    
     // 方式一:
      let add: (x: number, y: number) => number;
    
      // 方式二:
      interface Add {
        (x: number, y: number) : number
      }
    
      // 方式三: 类型别名
      type Add = (x: number, y: numner) => number
    
      // 方式四:
      let add: Add = (a,b) => a+b
    
      function (x: number, y: number) {
        return x + y;
      }
    
      // 混合定义接口
      interface Lib {
        (): void;
        version: string;
        doSomething: void;
      }
    
      // 可选参数必须位于必选参数之后
      function (x: number, y?: number) { 
        return y? x + y : x ;
      }
    

    成员修饰符

    class Dog{
      constructor(name: string){
        this.name = name
      }
      public name: string = 'dog'
      private pro(){}
      protected pro(){}
      readonly leg: number = 4  // 只读属性一定要被初始化
      static food: string = 'bones'
    }
    

    抽象类 只能被继承 无法实例化

     abstract class Animal{
       eat(){
         console.log('eat')
       }
     }
     class Dog extend Animal{
       constructor(name: string){
         super(name)
         this.name = name
       }
       name: string
       run(){}
     }
    

    类与接口的关系

    • 必须实现接口中所有的属性
    • 接口只能约束类的公 有成员
    • 接口可以相互继承 一个接口可以继承多个接口


    interface Human{
      name: string,
      eat(): void
    }
    
    //类与接口继承
    class Asiam implements Human {
      constructor(name: string){
        this.name = name
      }
      name: string
      // private name: string   报错
      eat(){}
      sleep(){}
    }
    
    //接口继承接口
    interface Man extends Human{
      run(): void
    }
    
    interface Child{
      cry(): void 
    }
    
    //接口继承接口
    interface Boy extends Man,Child{}
    
    let boy: Boy = {
      name:'',
      run(),
      eat(),
      cry()
    }
    
    class Auto {
      state = 1
    }
    // 接口继承类
    interface AutoInterface extends Auto {
    
    }
    
    // 接口只能约束类的共有成员
    class C implements AutoInterface{
      state = 1
    }
    
    // Auto的子类 不必实现state属性 继承类state属性   实现AutoInterface接口 
    class Bus extends Auto implements AutoInterface{
    
    }
    

    相关文章

      网友评论

          本文标题:TypeScript 之 接口 基本类型 类 函数

          本文链接:https://www.haomeiwen.com/subject/jbqnuctx.html