TypeScript入门-接口

2024年2月3日 189次阅读 来源: wuweisen

进修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
    原文地址: https://segmentfault.com/a/1190000008967893
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞