TypeScript学习笔记4-接口

最新推荐文章于 2024-07-20 08:27:55 发布

STATICHIT静砸

最新推荐文章于 2024-07-20 08:27:55 发布

阅读量221

点赞数 3

分类专栏： TypeScript 文章标签： typescript 学习笔记

本文链接：https://blog.csdn.net/m0_62742402/article/details/137484201

版权

TypeScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在TypeScript中使用接口定义对象的结构，包括必需属性、可选属性、只读属性和方法的定义。同时讲解了接口的继承、扩展以及交叉类型的概念和用法。

摘要由CSDN通过智能技术生成

在TypeScript中，接口用于定义对象的结构和类型。它是一种抽象的概念，用于描述对象应该具有的属性、方法和行为。

定义接口

interface UserInfoFace {
    name: string
}

let zhangsan :UserInfoFace = {
    name: "张三"
}
console.log(zhangsan.name)

可选属性和只读属性

interface UserInfoFace {
    readonly id: number
    name: string
    age?:number
    addr?:string
    like?:string[]
}

let zhangsan :UserInfoFace = {
    id: 1,
    name: "张三",
}
zhangsan.age = 23//可选属性可以后续再赋值

console.log(zhangsan.id)//可读
// zhangsan.id = 12 // 不可修改

在属性名后面紧跟？代表该属性可选，没带的话就必须定义时就定义该属性

在属性前面加上 readonly 标识则该属性只可以读取不能进行修改

接口中添加方法

interface UserInfoFace {
    readonly id: number
    name: string
    age?:number
    addr?:string
    like?:string[]

    getName: ()=>string
    setAge: (age:number)=>void
}

let zhangsan :UserInfoFace = {
    id: 1,
    name: "张三",

    getName: function ():string{
        return this.name
    },
    setAge:function (age:number){
        this.age = age
    }
}


zhangsan.setAge(21)             //设置年龄为21
console.log(zhangsan.age)       //输出年龄为"21"
console.log(zhangsan.getName()) //输出“张三”
console.log(zhangsan.name)      //输出“张三”

这里注意，箭头函数中this没有指向，所以需要赋值时，要用function写法

继承扩展和交叉类型

继承顾名思义就是将父接口的内容继承下来，而交叉类型是使用 & 符号将两个接口的内容合并

继承：

interface People {
    gender: number // 0 女 1 男  2 未知
}

interface UserInfoFace extends People{
    readonly id: number
    name: string

}

let zhangsan :UserInfoFace = {
    id: 1,
    name: "张三",
    gender: 1
}

交叉类型：

interface People {
    gender: number // 0 女 1 男  2 未知
}
interface UserInfoFace {
    readonly id: number
    name: string
}

let zhangsan :UserInfoFace & People = {
    id: 1,
    name: "张三",
    gender: 1
}