接口 interface

接口使用interface关键字定义

接口用来指定一个对象的类型接口，像一个模板

当我们定义一个对象类型的数据，会像如下这样

const obj:{name:string}={
    name:string
}

当对象中的属性很多时，这不是一个很好的选择，于是我们可以用接口

interface Obj{
    name:string
}

const obj:Obj={
    name:string
}

1.语法

接口用interface关键字来定义

interface 接口名称{
	键1: 数据类型1
    键2: 数据类型2
    // ...
}

1.1 Object接口

基本使用

// 定义接口
interface Person {
	firstName: string
	lastName: string
	age: number
	print(content: string): string
}

// 定义对象为指定接口类型
const p: Person = {
	firstName: 'John',
	lastName: 'Smith',
	age: 25,
	print(content) {
		return content
	},
}

[]运算符可以取出 interface 某个属性的类型。

interface Foo {
  a: string;
}

type A = Foo["a"]; // string

如果属性是可选的，就在属性名后面加一个问号。

interface Foo {
  x?: string;
}

如果属性是只读的，需要加上readonly修饰符。

interface A {
  readonly a: string;
}

对象的属性索引

interface A {
  [prop: string]: number;
}

const a: A = {
	name: 1,
	age: 2,
	gender: 3
}

[prop: string]就是属性的字符串索引，表示属性名只要是字符串，都符合类型要求。

属性索引共有string、number和symbol三种类型。

一个接口中，最多只能定义一个字符串索引。字符串索引会约束该类型中所有名字为字符串的属性。

interface MyObj {
  [prop: string]: number;

  a: boolean; // 编译错误
}

属性的数值索引，其实是指定数组的类型。

interface A {
  [prop: number]: string;
}

const obj: A = ["a", "b", "c"];

1.2 Array接口

interface Iobj2 {
    id:number,
    content:string
}
interface Iarr {
    [i: number]: number | string | Iobj2  // 索引签名，后面会说
}
const arr1: Iarr = [11,22,33]
const arr2: Iarr = [11,'12312',33]
const arr3: Iarr = [11,'12312',{ id:1,content:'内容' }]

1.3 Function接口

方法继承了接口之后，就不用再写参数类型和返回值类型了

interface A {
  (x: boolean): string;
}

const a: A = (x) => {
	return ""
}

2.接口继承

interface 可以使用extends关键字，继承其他 interface。

interface Animal {
    name:string,
}
interface Dog extends Animal{
    age:number
}
const data:Dog = {name:'aaa',age:2}

interface 允许多重继承。

interface Style {
  color: string;
}

interface Shape {
  name: string;
}

interface Circle extends Style, Shape {
  radius: number;
}

注意

子接口与父接口的同名属性必须是类型兼容的，不能有冲突，否则会报错。

interface Foo {
  id: string;
}

interface Bar extends Foo {
  id: number; // 报错
}

多重继承时，如果多个父接口存在同名属性，那么这些同名属性不能有类型冲突，否则会报错。

interface Foo {
  id: string;
}

interface Bar {
  id: number;
}

// 报错
interface Baz extends Foo, Bar {
  type: string;
}

2.1 接口继承type

interface 可以继承type命令定义的对象类型。

type Country = {
  name: string;
  capital: string;
};

interface CountryWithPop extends Country {
  population: number;
}

注意，如果type命令定义的类型不是对象，interface 就无法继承。

2.2 接口继承class

interface 还可以继承 class，即继承该类的所有成员

class A {
	x: string = ''

	y(): boolean {
		return true
	}
}

interface B extends A {
	z: number
}

const obj:B = {
	x: 'asd',
	y: () => false,
	z: 123
}

2.3 class继承接口

class通过implements关键字继承一个接口

// 定义接口
interface InPerson {
	age: number
	getAge(): number;
}


class Person implements InPerson {
	age: number;
	constructor(age: number) {
		this.age = age;
	}
	getAge(): number {
		return this.age;
	}
}

3.接口合并

多个同名接口会合并成一个接口。

interface Box {
  height: number;
  width: number;
}

interface Box {
  length: number;
}

4.interface和type

相同点：都可以给对象指定类型

不同点

• 接口-重名合并，别名-报错

interface A {
    a:string,
}
interface A {
    b:number
}

• 接口-只能描述对象，别名-既可以描述对象又可以描述任意类型

type strAndNum = string | number