typescript基础知识：接口

接口

用于描述对象的结构和行为的抽象类型。但不提供具体的实现，可以被继承（接口和类一样，也可以被继承），可以检查对象的类型、也可以被多个类实现。

可选属性

接口中的属性不是必需的，非必需属性名后面加个"?"即可。

export interface Role {
  id: number; // 必需
  name?: string;  // 非必需
  }

只读属性

只在对象创建时赋值，属性前面加个"readonly"来表示。官网demo如下：

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

接口作用一：检查对象的类型

// 定义接口

export interface Menus {
    id: number | string;
    status: boolean;
    title: string;
  	options?: any[];
    children?: Menus[];
}

2、检查对象类型

import { Menus } from './menus.ts';
const menuList: Menus[] = [
    { id: 1, status: true, title: '用户管理' },
    {id:'2',status:true,title:'角色管理'}
];

接口作用二：继承

// 1、定义接口

export interface Register {
    name: string;
    password: string;
    email: string;
}

// 2、被另外的接口继承

import { Register } from 'register.ts';
export interface User extends Register {
    id: number;
    phone?: string;
    role: string;
    date?: string;
}

一个接口可以继承多个接口，创建出多个接口的合成接口。官网demo如下：

interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = <Square>{};
square = { color:'red',penWidth:12,sideLength:20 };
console.log(square);

3、检查对象类型

import { User } from 'register.ts';
const userInfo: User = {
    id: 1,
    name: 'sophie',
    password: '123',
    email:"123456789@qq.com",
    role: '3',
    date: '2022-08-09',
};

接口作用三：类实现接口

TypeScript也能够用它来明确的强制一个类去符合某种契约。
如果多个类有一些共有的属性，那么就能把共有属性提取成为接口interface, 用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。
一个类只能继承自另一个类，但可以实际多个接口,多个接口用逗号隔开。

// 定义两个接口
interface Eatable {
    eat(): void;
}
interface Walkable {
    walk(): void;
}
// 一个类实现了这两个接口
class Person implements Eatable, Walkable {
    eat() {
        console.log('Eating...');
    }
    walk() {
        console.log('Walking...');
    }
}
// 创建类的实例并调用方法
const person = new Person();
person.eat();  // 输出: Eating...
person.walk(); // 输出: Walking...

interface ClockInterface {
    currentTime: Date;
}
class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}