TypeScript学习笔记3 - 接口

接口

什么是TypeScript接口

对类的一部分行为进行抽象以外,也用于对对象的形状进行描述

接口定义

1
2
3
4
5
6
7
8
9
interface Person{
name:string,
age:number
}

let tom:Person = {
name:'gavin',
age:25
}

注意点:

  1. 定义的变量比接口,不能增加或减少部分属性;即赋值时,变量的形状和接口的形状保持一致。

接口 定义函数类型

1
2
3
interface SearchFunc {
setTimeout(d:Date):boolean;
}

接口 可选属性

在属性后,增加?,表示该属性是可选的,也是可以不存在的;

1
2
3
4
5
interface Person {
name: string,
age: number,
height?:number
}

可选属性的作用:

  1. 可以对可能存在的属性进行预定义
  2. 可以捕获用了不存在的属性时的错误,例如拼写错误

接口 任意属性

使用 [propName:string] 定义了任意属性取string类型的值

1
2
3
4
5
6
interface Person {
name: string,
age: number,
height?:number,
[propName:string]:any
}

注意点:

  1. 一旦定义了任意属性,那么确定属性和可选属性必须是它的子属性

接口 只读属性

可以设置某些字段只能在创建的时候被赋值,其余时候不可以被修改,只能读取,可以用readonly定义只读

1
2
3
4
5
6
7
interface Person {
name: string,
age: number,
height?:number,
[propName:string]:any
readonly weight:string
}

注意点:

  1. readonly属性,只能在第给对象赋值一次,不可以重复赋值

实现接口

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
interface PersonInterface {
name: string,
age: number,

setName(_name: string): void;

getName(): string;

getAge(): number;
}


class Person implements PersonInterface {
age: number;
name: string;

getAge(): number {
return this.age;
}

getName(): string {
return this.name;
}

setName(_name: string): void {
this.name = _name;
}
}

接口 继承接口

注意:

  1. 一个接口可以继承多个接口;
    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
    interface PersonInterface {
    name: string,
    age: number,

    setName(_name: string): void,

    getName(): string,

    getAge(): number,
    }


    interface SutdentInterface extends PersonInterface {
    height: number;
    }

    class Person implements SutdentInterface {
    age: number;
    height: number;
    name: string;

    getAge(): number {
    return 0;
    }

    getName(): string {
    return "";
    }

    setName(_name: string): void {
    }

    }

接口 继承类

当接口继承一个类时,它会继承类的成员但不包括它的实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Person {
name: string;
age: number;
setName(_name: string): void {
this.name = _name;
}
}

interface PersonInterface extends Person {
weight:number
}


class AClass implements PersonInterface {
age: number;
name: string;
weight: number;

setName(_name: string): void {
}
}