【TS】TypeScript interface接口

原创已于 2023-08-31 15:14:43 修改 · 259 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

TypeScript基础知识

于 2023-08-24 00:12:03 首次发布

本文详细介绍了TypeScript中的接口概念，包括属性接口、函数接口、索引接口、类接口以及接口的继承方式，如接口继承接口、接口继承type和接口继承class，展示了接口在限制和规范类和函数行为中的作用。

文章目录

【interface 继承 interface】

【interface 继承 type】

【interface 继承 class】

在面向对象中，接口是一种规范的定义，它定义了行为和动作的规范。

在程序设计中，接口起到了一种限制和规范的作用，就是批量对方法、属性进行约束。

接口声明后，直接使用接口名称作为变量的类型即可。

注意：多个同名的接口会自动合并。

属性接口

对对象的属性进行约束

// 属性接口
interface NickUser {
    userName: string,
    userAge?: number, // ?可选属性
}
function PrintUser(user: NickUser): void {
    console.log(user);
}

// 使用
let obj = {
    userName: '小七',
    userAge: 18
}
PrintUser(obj); // {userName: '小七', userAge: 18}

案例：封装ajax

// 定义接口
interface Config{
    method:string,
    url:string,
    data?:string,
    dataType:string
}

// 封装ajax案例
function ajax(config:Config){
    // 创建ajax对象
    let xhr = new XMLHttpRequest();
    xhr.open(config.method,config.url,true);
    xhr.send();
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4 && xhr.status === 200){
            if(config.dataType === 'json'){
                console.log(xhr.responseText);
            }
        }
    }
}

// 使用
ajax({
    method:'get',
    url:'http://jsonplaceholder.typicode.com/posts',
    dataType:'json'
})

函数接口

对方法传入的参数以及返回值进行约束

// 函数接口
interface Person {
    (name: string, age: number): string;
}

// 使用
let student: Person = function (name: string, age: number): string {
    return name + ',' + age
}
console.log(student("小七", 18)); // 小七,18

索引接口

对数组、对象进行约束

// 索引接口 --数组
interface UserArr {
    [index: number]: string
}

let arr: UserArr = ['a', 'b', 'c', 'd'];
console.log(arr); // ['a', 'b', 'c', 'd']

// 索引接口 --对象
interface UserObj {
    [index: string]: string
}

let obj: UserObj = { name: '张三', age: '20' }
console.log(obj); // {name: '张三', age: '20'}

类接口

对类的约束，在使用 implements 继承的普通类中都需要实现

// 类接口
interface Animal {
    name: string;
    eat: (str: string, num: number) => void;
}

// 使用
class Dog implements Animal {
    // 必须包含name
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    // 必须包含eat方法
    eat(sex: string, age: number): void {
        console.log(this.name + ',' + sex + ',' + age + '岁,爱吃骨头');
    }
}
let xiaoqi = new Dog('小七');
xiaoqi.eat('公', 3); // 小七,公,3岁,爱吃骨头

接口继承

接口也是可以继承的

【interface 继承 interface】

下面示例中，子接口继承父接口之后，类继承自子接口，则子接口和父接口中的约束都需要遵守。

// 父接口
interface Person {
    eat: () => void;
}
// 子接口继承自父接口
interface Son extends Person {
    hobby(): void;
}

// 父类
class User {
    name: string = "李四";
    constructor(name: string) {
        this.name = name;
    }

    sport() {
        console.log(this.name + "爱运动");
    }
}

// 子类继承父类和子接口
class Student extends User implements Son {
    constructor(name: string) {
        super(name); // 继承父类的属性
    }

    // 由于继承关系，这个类必须同时包含父接口和子接口的方法
    eat() { // 父接口的约束
        console.log(this.name + "吃薯条");
    }
    hobby() { // 子接口的约束
        super.sport(); // 继承父类的方法  
        console.log(this.name + "爱学习");
    }
}

let zs = new Student('张三');

zs.sport(); // 张三爱运动
zs.eat(); // 张三吃薯条  
zs.hobby(); // 张三爱运动  // 张三爱学习

interface 允许多重继承，下面示例中，接口 C 作为对象 obj 的约束，同时继承自接口 A 和 B 。

interface A {
    aa: string;
}
interface B {
    bb: string;
}
// 同时继承A,B
interface C extends A, B {
    cc: string;
}

let obj: C = {
    aa: 'aa',
    bb: 'bb',
    cc: 'cc'
}

【interface 继承 type】

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

type Obj = {
    name: string;
    age: number;
}
// 继承tpye定义的对象
interface A extends Obj {
    aa: string;
}

let obj: A = {
    name: '小九',
    age: 18,
    aa: 'aa'
}

【interface 继承 class】

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

class A {
    name: string = 'A';
    foo(): void {
        console.log(this.name);
    }
}
// 接口继承类
interface B extends A {
    bb: string;
}

let obj: B = {
    name: '',
    foo(): void {
        console.log(123);
    },
    bb: 'bb'
}

TypeScript 教程——阮一峰·著

TypeScript 中文网

TypeScript 官网

标签

#typescript #javascript #前端