TS中接口相关基础知识（个人学习）

属性接口

interface FullName {
    firstName: string;
    secondName: string;
    age: number | string;
}

function printName(name: FullName) {
    console.log(name.firstName + '--' + name.secondName)
}

printName({
    age: 20,
    firstName: '姓',
    secondName: '名'
})

可选属性接口

interface FullName {
    firstName: string;
    secondName?: string; // 可选属性
}

function getName(name: FullName) {
    console.log(name)
}

getName({
    firstName: '姓',
})

demo

interface Config {
    type: string;
    url: string;
    data?: string;
    dataType: string;
    type: string
}

function ajax(config: Config) {
    const xhr = XML.HttpRequest();
    
    xhr.open(config.type, config.url, 'true');
    
    xhr.send(config.data)
    
    xhr.onreadystateChange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('chenggong')
            
            if (config.dataType === 'json') {
                JSON.parse(xhr.responseText)
            } else {
                console.log(xhr.responseText)
            }
            
        }
    }
}

ajax({
    type: 'get',
    data: 'name:zhangsan',
    url: 'http://www.baidu.com',
    dataType: 'json'
})

函数类型接口：对方法传入的参数，以及返回值进行约束

interface encrpty {
    (key: string, value: string): string
}

var md5: encrpty = function (key: string, value: string) {
    // 模拟操作
    
    return key + value
}

可索引接口

数组、对象的约束（不常用）

// 对数组的约束
interface UserArr {
    [index: number]: string
}

var arr: UserArr = ['12', '34']

// 对对象的约束
interface UserObj {
    [index: string]: string
}
var obj: UserObj = {
    name: '20'
}

类类型接口

对类的约束 与抽象类相似 通过关键字implements调用

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

class Dog implements Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    
    eat() {
        return this.name
    }
}

接口继承

interface Animal {
    eat(): voild
}

interface Person {
    work: void
}

class Web implements Person {
    name: string;
    constructor(name: string) {
        this.name = name
    }
    
    eat() {
        return this.name
    }
    
    work() {
        return 'hello world'
    }
}

结尾

以上为个人学习TS类的相关知识点总结，如果有错误的地方欢迎指正，谢谢！