TypeScript 中「接口」的基本使用

简介: TypeScript 中「接口」的基本使用

TypeScript 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。


Typescrip 中的接口类似于 Java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类。

1、属性类接口

function printLabel(labelInfo:{label: string}): void {
    console.log('printLabel');
}
printLabel({label:'张三'});
interface FullName{
    firstName:string;      //注意;结束
    secondName?:string;    //通过 ? 设置可选参数
}
function printName(name:FullName){
    //必须传入对象 firstlame secondName
    console.log(name.firstName + '--' + name.secondName);
}
printName({firstName:'张', secondName:'三'});

2、函数类型接口

interface encrypt{
    (key:string,value:string):string;    //约束 encrypt 类型的函数的参数类型和返回值类型
}
var md5:encrypt = function(key:string, value:string):string{
    return key + value;
    console.log(md5('name', 'zhangsan'));
}

3、可索引接口

var arr:number[] = [2342, 235325];
var arr1:Array<string> = ['111','222'];
interface UserArr{    //数组的可索引接口
    [index:number]:string;
}
var arr:UserArr = ['aaa', 'bbb'];
interface UserObj{    //对象的可索引接口
    [index:string]:string;
}
var obj:UserObj = {name: '张三'};

4、类类型接口

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(food:string){
        console.log(this.name + food);
    }
}

5、接口扩展

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 + '写代码'); }
}
目录
相关文章
|
6月前
|
JavaScript
​​​​Typescript 接口 和继承 数组处理
ts的基础数据类型,可用来处理一般数据,但是碰到后台传入的复杂对象数组的时候,我们可以使用ts中的接口来定义处理
59 0
|
6月前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
42 0
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
41 1
|
30天前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
3月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
4月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
3月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
58 0
|
4月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
79 0
|
5月前
|
JavaScript 索引 前端开发
9.【TypeScript 教程】接口(Interface)
9.【TypeScript 教程】接口(Interface)
59 4