TypeScript接口，属性类接口、函数类型接口、可索引接口、类类型接口、扩展接口

关注

原创最新推荐文章于 2026-08-10 10:47:47 发布 803 阅读 AI 写同款· GEO 优化 ›

TypeScript进阶知识之接口(接口定义、接口属性、可索引类型、接口表示函数类型、额外的属性检查、接口继承、接口与类型别名的区别) TypeScript 中，接口（Interface）是一种用来定义对象的结构和行为的类型。通过接口，我们可以定义对象应该有哪些属性、属性的类型以及方法。使用关键字 interface 来定义接口。声明接口后，直接使用接口名称作为变量的类型。方法的定义和函数的定义类似，包括参数和返回值类型。当我们使用对象字面量赋值给接口类型时，TypeScript 会自动进行额外的属性检查。这意味着赋值的对象不能包含接口中未定义的额外属性，否则会导致编译错误。//Error。阅读详情

接口: 行为和动作的规范，对批量方法进行约束(interface)

属性接口

interface FullName{
    firstName:string;   //注意;结束
    secondName:string;
}
function printName(name:FullName){
    // 必须传入对象  firstName  secondName
    console.log(name.firstName+'--'+name.secondName);
}
// printName('1213');  //错误

var obj={   /*传入的参数必须包含 firstName  secondName*/
    firstName:'张',
    secondName:'三'
};
printName(obj)

可选接口

interface FullName{
    firstName:string;
    secondName?:string; // 属性可选(可传可不传)
}
function getName(name:FullName){
    console.log(name)
}  
getName({               
    firstName:'firstName'
})

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

// 加密的函数类型接口
interface encrypt{
    (key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
    //模拟操作
    return key+value;
}
console.log(md5('name','zhangsan'));

可索引接口: 数组、对象的约束(不常用)

可索引接口对数组约束

interface UserArr{
    [index:number]:string // 数组索引为number类型，值为string类型
}
var arr:UserArr=['aaa','bbb'];
// var arr:UserArr=[123,'bbb'];  /*错误*/

可索引接口对对象约束

interface UserObj{
    [index:string]:string // 对象key为string类型，value为string类型
}
var arr:UserObj={name:'张三'};

类类型接口:对类的约束和抽象类抽象有点相似

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    eat(){ // 参数可选，但必须实现eat方法
        console.log(this.name+'吃粮食')
    }
}
var d=new Dog('小黑');
d.eat();

接口扩展：接口可以继承接口

 interface Animal{
        eat():void;
    }
    interface Person extends Animal{
        work():void;
    }
    class Web implements Person{
        public name:string;
        constructor(name:string){
            this.name=name;
        }
        // 实例必须实现父类指定方法
        eat(){
            console.log(this.name+'喜欢吃馒头')
        }
        work(){
            console.log(this.name+'写代码');
        }
        
    }
    var w=new Web('小李');
    w.eat();

收录于