接口

作者: penelope_2bad | 来源:发表于2020-07-20 10:57 被阅读0次
    1.接口初探
    interface LabelledValue {
      label: string;
    }
    
    function printLabel(labelledObj: LabelledValue) {
      console.log(labelledObj.label);
    }
    
    let myObj = {size: 10, label: "Size 10 Object"};
    printLabel(myObj);
    
    2.可选属性

    这段代码写的很好

    interface SquareConfig {
      color?: string;
      width?: number;
    }
    
    function createSquare(config: SquareConfig): {color: string; area: number} {
      let newSquare = {color: "white", area: 100};
      if (config.color) {
        newSquare.color = config.color;
      }
      if (config.width) {
        newSquare.area = config.width * config.width;
      }
      return newSquare;
    }
    
    let mySquare = createSquare({color: "black"});
    
    3.只读属性
      interface Point {
      readonly x: number;
      readonly y: number;
    }
    
    let a: number[] = [1, 2, 3, 4];
    let ro: ReadonlyArray<number> = a;
    ro[0] = 12; // error!
    ro.push(5); // error!
    ro.length = 100; // error!
    a = ro; // error!
    
    1. 上面代码的最后一行,可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。 但是你可以用类型断言重写:
    a = ro as number[];
    

    4.最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用readonly。

    4. 额外的属性检查

    对象字面量会被特殊对待而且会经过 额外属性检查,当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。

    interface SquareConfig {
        color?: string;
        width?: number;
    }
    
    function createSquare(config: SquareConfig): { color: string; area: number } {
        // ...
    }
    
    // error: 'colour' not expected in type 'SquareConfig'
    let mySquare = createSquare({ colour: "red", width: 100 });
    
    1. 方法一:绕开这些检查非常简单。 最简便的方法是使用类型断言:
    let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);
    
    1. 方法二:添加一个字符串索引签名
    interface SquareConfig {
        color?: string;
        width?: number;
        [propName: string]: any;
    }
    
    1. 还有最后一种跳过这些检查的方式,这可能会让你感到惊讶,它就是将这个对象赋值给一个另一个变量: 因为 squareOptions不会经过额外属性检查,所以编译器不会报错。
    let squareOptions = { colour: "red", width: 100 };
    let mySquare = createSquare(squareOptions);
    
    5. 函数类型
    1. 可索引的类型
      7.类类型
      8.继承接口
      9.混合类型
      10.继承接口类

    相关文章

      网友评论

          本文标题:接口

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