Typecript接口基础教程(附实例)

60 阅读5分钟

在这篇博文中,我们将学习Typecript中的Interfaces教程。

它是面向对象编程的概念之一。其他概念包括多态性封装抽象类

Typecript接口基础教程

typescript中的接口与其他编程语言如java中的接口相同。

它不提供任何实现,它是实现接口的类的契约/规则。

当接口被编译成javascript时,没有代码产生,也就是说,没有运行时代码的解释。

它提供了类型安全的编译1。在javascript中不产生代码的原因是没有类型检查。

接口允许开发者对代码进行扩展,以编写自己的实现。接口包含属性、成员变量和函数或方法定义。

如何在Typescript中声明接口

接口可以用interface 关键字来创建,它包含成员变量和方法头,周围用大括号包围。

下面是一个接口声明的语法

interface interfacename{  
//member variables  
//methods without implementation  
}  

下面是一个接口的例子

interface IEmployee {
    userId: number;
    username: string;
    roleName: string;
    getRoleName: (string) => string; // arrow function
    getUsername(number): string; 
}

类型安全的例子

类型安全如何在typescript中工作? 类型检查是javascript的优势之一,它是测试类型检查的简单代码。

创建了一个接口,该接口的成员变量只有字符串类型。创建了一个实现这个接口的类,它提供了一个接口变量的公共构造函数

interface IEmployee {   
    name: string;  
}  
class Employee implements IEmployee {   
    constructor(public name: string) {   
    }  
}  
let validEmp: Employee = new Employee("frank"); // valid Object  
let invalidEmp: Employee = new Employee('kiran','abc'); // invalid Object  
let invalidEmp1: Employee = new Employee(1); // invalid Object  

validEmp是一个有效的类,它实现了接口的初始化,因为参数字符串只被传递。
invalidEmp将抛出编译错误--预期1个参数,但得到2个。构造函数只接受一个字符串,但我们正在传递两个字符串
invalidEmp1--抛出编译错误--*类型'1'的参数不能分配给类型'字符串'的参数。*原因是用数字创建一个对象,而它只接受类型字符串的值。类型安全对开发人员的好处是避免在运行时出现类型问题。
请看下面的截图,代码是如何在typecript中生成的。
typescript interface example with tutorials

接口不同成员变量的声明示例

在下面这个部分,我们将看到声明不同变量类型的各种用例。

接口可选类型示例

有时,当接口传递给函数时,函数的调用者不会发送所有需要的参数。可选的成员变量是在变量的末尾用问号(?)来声明的。IShape接口有两个可选参数,另一个函数有接口参数。调用含有接口参数的函数时,可以使用零参数、一个参数或两个参数。

interface IShape {   
    length?: number;  
    width?: number;  
}  
function createShape(shape: IShape): any{  
}  
let shape = createShape({ length: 10 }) //valid  
let shape1 = createShape({}) //valid  
let shape2 = createShape({ length: 10,width:20 }) //valid  

接口只读类型的例子

这是声明接口定义的另一种方式,给开发者更多的灵活性。Readonly 关键字与成员变量一起使用,并在变量之前声明。成员变量在对象创建时被初始化。一旦赋值,变量将不会被修改。一旦赋值,如果赋值给腿部属性,它将被编译,而赋值给耳朵将不会被编译,因为这是readonly 属性。

interface Animal {   
     readonly ears: number;  
    legs: number;  
}  
let animal: Animal = { ears: 2, legs: 4 }  
animal.ears = 1;// this will not compiles  
animal.legs = 4; // this compiles fine  

函数接口示例

函数类型可以用接口来声明。这就像函数的头+参数+类型。调用函数应该有相同数量的参数,但名称可能不同,类型应该相同,返回类型应该相同 声明和调用函数

interface Vehicle {  
    (name: string,  
    wheels:number): string;  
}  
  
let car: Vehicle;  
car = function(n: string, w: number) {  
    return n;  
}  

你可以省略函数类型字符串、数字,因为typescript可以根据传递的值进行类型推断。

索引类型签名示例

我们也可以用index types 来声明接口参数。

我们什么时候使用索引类型?很简单,如果接口包含很多相同类型的成员变量,我们就会使用这个。

这是在接口中的一种数组声明。

numberArray有索引签名,数字索引从0开始。

索引签名只适用于字符串和数字数据类型。

  
interface numberArray {  
    [index: number]: number;  
}  
let arr: numberArray;  
arr = [11,5,8];  
console.log(arr[0]); // returns 11  

接口继承的例子

Inheritance 是面向对象编程中的一个重要概念。

它允许扩展通用的东西并实现重用机制。

继承可以使用implementsextends关键字来实现。

使用扩展的例子

- 继承的例子 这是单一的继承,因为超类只被一个类所扩展。

interface Animal {   
   legs:number   
}   
interface Lion extends Animal {   
   eat:string   
}   
var lion = {};   
lion.legs = 4   
lion.eat = "nonveg"   
console.log('Number of legs='+ lion.legs+' Eat type= '+lion.eat);  

Javascript生成的代码

var lion = {};  
lion.legs = 4;  
lion.eat = "nonveg";  
console.log('Number of legs=' + lion.legs + ' Eat type= ' + lion.eat);  

上述代码的输出是

Number of legs=4 Eat type= nonveg  

多重继承是不可能的,但你可以使用 implements 或间接继承来实现,如下所示

superclass1-->superclass2-->childobject  

使用实现接口的例子

使用implements 关键字,你可以实现多个接口。

请看下面的例子。在这个例子中,创建了两个接口,通过实现两个接口创建了一个类。你可以像这样实现多个继承

interface ISuper1{  
    method1():void  
}  
interface ISuper2{  
    method2():void  
}  
class Child implements ISuper1, ISuper2 {  
    method1(){  
        console.log('Method 1');  
    }  
    method2(){  
        console.log('Method 2');  
    }  
}   
var child = new Child();  
child.method1();  
child.method2();  

接口在typescript中的优势

接口有很多优点

  • 通过类型检查提供类型安全
  • 支持多重继承
  • 对象之间的松散耦合
  • 实现抽象化

接口和类之间的关系

例如,为DownloadData定义一个接口

interface DownloadData{  
download():void;  
}  

为下载xml和json提供一个类

class DownloadXml implements DownloadData {  
    download(){  
        console.log('download xml data');  
    }  
   
}   

class DownloadJson implements DownloadData {  
    download(){  
        console.log('download JSOn data');  
    }  
   
}   

类实现了一个接口,并且必须为一个方法提供一个实现。