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
}
相关推荐
xw58 分钟前
uni-app中v-if使用”异常”
前端·uni-app
!win !26 分钟前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒1 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding1 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖1 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花2 小时前
i18n国际语言化配置
前端
编程贝多芬2 小时前
Promise 的场景和最佳实践
前端·javascript
Asort2 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio2 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗2 小时前
JS的对象属性存储器
前端