一步一步学习TypeScript(18.Interfaces_接口)

Interfaces

严格的类型检查是TypeScript的一个核心原则，而接口正是对它这一原则的体现，接口的功能是为类型命名，或约束实现了同一个接口的不同实现类外型的一致。

使用接口描述属性

function readBook(book: {name:string}){
  console.log(book.name);
}

//当在外部声明时可以附加其它属性
let book = {name:'typescript',author:'Tom'};
readBook(book) //OK, 可以附加其它属性

//当直接附值时不能附加额外的属性
readBook({name:'typescript',author:'Tom'}); //Error, 不能附加额外的属性

当使用函数时，如果先定义好变量再传递给函数时，变量中可以不只一个属性，当在使用函数时才赋值的话，必需有且仅有一个要求的属性，即不管怎么用，函数定义时要求的值必需在。
现在把上面的例子用接口实现一下：

interface BookObj{
  name: string
}

function readBook1(book: BookObj){
  console.log(book.name)
}

//当在外部声明时可以附加其它属性
let book1 = {name:'typescript',author:'Tom'};
readBook1(book1) //OK, 可以附加其它属性

//当直接附值时不能附加额外的属性
readBook1({name:'typescript',author:'Tom'}); //Error, 不能附加额外的属性

上面这个例子中BookObj是一个接口，但其没有具体的实现类，它的存在的作用只是为了约束属性的名称和其匹配的类型，即只关注属性的外型，只要传入的变量具有name属性并且为string类型，都可通过检查。

接口中的可选属性

考虑这种情况,如何定义一个接口,表示一个手机,每个手机都会有一块屏幕,但是不一定每个手机都有键盘.

interface PhoneInfo{
  screen: string;
  keyboard?: string;
}

function myPhone(phone:PhoneInfo){
  console.log('screen resolution: '+phone.screen);

  if(phone.keyboard){
    console.log('keyboard info: '+phone.keyboard)
  }
}

myPhone({screen:'2k'}); //OK

myPhone({screen:'1k', keyboard:'T9'}); //OK

其中keyboard?后面的问号表示这个参数是不确定的,可能会有也可能没有,要到具体运行时才能确定.

使用接口描述函数

接口可以描述JavaScript中的Object的属性和函数.之前看到的是如何用接口描述属性,下面看一下如何表示一个函数.

interface CallFun{
    (name:string, phoneNumber: string) : boolean;
}

var calFun:CallFun = function(name:string, phoneNumber:string): boolean{
    console.log('call '+name+ ', phone number: '+ phoneNumber);
    return true;
}

calFun('Tom','130xxxxx553'); 

观查CallFun接口实现,与普通函数相比,只是保留了参数声明及其反回值而已.并且其中声明的参数只要类型匹配即可,叫什么名字都可以例如:

var calFun:CallFun = function(myName:string, myNumber:string): boolean{
    console.log('call '+myName+ ', phone number: '+ myNumber);
    return true;
}

calFun('Tom','130xxxxx453');

使用接口表示数组

interface Dictionary {
  [index: number]: string;
  length: number;
} 

var arr:Dictionary = ['1','2','3'];
console.log(arr.length); // 3

使用类来实现接口

用过其它oo语言(Java,C#)对如何实现一个接口都不会陌生,在typescript中也同样可以这么做

interface Phone{
    screen: string;

    call(phoneNumber:string): void;
}

class IPhone implements Phone{
    screen: string = '2k';

    constructor(screen:string){
        this.screen = screen;
    }

    call(phoneNumber:string){
        console.log('call to '+phoneNumber)
    }
}

接口静态部分与常量部分的区别,没有太理解.什么场合下会用到.希望知道的同学帮助.

接口的继承

TypeScript的接口的继承是通过extends关键字实现的. 同时从多个接口继承时时用','分隔.

//键盘
interface Keyboard{
    layout: string;
}

//屏幕
interface Screen{
    resolution: string;
}

//手机一般是由键盘和屏幕组成的
interface Phone extends Keyboard, Screen{
    call(phoneNumber:string); //打电话
}

接口继承类

当接口继承一个类时,会继承这个类的所有成员,但是会忽略具体的实现.

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

var point3d: Point3d = {x: 1, y: 2, z: 3};