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
}
相关推荐
爱问问题的小李6 分钟前
ue 动态 Key 导致组件无限重置与 API 重复提交
前端·javascript·vue.js
m0_7482299912 分钟前
PHP+Vue打造实时聊天室
开发语言·vue.js·php
子兮曰13 分钟前
深入Vue 3响应式系统:为什么嵌套对象修改后界面不更新?
前端·javascript·vue.js
CHU72903516 分钟前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序
枫叶丹417 分钟前
【Qt开发】Qt界面优化(一)-> Qt样式表(QSS) 背景介绍
开发语言·前端·qt·系统架构
子兮曰7 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
吴仰晖7 小时前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神7 小时前
github发布pages的几种状态记录
前端
阿蒙Amon9 小时前
TypeScript学习-第10章:模块与命名空间
学习·ubuntu·typescript
不像程序员的程序媛9 小时前
Nginx日志切分
服务器·前端·nginx