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
}
相关推荐
90后的晨仔10 小时前
从 H5 到 uni-app:一篇写给前端小白的"翻译指南"
前端·vue.js·前端框架
陈随易10 小时前
moon,apt和yum之外linux系统命令安装新选择
前端·后端·程序员
IT小盘11 小时前
13-企业Prompt模板-角色任务约束与输出格式
java·前端·prompt
徐小夕11 小时前
开源!我用SQLite + DuckDB打造了一款可视化AI问数平台
前端·算法·github
leslie11812 小时前
babel笔记
前端
用户0595401744612 小时前
Redis 记忆存储踩坑实录:一个并发写入 Bug 让我排查了 4 小时
前端·css
小徐_233313 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·微信小程序·uni-app
kyriewen13 小时前
Claude自己跑出去hack了3家公司——我为什么还在用它写代码
前端·ai编程·claude
IT_陈寒13 小时前
SpringBoot自动配置的坑,这次真踩疼我了
前端·人工智能·后端
子兮曰13 小时前
AI 浏览器 Agent 的安全困局:当自动化工具可以偷走你的登录态
前端·人工智能·后端