TypeScript接口Interface

在编程中，接口是一种规范的定义。接口跟抽象类有点像，但是,接口中不能有方法体，只允许有方法定义。

属性类型接口

//对传入对象的属性约束，以下这个是一个属性接口
interface User {
    name: string;
    age: num;
}

function printName(obj: User) {
    console.log(obj.name + "--" + obj.age);
}

//传入的参数必须包含name、age
var obj = {
    age: 20,
    name: '张三',
    sex: '男'
};
printName(obj);//正确
// printName("1213");//错误

函数类型接口

对方法传入的参数,以及返回值进行约束.

//函数类型接口
interface Fn {
    (key: string, value: string): string;
}
var fn: Fn = function (key: string, value: string): string {
    //模拟操作
    return key + "----" + value;
}
console.log(fn("name", "zhangsan"));

var test: Fn = function (key: string, value: string): string {
    //模拟操作
    return key + "====" + value;
}
console.log(test("name", "lisi"));

可索引型接口

可索引接口就是对数组、对象的约束

//可索引接口，对数组的约束
interface UserArr {
    //索引是数字类型,value是字符串类型
    [index: number]: string
}
var arr1: UserArr = ["aaa", "bbb"];
console.log(arr1[0]);

//可索引接口，对对象的约束
interface UserObj {
    //索引是字符串类型,value是字符串类型
    [index: string]: string
}
var arr2: UserObj = { 'name': '张三', 'age': '21' };
console.log(arr2);

类类型接口

类类型接口就是对类的约束，用implements关键字

interface Animal {
    name: string;
    eat(food: string): void;
}

class Dog implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {
        console.log(this.name + "吃大骨头");
    }
}

var d = new Dog("小狼狗");
d.eat();

class Cat implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(food: string) {
        console.log(this.name + "吃" + food);
    }
}

var c = new Cat("小花猫");
c.eat("大老鼠");

接口的继承

接口可以继承接口

interface Person {
    name: string;
    run():void;
}
interface Animal extends Person{
	  eat(food: string): void;
}
class Dog implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    run(){
     console.log(this.name + "在跑步");
    }
    eat() {
        console.log(this.name + "吃大骨头");
    }
}
var d = new Dog('小黄')
d.eat()
d.run()

接口的继承

interface Person {
    name: string;
}
interface Animal extends Person{
	  age: number;
}

const dog = <Animal>{}
dog.name = '小黄'
dog.age = 2

//一个接口继承多个接口
interface Person {
    name: string;
}
interface Animal {
    age: number;
}
interface Color extends Person, Animal {
    color: string;
}
let cat = <Color> {};
cat.color = 'red'
cat.name = '小花猫';
cat.age = 2;

//类接口继承
class Cat {
 name:string
	constructor(name:string){
		this.name = name
	}
 eat(food:string):void{
   console.log(`${this.name}吃${food}`)
 }
}

class Dog extends Cat implements Person, Animal {
 constructor(name:string){
		super(name);
	}
	run(){
		console.log(`${this.name}在跑步`)
	}
}
var d = new Dog('大黄')
d.eat('大骨头')
d.run()

接口的合并

接口中的属性合并到一个接口中：

interface Animal {
    name: string;
}
interface Animal {
    age: number;
}

相当于

interface Animal {
    name: string;
    age: number;
}

合并的属性的类型必须是唯一的

interface Animal {
    name: string;
}
interface Animal {
    name: string; // 虽然重复了，但是类型都是 `number`，所以不会报错
    age: number;
}

interface Animal {
    age: string;
}
interface Animal {
    age: number; // 类型不一致，会报错
    name: string; 
}
// index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type.  Variable 'price' must be of type 'number', but here has type 'string'.

接口中方法的合并，与函数的合并一样：

interface Animal {
    name: string; 
    eat(s: string): string;
}
interface Animal {
    age: number;
    eat(s: string, n: number): string;
}

相当于：

interface Animal {
    name: string;
    age: number;
    eat(s: string): string;
    eat(s: string, n: number): string;
}