# 接口(Interface)

# 1. 描述对象的属性类型

包括可选属性,只读属性(通过字面量初始化)

interface Animal {
  age: number;
  name?: string; // 可选属性
  readonly weight: number; // 只读属性
  [propName: string]: any; // 通过索引签名添加任意属性
}

const ani: Animal =  {
  name: 'Kitty',
  age: 12,
  weight: 24,
  color: 'blue',
}

ani.weight = 22; // Error
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2. 描述函数类型

通过定以一个参数列表类型和返回值类型的接口可以描述一个函数的类型,参数名不需要一定相同,但相同位置的类型一定是正确的

interface CalcLengthFunc {
  (source: string, target: string): boolean;
}

let calcFuncA: CalcLengthFunc = (source, target) => {
  return source.length > target.length
}

let calcFuncB: CalcLengthFunc = (src, tar) => {
  return src.length > tar.length
}
1
2
3
4
5
6
7
8
9
10
11

# 3. 描述索引类型

TypeScript 支持两种索引类型:数值索引和字符串索引

因为 JavaScript 中使用 number 作为索引的时候,同时会将其变成 string 进行索引,比如调用a[10]等同于调用a['10']

class Animal {
  name: string;
}
class Cat extends Animal {
  color: string;
}

// 错误定义
interface AniInterface {
  [x: number]: Animal;
  [x: string]: Cat;
}
1
2
3
4
5
6
7
8
9
10
11
12

在上面AniInterface接口中,在调用x属性时候,得到的是Animal还是Cat是不确定的

# 4. 类类型

TypeScript 能使用一个接口来强制类满足某种条件

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}
1
2
3
4
5
6
7
8
9
10
11
12

不能直接在类实现的接口中定义构造器的类型,可以使用下面方法来定义构造器参数类型

interface AnimalConstructor {
  new(name: string, age: number);
}

interface AnimalInterface {
  name: string;
  age: number;
  getInfo();
}

function createAnimal(Animal: AnimalConstructor, name: string, age: number) {
  return new Animal(name, age);
}

class Cat implements AnimalInterface {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    return `cat: ${this.name}, ${this.age}`
  }
}

class Dog implements AnimalInterface {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    return `dog: ${this.name}, ${this.age}`
  }
}

createAnimal(Cat, 'kitty', 4);
createAnimal(Dog, 'poppy', 6);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 5. 接口继承

接口可以形成继承关系

interface Animal {
  name: string;
}

interface Cat extends Animal {
  age: number;
}

const cat = {} as Cat;
cat.name = 'kitty';
cat.age = 4;
1
2
3
4
5
6
7
8
9
10
11
最后更新: 3/1/2021, 8:31:48 PM