ts中的接口

最新推荐文章于 2024-08-26 23:44:53 发布

原创最新推荐文章于 2024-08-26 23:44:53 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

这篇博客深入探讨了TypeScript中的接口概念，包括如何定义接口、可选属性、函数类型接口、可索引接口、类类型接口、接口继承等，并通过多个示例展示了它们在实际代码中的应用。此外，还介绍了如何使用接口约束数组和对象的结构，以及在类继承场景下的用法。

ts中的接口

**
TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface FullName{
    firstname:string,
    lastname:string
}

function prinName(name:FullName){
    console.log(name.firstname+'....'+name.lastname);
}

prinName({firstname:'金',lastname:'海燕'})//金....海燕

可选属性接口

interface FullName{
    firstname:string,
    lastname?:string//加一个问号代表可穿可以不传 
}

function prinName(name:FullName){
    console.log(name.firstname+'....'+name.lastname);
}

prinName({firstname:'金'})//金....undefined

示例

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

function ajax(config:Config){
    let xhr =new XMLHttpRequest()
    xhr.open(config.type,config.url,true)
    xhr.send(config.data)
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            console.log('ok');
            if(config.dataType=='json'){
                console.log(JSON.parse(xhr.responseText));
            }else {
                console.log(xhr.responseText);
            }
        }
    }
}

ajax({
    type:'get',
    url:'http://121.199.8.216:8000/query_goods?skip=0&limit=3',
    dataType:'json'
})

函数类型接口

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

let md5:encrypt = (key:string,value:string):string=>{
    return key+value
}

console.log(md5('aa','bb'));//aabb

可索引接口
对数组的约束

interface UserArr{
    [index:number]:string
}

let arr:UserArr=['aa','bb']

console.log(arr[0]);//aa

对象的约束

interface UserObj{
    [index:string]:string
}

let userobj:UserObj = {name:'123'}

类类型接口

interface Animal{
    name:string,
    eat(name:string):void
}


class Dog implements Animal {
    name:string
    constructor(name:string) {
        this.name=name
    }
    eat(){
        console.log(this.name+'吃粮食');       
    }
}

let d = new Dog('小黑')

d.eat()//小黑吃粮食

接口的继承

//接口的继承
interface Animal{
    eat():void
}

interface Person extends Animal{
    work():void
}

class Programmer {
    public name:string

    constructor(name:string) {
        this.name = name
    }

    coding(code:string){
        console.log(this.name+code);
    }
}

class Web extends Programmer implements Person{


    constructor(name:string) {
       super(name)
    }

    eat(){
        console.log(this.name+'喜欢吃馒头');
    }

    work(){
        console.log(this.name+'写代码');
    }
} 

let w = new Web('小李');

w.work()//小李写代码
w.eat()//小李喜欢吃馒头
w.coding('写ts代码')//小李写ts代码