TypeScript 接口

ts中使用 interface 关键字定义一个接口, 接口用来定义对象类型或者函数类型,类类型等等, 并且可以设置属性只读, 属性可选等操作, 总而言之 interface 的功能很强大 . 接下来玩一玩 .

要点概览 :

point	explain
普通接口	属性必须完全定义,可改
只读属性	对象中属性只读不能修改
可选属性	属性不是必须定义的
函数类型	接口还能定义函数类型
索引类型	未知数量的属性
类类型	约束类
继承接口	继承于另一个接口
混合类型	定义函数并拥有对象的属性
接口继承类	接口继承类可供类实现或定义对象

1. 定义一个普通接口

• 完整定义, 可以修改

接口使用 interface 关键字进行定义, 在没有设置特殊标识时, 使用接口作为类型定义变量必须将接口内的属性完整定义, 不然就会报错 .  接口定义对象默认属性是可以更改的

1.  interface Person {
1.  name: string
1.  age: number
1.  }
1.  const o: Person = {
1.  name: 'a',
1.  age: 1
1.  }
1.  o.age = 2
1.  console.log(o) // {name: 'a', age: 2}

2. 定义只读属性的接口

• 关键字 readonly 
• 完整定义, 不能修改

用 readonly 修饰的属性不能进行修改

interface Person {
  name: string
  readonly age: number
}
const o: Person = {
  name: 'a',
  age: 1,
}
// o.age = 2 // 无法分配到 "age" ，因为它是只读属性。
console.log(o)

3. 定义属性可选的接口

• 关键字  ?
• 根据是否可选进行定义, 可以修改

属性名后加 ? 号, 属性可传可不传

1.  interface Person {
1.  name?: string
1.  readonly age: number
1.  }
1.  const o: Person = {
1.  age: 1,
1.  }
1.  console.log(o) // { age: 1 }

4. 类类型

如果想对类中的内容进行约束， 那么考虑类类型, 定义一个接口, 使用 implements 关键字实现接口

interface Dog {
  name: string
  wang?(str?: string): string
}
 
// 类实现一个接口通过关键字 implements
class D1 implements Dog {
  name: string
  wangstr: string
  wang(str: string) {
    return str
  }
  constructor(name: string, wangstr: string) {
    this.name = name
    this.wangstr = wangstr
  }
}
 
const demo = new D1('hei', 'shagou')
console.log(demo.name)
console.log(demo.wang('1'))

5. 继承接口

接口可以继承于另一个接口, 使用它的属性及类型 , 但是不可以相互继承, 这会引起不必要的错误

1.  interface Animal {
1.  kind: string
1.  }
1.
1.  interface Dog extends Animal {
1.  name: string
1.  }
1.
1.  const dog: Dog = {
1.  name: 'hei',
1.  kind: 'dog',
1.  }

6. 接口继承类

接口通过 extends 可以继承一个类的所有成员, 包括类中的private和protected成员, 我们可以用类实现这个接口或者用这个接口定义对象都是可行的, 只需要注意成员的公共和私有即可

• public 允许在类的实例访问父类的属性 (当前类 子类 实例化对象都可以访问)
• protected 允许继承于父类的子类中访问父类的属性 (只能在当前类和子类访问)
• private 不允许类实例和子类继承中访问父类的属性 (只能在当前类访问)

class Control {
  public state: any
}
 
interface SelectableControl extends Control {
  select(): void
}
 
class Button implements SelectableControl {
  state = 1
  select() {}
}
const b = new Button()
console.log(b.state)
 
const obj: SelectableControl = {
  state: 1,
  select() {},
}
console.log(obj)