TypeScript 接口

文章目录

• 基本用法
• 扩展用法
• • 1. 可选属性（接口定义中加“?”）
  • 2. 只读属性（readonly）
  • 3. 接口继承（extends）
  • 4. 接口继承类
  • 5. 类实现接口 （implements）

基本用法

TypeScript 接口用于约束变量的类型，名称与需要验证的变量一一对应，它不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以，可复用。它的结构是 interface 接口名称 {定义规则}。

作用于变量：

// 声名一个person的接口
interface person {
    name: string;
    age: number;
}

// 约束对象my的属性及类型
let my: person = { name: '张三', age: 18 };

// 约束数组persons的属性及类型
let persons: person[] = [
    { name: '张三', age: 18 },
    { name: '李四', age: 20 },
];

以上可省去 interface 的声明，简写为（常用）：

let my: { name: string; age: number } = { name: '张三', age: 18 };

let persons: { name: string; age: number }[] = [
    { name: '张三', age: 18 },
    { name: '李四', age: 20 },
];

作用于函数：

// 声名一个testType的接口
interface testType {
    name: string;
    age: number;
}

// 约束入参的类型
function test(obj: testType) {
    console.log(obj.name);
    console.log(obj.age);
}

test({ name: "xia", age: 20, height: 180 }); // height: 180 将会报错提示，但仍然能编译并打印出   xia 20

---

扩展用法

1. 可选属性（接口定义中加“?”）

interface testType {
    name: string;
    age: number;
    height?: number;
}

function test(obj: testType): void {
    console.log(obj.name);
    console.log(obj.age);
    console.log(obj.height);
}

test({ name: "xia", age: 20, height: 180 });  // xia 20 180
// height 不传也不会报错

2. 只读属性（readonly）

interface testType {
    readonly name: string;
    age: number;
}

let test: testType = { name: "张三", age: 20 }

test.name = "李四";
// name是只读属性不能修改，会报错提示，但仍然能编译并修改成功

3. 接口继承（extends）

interface nameFace {
    name: string;
}

interface ageFace {
    age: number;
}

interface heightFace extends nameFace, ageFace {
    height: number;
}

let person = <heightFace>{};
person.name = "xia";
person.age = 20;
person.height = 180;

4. 接口继承类

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

5. 类实现接口 （implements）

interface Animal {
    eat(): any
}

// Sheep类实现Animal接口
class Sheep implements Animal {
    eat() {  // 必须调用eat()方法 否则报错
        // ...
    }
}

class Cat implements Animal {
    eat() {  // 必须调用eat()方法 否则报错
        // ...
    }
}