typescript 接口和对象类型(四)

在typescript中,我们定义对象的方式要用关键字interface(接口),
使用interface来定义一种约束,让数据的结构满足约束的格式。定义方式如下:
 
// 定义一个接口类型
interface person{
    age:number,
    name:string,
    sex:number
}

那么我们都哪些要注意的事项呢 下面这么写都会报错

// 如果定义一个对象缺少或者添加属性都会报错 也就是说要一一对应不可以多也不可以少 这么写会报错
// 缺少对象属性的定义
const ObjP:person = {
    age:1,
    name:'sdfs'
}


// 这么写也会报错 超过了接口类型的定义
const ObjP1: person = {
    age: 1,
    name: 'sdfs',
    sex:1,
    h:1
}

// 同样的数据类型不对应也会报错

正确的写法是,也就是一一对应

const ObjPOk: person = {
    age: 1,
    name: 'sdfs',
    sex:1
}

那么如果后台返回的数据不确定,只能确定一些必然出现的数据怎么办,这个时候就可以采用可选属性来解决

如下

interface person1 {
    name?: string, // 定义一个可循属性
    age: number,
    sex: number
}
// 这里省略了name 依然是正确的
const objKxL: person1 = {
    age: 111,
    sex: 1
}

 

那么如果返回的数据字段非常多怎么办,只知道几个固定,其他的字段都是不可控的,这个时候可以采用下面的方式

任意属性

// 任意属性定义方式
interface person2 {
    name?: string, // 定义一个可循属性
    age: number,
    sex: number,
    [prop:string]:any // 定义一个任意属性 类型是any  这个时候我们即使返回很多字段也不会报错 这里的“prop”可以随便定义成什么名字
}

const obj2: person2 = {
    age:1,
    sex:1,
    a:1,
    b:'sdfsdfs'
}

 

如果我们希望返回的数据只能读,不可以去修改原始数据,这个时候就需要用到另外一个属性了,叫做只读属性

interface person3{
    readonly id:string,
    name?: string, // 定义一个可选属性
    age: number,
    sex: number,
    [prop: string]: any // 定义一个任意属性 类型是any 
}


const obj3:person3 = {
    id:'sdfsdfd',
    age:1,
    sex:1,
    a:1
}


obj3.id = 'fsdhfsdjfjhds'

 

 

那么接口如何制定函数呢,可以通过下列方式

interface person4 {
    readonly id: string,
    name?: string, // 定义一个可选属性
    age: number,
    sex: number,
    cb: () => void, // 这里制定函数无返回值也就是默认空值返回
    [prop: string]: any // 定义一个任意属性 类型是any 
}

const obj4:person4 = {
    id:'111',
    age:1,
    sex:2,
    cb:()=>{
        console.log('1111');
    },
    a:111
}

下一节学习typescript 数组类型

posted @ 2024-11-21 10:30  史洲宇  阅读(16)  评论(0编辑  收藏  举报