在这篇博文中,我们将学习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中生成的。

接口不同成员变量的声明示例
在下面这个部分,我们将看到声明不同变量类型的各种用例。
接口可选类型示例
有时,当接口传递给函数时,函数的调用者不会发送所有需要的参数。可选的成员变量是在变量的末尾用问号(?)来声明的。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 是面向对象编程中的一个重要概念。
它允许扩展通用的东西并实现重用机制。
继承可以使用implements和extends关键字来实现。
使用扩展的例子
- 继承的例子 这是单一的继承,因为超类只被一个类所扩展。
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');
}
}
类实现了一个接口,并且必须为一个方法提供一个实现。