TypeScript入门-接口

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

▓▓▓▓▓▓ 大致介绍

　　在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

▓▓▓▓▓▓ 接口

　　例子：

    function printLabel(labelledObj: { label: string }) {
      console.log(labelledObj.label);
    }

    let myObj = { size: 10, label: "Size 10 Object" };
    printLabel(myObj);

　　printLabel函数有一个参数，要求这个参数是个对象，并且有一个属性名为label的类型为string的属性

　　有时我们会传入多个参数，但是只检测指定的参数有没有

　　用接口来实现上面的例子：

    interface LabelledValue {
      label: string;
    }

    function printLabel(labelledObj: LabelledValue) {
      console.log(labelledObj.label);
    }

    let myObj = {size: 10, label: "Size 10 Object"};
    printLabel(myObj);

　　注意：要用到关键字 interface

▓▓▓▓▓▓ 可选属性

　　有时接口里的属性不是必须的是可选的，那么只要加个？就可以了

    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"});

　　上面的代码中 config:SquareConfig规定了函数参数，{color: string;area: numner}规定了函数返回值的类型

　　使用可选属性的好处：

　　　　1、可以对可能存在的属性进行定义

　　　　2、可以捕获访问不存在的属性时的错误

▓▓▓▓▓▓ 只读属性

　　如果向让一个值只读，不可以修改就可以使用readonly

    interface Point {
        readonly x: number;
        readonly y: number;
    }

    let p1: Point = { x: 10, y: 20 };
    p1.x = 5; // error!

　　TypeScript具有ReadonlyArray<number>类型，它与Array<T>相似，只是把怕有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

    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!

▓▓▓▓▓▓ 额外的属性检查

　　看一个例子：

    interface SquareConfig {
        color?: string;
        width?: number;
    }

    function createSquare(config: SquareConfig): { color: string; area: number } {
        // ...
    }

    let mySquare = createSquare({ colour: "red", width: 100 });

　　起初会认为这个是对的，接口定义了两个可选属性color和width。函数实际传入了width属性和一个接口没有定义的colour属性，但是这段代码会报错。

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

　　最好的解决办法就是添加一个字符串索引签名

    interface SquareConfig {
        color?: string;
        width?: number;
        [propName: string]: any;
    }

▓▓▓▓▓▓ 函数类型

　　例子：

    interface SearchFunc {
      (source: string, subString: string): boolean;
    }

    let mySearch: SearchFunc;
    
    mySearch = function(src, sub) {
        let result = src.search(sub);
        if (result == -1) {
            return false;
        }
        else {
            return true;
        }
    }

▓▓▓▓▓▓ 可索引的类型

　　可索引类型比如a[10]或obj['a']。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

    interface StringArray {
      [index: number]: string;
    }

    let myArray: StringArray;
    myArray = ["Bob", "Fred"];

    let myStr: string = myArray[0];

参考资料:

　　　揭秘Angular2第3章　

TypeScript Handbook（中文版）