typeScript基础(5)_对象的类型-interfaces接口
2023-09-27 14:22:48 时间
接口类型
使用interfaces来给对象定义类型,接口interfaces是对行为的抽象,而具体如何行动需要类来实现implement。
TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。
For example :
接口简单使用
//接口简单使用
interface MySelf {
name: string,
age: number,
habby: number[],
runing?: boolean,//可选参数
}
var obj: MySelf = {
name: "zjq",
age: 18,
habby: [1, 2, 3]
}
var obj: MySelf = {
name: "zjq",
age: 18,
habby: [1, 2, 3],
runing:true
}
给obj赋值了MySelf 类型,里面可以对三个属性进行了约束,另外一个runing是可选属性,用的话必须是布尔类型才可以。
自定义属性
//自定义属性
interface NewMySelf {
name: string,
age: number,
habby: number[],
runing?: boolean,//可选参数
[propName: string]: string | boolean | number | number[] //需要包含上述所有类型 使用联合类型 |
}
var newmyself: NewMySelf = {
name: "zjq",
age: 18,
habby: [1, 2, 3, 4],
runing: true,
zjq: 'zjjq',
zrh: "888"
}
[propName: string]: string | boolean | number | number[] //需要包含上述所有类型 使用联合类型 |
只读属性:readonly
interface ReadonlyS {
readonly name: string,
age: number,
habby: number[],
runing?: boolean,//可选参数
[propName: string]: string | boolean | number | number[] //需要包含上述所以类型 使用联合类型 |
}
//添加readonly后,首次声明变量时没加name属性也会报错。
var shop: ReadonlyS = {
name: "zjq",
age: 18,
habby: [1, 2, 3, 4],
runing: true,
zjq: 'zjjq',
}
// shop.name = '000' //会报错提示 是只读属性 。
只读属性只能在第一次给ReadonlyS 类型的对象赋值时就给定name属性,否则就会报错,再次添加属性赋值也会报错。
总结:innterfaces是为了规范对象的参数,可以规定对象的必有属性、可选属性、自定义属性、只读属性。
参考:https://www.bookstack.cn/read/typescript-tutorial-202005/basics-type-of-object-interfaces.md
相关文章
- Typescript骚操作,在TS里面直接插入HTML
- typescript - 前言介绍
- typescript 函数(定义、参数、重载)
- TypeScript基础入门
- TypeScript ES6-Promise 递归遍历文件夹中的文件
- 【TypeScript】TS中type和interface在类型声明时的区别
- TypeScript开篇:尝点新鲜和甜头
- 被迫开始学习Typescript —— vue3的 props 与 interface
- TypeScript和JavaScript的区别,全面解读超详细(二)
- 微软发布TypeScript 2.0 RC版本
- TypeScript函数(与js函数区别、返回值类型、必填参数可选参数默认参数剩余参数、函数重载)、接口(对象形状描述、可选属性只读属性、索引签名任意属性、接口与类型别名的区别、声明合并、接口继承)、类(类的属性和方法、私有字段、存取器、继承、访问控制修饰符、类的方法重载)
- TypeScript “==“ 和 “===“区别
- TypeScript 接口
- TypeScript:接口