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

这篇具有很好参考价值的文章主要介绍了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:'张三'
            }
        ]
    }
}

二、接口请求参数限制

ts中interface自定义结构约束和对类的约束,typescript,vue.js,前端,typescript

 ts中interface自定义结构约束和对类的约束,typescript,vue.js,前端,typescript

三、继承 

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 (对类的约束 可以累加)文章来源地址https://www.toymoban.com/news/detail-647322.html

interface Is1{
    name:string
}
interface Is2{
    age:number
}

class Person implements Is1,Is2{
    name:string;
    age:number
}

到了这里,关于ts中interface自定义结构约束和对类的约束的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【TypeScript】中定义与使用 Class 类的解读理解

    类是用于创建对象的模板。他们用代码封装数据以处理该数据。JavaScript 中的类建立在原型上,但也具有某些语法和语义未与 ES5 类相似语义共享。 TypeScript 除了实现了所有 ES6 中的类的功能以外,还添加了一些新的用法。 关于 ES6的 Class 类语法概念 ,在本章节不做过多阐述,

    2024年02月14日
    浏览(41)
  • vite 生成 TypeScript 的类型定义( d.ts )

    核心是 emitDeclarationOnly , declarationDir , declaration 也可以通过 tsc 命令 传入这些参数, 生成 d.ts

    2024年02月14日
    浏览(42)
  • 面试题-TS(二):如何定义 TypeScript 中的变量和函数类型?

    面试题-TS(二):如何定义 TypeScript 中的变量和函数类型? 一、 变量类型的定义 在TypeScript中,我们可以使用冒号(:)来指定变量的类型。以下是一些常见的变量类型: 布尔类型(boolean):表示true或false的值。 数字类型(number):表示数字值。 字符串类型(string):表示文本值

    2024年02月15日
    浏览(42)
  • 基于 Redux + TypeScript 实现强类型检查和对 Json 的数据清理

    突然像是打通了任督二脉一样就用了 generics 搞定了之前一直用 any 实现的类型…… 关于 Redux 的部分,这里不多赘述,基本的实现都在这里:Redux Toolkit 调用 API 的四种方式 和 async thunk 解决 API 调用的依赖问题。 之前的实现方法是这个:TS 使用自动提示生成对象中的键,不过

    2024年02月14日
    浏览(34)
  • TypeScript的interface

    目录 一、基本使用 二、interface重名、重合 三、任意key 四、interface的? 五、interface的readonly 六、interfacec的接口继承 七、interface定义函数 总结: 变量a这个对象必须有name和age这两个属性,并且他们的类型分别是string和number, 这都相当与给变量a声明了一个指定的类型A  总结:

    2024年02月09日
    浏览(38)
  • Typescript 之接口 interface(详解)

    TS新增了一个重要概念:接口, 分为对象类型接口和函数类型接口 接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约 Interface 是一种描述对象或函数的东西。你可以把它理解为形状,一个对象需要有什么样的属性,函数需要什么参数或返回什么样的值,数

    2024年02月10日
    浏览(44)
  • ts全局类型(interface)

    首先先创建全局类型文件 命名以 xxx.d.ts 结尾 在项目中找到 tsconfig.json 配置文件 在 compilerOptions 下添加typeRoot属性,值为新创建的文件路径。 项目启动的时候就会自动读取该文件。 文件内容

    2024年02月12日
    浏览(41)
  • 【TypeScript】接口类型 Interfaces 的使用理解

    导语 : 什么是 类型接口 ? 在面向对象语言中 ,接口 (Interfaces) 是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。TypeScript 中的 类型接口 是一个非常灵活的概念,除了可用于 对类的一部分行为进行抽象 以外,也常用于对「

    2024年02月15日
    浏览(53)
  • typescript中type、interface的区别

    一、概念定义  interface:接口 在TS 中主要用于定义【对象类型】,可以对【对象】的形状进行描述。 type :类型别名 为类型创建一个新名称,它并不是一个类型,只是一个别名。 二,区别 interface: interface 用来定义一个类结构,可以声明多个 使用interface声明,可以被继承扩

    2024年02月08日
    浏览(34)
  • TypeScript中 interface 和 type 的区别

    区别1 使用 interface 和 type 都是表示给定数据结构的常用方法。 定义的方式略有不同。 type 定义的时候有 “=” 符号 区别2 interface 可以多次声明同一接口。它们将合并在一起形成一个接口定义。 type 只能声明一次。 interface:可以多次声明,并最终可共同复用; type:再次声明

    2024年02月14日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包