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
}
相关推荐
「、皓子~3 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了6 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_7 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术23 分钟前
京东小程序JS API仓颉改造实践
前端
奋飛32 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟32 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游35 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte40 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js