ts中interface自定义结构约束和对类的约束

一、interface自定义结构约束对后端接口返回数据

复制代码
// interface自定义结构 一般用于较复杂的结构数据类型限制 如后端返回的接口数据

// 首字母大写;用分割号隔开
interface Iobj{
    a:number;
    b:string
}
let obj:Iobj = {
    a:1,
    b:'2'
}

// 复杂类型 模拟后端返回的接口数据
interface Ilist{
    list:{
        id:number;
        name:string
    }[]
}
interface Idata{
    message:string;
    ok:number;
    data:Ilist
}
let data:Idata = {
    message:'成功',
    ok:200,
    data:{
        list:[
            {
                id:1,
                name:'张三'
            },
            {
                id:1,
                name:'张三'
            }
        ]
    }
}

二、接口请求参数限制

三、继承

复制代码
interface Iab{
    OK:number;
    name:string
}
interface Ia extends Iab{
    children:[]
}
let AB:Ia = {
    OK:200,
    name:'zhang',
    children:[]

}

四、类中的使用

1,类的写法(必须限制useName,useAge的类型,否则报错

复制代码
class Person{
    // 必须限制useName,useAge的类型,否则报错
    useName:string;
    useAge:number
   constructor(name,age){
    this.useName = name
    this.useAge = age
   }
   run():string{
    return this.useName
   }
}
let p1 = new Person('张三',18)

2、修饰符

2-1、readonly只读

复制代码
interface Obj1{
    readonly num:number;
    name:string
}
let obj1:Obj1 = {
    num:1,
    name:'lisi'
}
obj1.name='zhangsan'
// obj1.num = 12 不能修改num 只读 

2-2、public(默认值 公开的 都能访问)

复制代码
class Person{
   public useName:string;
    useAge:number
   constructor(name,age){
    this.useName = name
    this.useAge = age
   }
   run():string{
    return this.useName
   }
}
let p1 = new Person('张三',18)
console.log(p1.useName,p1.useAge) 都能访问其中属性

2-3、protected (受保护的,只能在当前类和当前类的子类内部使用)

复制代码
class Person{
     useName:string;
     protected useAge:number
    constructor(name,age){
     this.useName = name
     this.useAge = age
    }
    run():string{
     return this.useName
    }
 }
 let p1 = new Person('张三',18)
console.log(p1.useName,p1.run()) p1.useName,p1.run都能访问,不能访问p1.useAge

只能在当前类的子类内部使用
class Person{
    protected useName:string;
   run():string{
    return this.useName
   }
}
 class Children extends Person{
    run(){
        return this.useName;
       }
 }
 let p2 = new Children();
 console.log(p2.run()) p2.run()能访问 p2.useName却不能访问

2-4、private (私有的 只能在当前类的内部使用)

复制代码
class Person{
    private useName:string;
     useAge:number;
   run():string{
    return this.useName
   }
   sun(){
    return this.useAge
   }
}
 class Children extends Person{
    // run(){
    //     return this.useName;
    //    } 私密的  子类不能继承父级的run方法
    sun(){
        return this.useAge
       } //没加private 可以继承父级的sun方法
 }
 let p2 = new Children();

五、抽象类 abstract

1,不完成具体功能

2,不能new

3,可以继承,如果继承就必须完成类中的抽象方法

复制代码
class Person{
   run(){
    return 11
   }
}
// 如果使用抽象类 该run方法就不能有返回值 就只能按如下写
abstract class Person{
    abstract run():void
 }

//  可以继承 必须完成类中的抽象方法
abstract class Person{
    abstract run():void
 }


class Child extends Person{
    run(): void {
        
    }
}

六、implements (对类的约束 可以累加)

复制代码
interface Is1{
    name:string
}
interface Is2{
    age:number
}

class Person implements Is1,Is2{
    name:string;
    age:number
}
相关推荐
球球pick小樱花4 分钟前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
前端Hardy11 分钟前
干掉 Virtual DOM?尤雨溪开始"强推" Vapor Mode?
vue.js·vue-router
用户605723748730811 分钟前
AI 编码助手的规范驱动开发 - OpenSpec 初探
前端·后端·程序员
狗胜14 分钟前
AI观察日记 2026-03-02|CLAUDE、TYPE、APPFUNCTIONS:掘金热门里的下一步信号
前端
喝水的长颈鹿16 分钟前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
明君8799717 分钟前
Flutter 实现 AI 聊天页面 —— 记一次 Markdown 数学公式显示的踩坑之旅
前端·flutter
用户145369814587819 分钟前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
米饭同学i20 分钟前
微信小程序实现随机撒花效果
前端
Arthur147261228654720 分钟前
模块化和组件化的区别
前端
codingWhat23 分钟前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js