typescript学习：interface接口

本文内容如下

interface的了解与使用

如果你都有了答案，可以忽略本文章，或去TS学习地图寻找更多答案

---

interface接口

定义
	对对象的形状（shape）进行描述，对类（class）进行抽象

应用
	对象，函数，类，需要传递多个参数时

语法
	通过关键字 interface 声明， 首字母大写， 使用；号隔开

例子

例子1：定义对象的属性接口类型
interface Person{
    name:string;
    age:number
}
let tao:Person = {
    name:'tao',
    age:18
}


例子2：函数参数使用接口
function greeting(person:Person){
    const {name,age} = person
    console.log(name,age)
}
console.log(greeting(tao))


例子3：函数使用接口
interface Encrypt{
    (key:string,value:string):string
}

let fn: Encrypt = (key, value) => key + value

---

属性接口类型

interface Person{
    readonly id:number;     //只读属性，不能再次赋值
    name:string;
    age?:number;            //?可选
    [index:string]:any;     //索引签名：任意数量的属性
    sayHi():string;         //函数，返回string
}

const girl: Person = {
    id:123,
    name:'tao',
    age:18,
    sayHi(){
        return 'hello ts'
    }
}

---

接口调用自身属性

interface SearchPanelProps {
    param: {
        name: string,
        personId: string
    },
    setParam: (param: SearchPanelProps['param']) => void;
}

export const SearchPanel = ({ param, setParam }: SearchPanelProps) => {}

---

可索引接口

使用场景：不确定写什么值的时候，或有接口之外的属性时

可索引接口，对数组的约束
interface UserArr {
    [index: number]: string
}
let arr: UserArr = ['123', '456'] //值为字符串
console.log(arr[0]);  //索引是number 123


可索引接口，对对象的约束
interface UserObj {
    [index: string]: string  //值为字符串
}
let obj: UserObj = { name: 'tao' }
console.log(obj.name)  //索引是string tao

---

ES6中的 TS类

公共属性修饰符：

• public：公开的，可读可写，默认修饰符
• private：私有的，不可读不可写
• protected：子类可访问
• readonly: 只能读不能写
• static：静态属性或静态方法（JS中也有）

class Animal {
    public name: string;
	
	constructor(name: string){
		this.name = name
	}
	
	static isAnimal(instantce) {
		return instantce instanceof Animal
	}
	
    eat(){
    	console.log(`${this.name} is eating`)
	}
}

const dog = new Animal('旺财')
dog.eat()            //旺财 is eating
Animal.isAnimal(dog) //true

---

类的接口与实现

语法：使用关键字implements 实现

类必须实现接口的参数属性

实例接口：只对实例属性检查，不会对静态属性检查，如不会检查

interface Animal {
    name: string;
    eat(str: string): void;
}

//Dog 实现自 Animal 
class Dog implements Animal {
    name: string; //只描述公共部分

    constructor(name: string) {
        this.name = name
    }
    
    eat() {
        console.log(`${this.name} is eating`)
    }
}

let d = new Dog('旺财')
d.eat()



//错误的例子
interface ClockConstructor {
	new(hour: number, minute: number)
}

class Clock implements ClockConstructor {
	currentTime: Date
	
	//报错
	constructor(h: number, m: number) {} 
	
}

构造器接口

//类有两个部分：
//1. 实例类型
interface ClockInterface {
    tick()
}
//2. 构造器接口类型
interface ClockConstructor {
    new(hour:number,minute:number):ClockInterface
}


工厂方法：
参1：构造器
参2，参3：给构造器的参数
返回值：实例
function createClock(ctor:ClockConstructor,hour:number,minute:number):ClockInterface{
    return new ctor(hour, minute)
}

//两个时钟类：使用实例类型
class DigitalClock implements ClockInterface {
    constructor(h:number,m:number){
        
    }
    tick(){
        console.log('beep  beep')
    }
}
class AnglogClock implements ClockInterface {
    constructor(h:number,m:number){
        
    }
    tick(){
        console.log('tick  tick')
    }
}

//创建实例
let digital = createClock(DigitalClock, 12, 5)
let anglog = createClock(AnglogClock, 12, 5)

---

类的接口继承

接口可以继承接口，再用类实现该接口

例子1：
interface Animal {
    eat(): void
}

接口继承接口
interface Person extends Animal {
    work(): void;
}

实现接口的继承
class Student implements Person {
    eat() { }
    work() { }
}


例子2：组合：继承 + 实现
class Programmer {
    constructor(public name: string) {}   //简写
    
    coding(code: string) {
        console.log(`${this.name} is writing ${code}`)
    }
}

class Web extends Programmer implements Person {
    constructor(public name: string) {
        super(name)
    }
    eat() { }
    work() { }
}

const w = new Web('tao')
w.coding('ts')   //tao is is writing ts

---

接口的混合类型

例子：既是函数，又是对象类型

interface Counter {
    (star: number): string
    interval: number
    reset(): void
}

function getCounter(): Counter {
    let counter = function (star: number) {
        console.log(star)
    } as Counter //断言为Counter

    counter.interval = 123

    counter.reset = function () {
        console.log('666')
    }
    
    return counter
}

let c = getCounter()
c(10)                     //10，作为函数使用
console.log(c.interval)   //123，作为对象使用，调用属性
c.reset()                 //666，作为对象使用，调用属性

---

接口继承类

接口继承类，会继承类的私有成员

class Control {
    private state: any  //私有成员
}


interface SelectableControl extends Control {
    select()
}

class Button extends Control implements SelectableControl {
    select(){}
}

class TextBox extends Control {
    select(){}
}

class ImageC implements SelectableControl {  //报错，没有继承Control
    select(){}
}

---

学习更多

TS学习地图