TypeScript中的接口(interface )详解

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

一、定义接口

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

interface Person {
   
  name: string;
  age: number;
}

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

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

二、可选属性

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

interface Person {
   
  name: string;
  age?: number;
}

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

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

三、只读属性

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

interface Person {
   
  readonly name: string;
  age: number;
}

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

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

四、函数类型

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

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

五、继承接口

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

interface Animal{
   
    name:string,
    age:number,
    
}
interface Cat extends Animal{
   
    sex:number
}

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

六、索引签名

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

interface Person{
   
   [key:string]:any
    
}
const person:Person = {
   
    name:'qiyan',
    age:18
}

只读索引签名

interface Person{
   
   readonly [key:string]:any
    
}

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

七、函数重载

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

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])

相关推荐

  1. TypeScript接口interface详解

    2023-12-15 09:24:02       33 阅读
  2. TypeScriptinterface与 type区别

    2023-12-15 09:24:02       27 阅读
  3. TypeScript interface

    2023-12-15 09:24:02       10 阅读
  4. TypeScriptinterface和type差别是什么?

    2023-12-15 09:24:02       11 阅读
  5. GPT每日面试题-Typescripttype和interface区别

    2023-12-15 09:24:02       8 阅读
  6. Interface 接口

    2023-12-15 09:24:02       32 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-15 09:24:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-15 09:24:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-15 09:24:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-15 09:24:02       18 阅读

热门阅读

  1. html2canvas库——前端实现基于DOM的截图

    2023-12-15 09:24:02       42 阅读
  2. xml.dom --- 文档对象模型 API

    2023-12-15 09:24:02       31 阅读
  3. OpenShift与Rancher

    2023-12-15 09:24:02       28 阅读
  4. HTML中RGB颜色表示法和RGBA颜色表示法

    2023-12-15 09:24:02       37 阅读
  5. 【Oracle】常用数据库sql记录

    2023-12-15 09:24:02       27 阅读
  6. 200. 岛屿数量

    2023-12-15 09:24:02       32 阅读
  7. 【C++】简化for-range的算法函数

    2023-12-15 09:24:02       39 阅读
  8. MPI和C++/Qt混用的收发消息的例子(主从模式)

    2023-12-15 09:24:02       30 阅读
  9. redis集群模糊获取缓存redisKey

    2023-12-15 09:24:02       40 阅读
  10. ES6简化对象

    2023-12-15 09:24:02       33 阅读
  11. zookeeper集群安装

    2023-12-15 09:24:02       33 阅读