学习TS(6)接口

「这是我参与2022首次更文挑战的第35天，活动详情查看：2022首次更文挑战」。

TypeScript 接口

接口可以在面向对象编程中表示行为的抽象,也可以米描述对象的形状

接口的作用就是为了这些类型命名和为你的代码或第三方代码定义契约.(接口中不能含有具体的实现逻辑)

函数接口参数

const fullName = ({firstName,lastName}:{firstName:string,lastName:string}):string =>{
    console.log(firstName,lastName)
}
// 我们可以约束函数中的参数,但是类型无法复用

interface IFullName{
    firstName:string,
    lastName:string
}
const fullName = ({firstName,lastName}:IFullName):string =>{
    console.log(firstName,lastName)
}

// 我们可以通过接口来进行描述优化上面代码

函数类型接口

interface IFullName{
    firstName:string,
    lastName:string
}
interface IFn{
    (obj:IFullName): string
}
const fullName:IFn = ({firstName,lastName}):string =>{
    console.log(firstName,lastName)
}

// 通过接口限制函数的参数类型和返回值类型

函数混合类型

interface ICounter {
  (): number; // 限制函数返回值类型
  count: 0; // 限制函数上的属性
}
let fn:any = () => {
  fn.count++;
  return fn.count;
};
fn.count = 0;
let counter: ICounter = fn;
console.log(counter());
console.log(counter());

对象接口

对象接口可以用来描述对象的形状结构

interface IVegetables {
    readonly color:string,
    size:string
}
interface IVegetables{
    age?:number,
    taste:'sour'|'sweet'
}
const tomato:IVegetables = {
    color:'red',
    size:'10',
    taste:'sour'
}
tomato.color = 'green'; // 仅读属性不能进行修

? 标识的属性为可选属性, readOnly 标识的属性则不能被修改.多个同名接口会自动合并

const tomato:IVegetables = {
    color:'red',
    size:'10',
    taste:'sour',
    type:'蔬菜'
} as IVegetables; 
// 多余的属性可以使用类型断言表示我这个对象就是这样的

任意属性,可索引接口

interface Person {
    name: string;
    [key: string]: any
}
let p: Person = {
    name: 'dafei',
    age: 18,
    [Symbol()]:'回龙观'
}

任意属性可以对某一部分必填属性做限制,其余的可以随意增加

interface IArr {
    [key: number]: any
}
let p: IArr = {
    0:'1',1:'2',3:'3'
}
let arr:IArr = [1,'d','c'];

可索引接口可以用于标识数组

类接口

这里先来强调一下抽象类和接口的区别:

抽象类中可以包含具体的方法实现,接口中不能包含实现

interface Speakable {
    name:string;
    speak():void;
}
interface ChineseSpeakable{
    speakChinese():void
}
class Speak implements Speakable,ChineseSpeakable{
    name!:string
    speak(){}
    speakChinese(){}
}

一个类可以实现多个接口,在类中必须实现接口中的方法和属性

接口继承

interface Speakable {
    speak():void
}
interface SpeakChinese extends Speakable{
    speakChinese():void
}
class Speak implements SpeakChinese{
    speakChinese(): void {
        throw new Error("Method not implemented.");
    }
    speak(): void {
        throw new Error("Method not implemented.");
    }
}

构造函数类型

interface Clazz {
    new (name:string):any
}
function createClass(target:Clazz,name:string){
    return new target(name); // 传入的是一个构造函数
}
class Animal {
    constructor(public name:string){
        this.name = name;
    }
}
let r = createClass(Animal,'Tom');
// 这里无法实现返回值类型

interface Clazz<T> {
    new(name: string): T
}
function createClass<T>(target: Clazz<T>, name: string):T {
    return new target(name)
}
class Animal {
    constructor(public name: string) {
        this.name = name;
    }
}
let r = createClass(Animal, 'Tom');

// new() 表示当前是一个构造函数类型,并使用了一下泛型,在使用 createClass 时动态传入类型