学习TypeScrip3(接口和对象类型)

对象的类型


在typescript中,我们定义对象的方式要用关键字interface(接口),我的理解是使用interface来定义一种约束,让数据的结构满足约束的格式。定义方式如下:

使用接口约束的时候不能多一个属性也不能少一个属性
必须与接口保持一致

//这样写是会报错的 因为我们在person定义了a,b但是对象里面缺少b属性
interface Person {
    b:string,
    a:string
}
 
const person:Person  = {
    a:"213"
}

重名interface 可以进行合并

interface A{name:string}
interface A{age:number}
var x:A={name:'xx',age:20}
//继承
interface A{
    name:string
}
 
interface B extends A{
    age:number
}
 
let obj:B = {
    age:18,
    name:"string"
}


可选属性 使用?操作符

可选属性的含义是该属性可以不存在

//所以说这样写也是没问题的
interface Person {
    b?:string,
    a:string
}
 
const person:Person  = {
    a:"213"
}


任意属性 [propName: string]


需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:

//在这个例子当中我们看到接口中并没有定义C但是并没有报错
//应为我们定义了[propName: string]: any;
//允许添加新的任意属性
interface Person {
    b?:string,
    a:string,
    [propName: string]: any;
}
 
const person:Person  = {
    a:"213",
    c:"123"
}


只读属性 readonly


readonly 只读属性是不允许被赋值的只能读取

//这样写是会报错的
//应为a是只读的不允许重新赋值
interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
}
 
const person: Person = {
    a: "213",
    c: "123"
}
 
person.a = 123


添加函数

interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
    cb:()=>void
}
 
const person: Person = {
    a: "213",
    c: "123",
    cb:()=>{
        console.log(123)
    }
}

相关推荐

  1. 学习TypeScrip3接口对象类型

    2023-12-06 05:52:06       39 阅读
  2. TypeScript 笔记——类型接口

    2023-12-06 05:52:06       10 阅读
  3. typeScript3(数组类型

    2023-12-06 05:52:06       18 阅读
  4. typescript——3.接口

    2023-12-06 05:52:06       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-06 05:52:06       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-06 05:52:06       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-06 05:52:06       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-06 05:52:06       18 阅读

热门阅读

  1. vue自定义指令配置小程序按钮权限

    2023-12-06 05:52:06       36 阅读
  2. 第八章 List、Set、数据结构、Collections

    2023-12-06 05:52:06       32 阅读
  3. cookie,session、中间件、csrf认证相关【补充】

    2023-12-06 05:52:06       32 阅读
  4. 【ListView】

    2023-12-06 05:52:06       39 阅读
  5. docker安装常用的中间件脚本

    2023-12-06 05:52:06       28 阅读
  6. 水库监管AI视觉算法与边缘计算盒子

    2023-12-06 05:52:06       62 阅读
  7. 在Vue3中使用缓存组件keep-alive vue3缓存组件

    2023-12-06 05:52:06       41 阅读