2

学习Angular 2 , 《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音,这意味着掌握 TypeScript 语音将更有利于高效地开发 Angular 应用。

接口

接口在面向对象设计中具有极其重要的作用,TypeScript 接口的使用方式类似于 Java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等类型。

属性类型接口

在 TypeScript 中,使用 interface 关键字来定义接口。示例代码如下:

interface FullName {
    firstName: string;
    secondName: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {age: 10, firstName: 'Wu', secondName: 'Weisen'};
printLabel(myObj);

上例中接口 FullName 包含两个属性:firstName 和 secondName,且都是字符串类型,这里有两点需要注意:

  • 传给 printLabel() 方法的对象只要“形式上”满足接口的要求即可,例如上例中对象 myObj 必须包含 firstName 和 secondName 属性,且类型都是 string,即使有多出的属性也不会报错。

  • 接口类型检查不会去检查属性顺序,但是属性的必须存在且类型匹配。

TypeScript 还提供了可选属性,可选属性的接口定义与普通接口的定义方式差不多,我们只需在可选属性变量名后面加一个?符号,示例代码如下:

interface FullName {
    firstName: string;
    secondName?: string;
}

function printLabel(name: FullName) {
    console.log(name.firstName + " " + name.secondName);
}

let myObj = {firstName: 'Wu'};    // secondName 是可选属性,可以不传
printLabel(myObj);

函数类型接口

接口除了描述带有属性的普通对象外,也能描述函数类型。定义函数类型接口时,需要明确定义函数的 参数列表返回值类型,且参数列表的每个参数都要有 参数名类型。示例代码如下:

interface encrypt {
    (val: string, salt: string): string
}

上边已经定义好了一个函数类型接口 encrypt,现在,我们来看看如何使用函数类型接口。

let md5: encrypt;
md5 = function(val: string, salt: string){
    console.log("orgin value:" + val);
    let encryptValue = /** 代码略 **/;
    console.log("encryptvalue:" + encryptValue);
    return encryptValue;
}
let pwd = md5('password', 'Angular');

对于函数类型的接口要注意以下两点:

  • 函数的参数名:使用时参数个数与对应位置变量的数据类型都必须保持一致,参数名可以不一样。

  • 函数的返回值:函数的返回值类型必须与接口定义的返回值保持一致。

可索引类型接口

可索引类型接口用来描述那些可以通过索引得到的类型,例如 userArray[1]、user、Object["name"]等。它包含一个索引签名,即通过特定的索引来得到指定类型的返回值。示例代码如下:

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

interface UserObject {
    [index: string]: string;
}

let userArray: UserArray;
let userObject: UserObject;

userArray = ['张三', '李四'];
userObject = {'name': '张三'};

console.log(userArray[0]);    // 输出:张三
console.log(userObject['name']);    // 输出:张三

索引签名支持字符串和数字两种数据类型。而当使用数字类型来索引时,JavaScript 最终也会将它装换成 字符串类型 后再去索引对象,如上例中,以下写法都是一样的:

console.log(userArray[0]);    // 输出:张三
console.log(userArray["0"]);    // 输出:张三

类类型接口

类类型接口用来规范一个类的内容,示例代码如下:

interface Animal {
    name: string;
}

class Dog implements Animal {
    name: string;
    constructor(n: string) {}
}

我们可以在接口中描述一个方法,并在类里去具体实现它的功能,示例代码如下:

interface Animal {
    name: string;
    setName(n: string): void;
}

class Dog implements Animal {
    name: string;
    setName(n: string) {
        this.name = n;
    }
    constructor(n: string) {}
}

接口扩展

和类一样,接口也可以实现相互扩展,即能将成员从一个接口复制到另一个里面,这样可以更灵活地将拆分到可复用的模块里面,示例代码如下:

interface Animal {
    eat(): void;
}

interface Person extends Animal {
    talk(): void;
}

class Programmer {
    coding(): void {
        console.log('wow~')
    }
}

class ITGirl extends Programmer implements Person {
    eat(){
        console.log('animal eat');
    }
    
    talk() {
        console.log('person talk');
    }
    
    coding(): void {
        console.log('I like coding');
    }
}

let itGirl = new ITGirl();    // 通过组合集成类来实现接口扩展,可以更灵活复用模块

itGirl.coding();

wuweisen
1.1k 声望34 粉丝

前端