TypeScript中的接口(interface )详解

文章目录

在TypeScript中,接口(interface )被用来定义自定义数据类型,这有助于我们在开发过程中对对象进行描述。接口可以包含属性和方法的声明,但不提供实现。让我们一起来了解接口在TypeScript中的应用。

一、定义接口

type和interface 都可以用来定义对象,但我们一般采用interface来定义

javascript 复制代码
interface Person {
  name: string;
  age: number;
}

let person: Person = {
  name: "qiyan",
  age: 30
};

上述代码中,我们定义了一个名为Person的接口,它具有name和age两个属性。然后,我们创建了一个符合该接口的对象并进行了赋值。

二、可选属性

接口中的属性可以标记为可选的,在创建对象时就可以选择性地包含这些属性。使用即可实现

javascript 复制代码
interface Person {
  name: string;
  age?: number;
}

let person: Person = {
  name: "qiyan",
};

针对于可选属性,像后端有些参数可传可不传过来时,我们就可以采用该方式

三、只读属性

接口中的属性也可以标记为只读,这意味着一旦对象被创建后,这些属性的值将不能被改变。

javascript 复制代码
interface Person {
  readonly name: string;
  age: number;
}

let person: Person = {
  name: "qiyan",
  age:18
};

person.name='xigua';   //错误,不能进行修改

四、函数类型

接口不仅可以描述对象,还可以描述函数类型。

javascript 复制代码
interface Person {
    (name:string,age?:number):void
}
const person:Person = (name:string,age:number=18)=>{
    console.log(`我是${name},我今年${age}岁啦`)
}
person('qiyan')

五、继承接口

接口可以继承其他接口,从而使得一个接口可以拥有另一个接口的所有成员。其关键字为extends

javascript 复制代码
interface Animal{
    name:string,
    age:number,
    
}
interface Cat extends Animal{
    sex:number
}

const cat:Cat = {
    name:'xixi',
    age:3,
    sex:0
}

六、索引签名

索引签名可定义具有动态属性的对象结构
索引签名语法

javascript 复制代码
interface Person{
   [key:string]:any
    
}
const person:Person = {
    name:'qiyan',
    age:18
}

只读索引签名

javascript 复制代码
interface Person{
   readonly [key:string]:any
    
}

const person:Person = {
    name:'qiyan',
    age:18
}
person.name= 'xigua'  //报错,不能修改

七、函数重载

根据传入的参数类型和数量的不同,选择执行不同的函数实现

javascript 复制代码
interface Fn{
    (ids:number | number[]):void;
}
const fn:Fn = (ids:number | number[]):void{
    if(typeof ids == 'number'){
        //执行只传一个值的操作
    }else if(Array.isArray(ids)){
        //执行传数组的操作
    }
}
fn(1)
fn([1,2,3])
相关推荐
MiyueFE20 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio21 小时前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈1 天前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士1 天前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
土豆骑士4 天前
简单理解Typescript 装饰器
前端·typescript
ttod_qzstudio4 天前
彻底移除 HTML 元素:element.remove() 的本质与最佳实践
前端·javascript·typescript·html