TypeScript基础笔记——接口和对象类型(TS -- 3)

简介: interface类型


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

我的理解是interface是一个国企部门只招一个人的话,他们会针对走后门的那个人量身定制招聘要求,到面试的时候,这些条件少一个都不行,多了也不行,毕竟已经内定了,再叼、这些条件不仅满足了而且还会更多的技能也没用,别人就是不要你。(留下心酸的眼泪)

interface类型

interfaceA{

    readonlyname:string//这个readonly是只读属性,意思就是说只能读取,不能将其他值赋值给他

   age?:number//这个问号就是可选的意思,条件稍微宽松了一些,下面引用这个age的话有没有这个属性都可以,不会报错

}

letobj:A= {

   name="小满嗷嗷叫"//这里如果不写name就会报错,因为我们在上面定义了A类型集合,并且在这个变量中引入了(里面必须要有name属性且类型为字符串)

   age  =18

}

注意:这个规定的属性不能多也不能少,参考我上面的案例

可选属性 --  ?操作符

interfaceA{

    readonlyname:string

   age?:number//这个问号就是可选的意思,条件稍微宽松了一些,下面引用这个age的话有没有这个属性都可以,不会报错

}

letobj:A= {

   name="小满嗷嗷叫"

   age  =18//age写不写无所谓

}

任意属性 -- [propName:string]

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

interfacePerson{

   name:string,

   age?:number,

   [propName:stirng]:string|number//这个属性一旦定义了,引用这个Person的对象就能够写入任意属性,属性的形式主要看冒号后面你定义了什么类型,比如在这里定义的类型就是string和number类型,不是这两者的类型就会报错,包括在Person里面定义除了string跟number之外其他类型也会报错

   //可以理解为这个 [propName:stirng]任意属性的优先度相当高

   

   注意string与number中间的`|`符号,小飞棍来咯,这是联合类型,后面笔记会写,这里就当作将string和number类型关系到了一块,有点像逻辑或,满足联合起来的其中一个条件都行,两个也可以

}

只读属性 -- readonly

只读属性必须在声明时或构造函数里被初始化。

interfaceA{

    readonlyname:string//这个readonly是只读属性,意思就是说只能读取,不能将其他值赋值给他

}

letobj:A= {

   name="小满嗷嗷叫"

}

obj.name="小满芳龄18"//报错

console.log(obj)//能够读取

letname1=obj.name

console.log(name1)

继承属性 -- extends

儿子在前面,父亲在后面。也就是说顺序是 儿子 继承于 父亲

父亲的部分会继承给儿子,父亲的部分如果没有使用?操作符的话,引用儿子的 对象 是必须将父亲的部分都写下去。一说到这个就想到现在有的地方买房子,出政策能够绑定3代人一起还款,父债子还,跑不掉的,连债务都继承了还不能摆脱,这政策太鸡儿黑心了,绝户计

interfaceA{

   name:string

}

interfaceBextendsA{

   age:number

}

letp:B{

   name:"有看到小满的裤子吗?"

   age:88//两种类型都要写

}


目录
相关文章
|
2月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
151 2
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
40 1
|
28天前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
1月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
51 0
|
1月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
28 0
|
2月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
33 1
|
3月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
3月前
|
存储 JavaScript 前端开发
深入浅出TypeScript | 青训营笔记
深入浅出TypeScript | 青训营笔记
32 0
|
4月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。