zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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