TypeScript之interface定义对象（二）

TypeScript语法的interface定义对象和使用

一.JS中的对象
二.TS中定义对象
三.任意属性
四.可有可无的属性
五.只读属性

上一篇 TypeScript之数据类型（一）

前面我们说到了基本数据类型，还有数组，枚举等类型，那么在typescript中是如何定义像JavaScript中的对象的呢？

一.JS中的对象

我们先来看一下在JavaScript中的定义对象的方式，定义方式如下：

//定义
let student = {
  name: '狗蛋',
  age: 18,
  eat: function () {
    console.log(this.name+'干饭了')
  }
}
//使用
console.log(student.name);       // 获取学生的姓名
console.log(student.age);        // 获取学生的年龄
console.log(student.eat());  // 调用eat方法

student.address = "成都"  //添加address属性并赋值

定义了一个student对象包含name，age，eat属性。并且直接使用对象.属性获取对象中的值或方法，也可以直接添加不存在的属性并赋值。

二.TS中定义对象

在typescript中，我们定义对象的方式要用关键字interfaces（接口），我的理解是使用interfaces来定义一种约束，让数据的结构满足约束的格式。定义方式如下：

//使用接口interface来约束
interface Student {
    name : string ,
    age: number,
    eat():void
}

//定义 声明一个student1变量并定义为Student类型,同时赋值给
let student1 : Student {
    name : '狗蛋',
    age : 18,
    eat(){ 
    	console.log(this.name+'干饭了')
    }
}
//使用
console.log(student1.name);       // 获取学生的姓名
console.log(student1.age);        // 获取学生的年龄
console.log(student1.eat());  // 调用eat方法

上面通过interface约束了一个定义了一个Student类型包含name,age属性和eat函数。（注意：既然是约束，其中约束的类型和属性数量在定义的时候都要对应，不能少也不能多），定义后使用和JS一样。那如果想往里面添加属性或者不需要某个属性该怎么定义呢？

三.任意属性

如果一个想要定义的一个对象中可以任意添加属性，使用 [propName:string] : any 来占位interface中的约束。[propName:string 代表的是属性是字符串类型的属性，如abc ,属性值是任意类型

//使用接口interface来约束
interface Student {
    name : string ,
   [propName:string] : any, //添加任意属性
}

//在这个Student类型中定义了一个任意属性
let student1 : Student {
    name : '狗蛋',  
    age : 18,
    eat(){ 
    	console.log(this.name+'干饭了')
    }
}

在这个Student类型中定义了一个name属性和一个任意属性，定义变量student1时多定义了一个age属性和eat函数，也是可以的。

四.可有可无的属性

这个属性就是为了解决一个对象中的属性不需要的时候的定义。比如上面的Student类型我们不需要age这个属性，那么只需要在属性名后面加一个？，就代表此属性可以省略。

interface Student {
    name : string ,
    age?: number,  //age后面加? 可省略此属性
    eat():void
}
//此时定义的student1没有age属性 也是可以的
let student1 : Student {
    name : '狗蛋',  
    eat(){ 
    	console.log(this.name+'干饭了')
    }
}

五.只读属性

这个很简单，就是定义了属性值后不能更改，在属性值前面加readonly关键字，代表此属性只读。

interface Student {
    name : string ,
    readonly age: number,  //age前面加readonly  只读
    eat():void
}
//此时定义的student1没有age属性 也是可以的
let student1 : Student {
    name : '狗蛋',  
    age :18,
    eat(){ 
    	console.log(this.name+'干饭了')
    }
}
//尝试修改age
student1.age = 20  //此时会报错 因为age为只读属性

下一篇 TypeScript之函数定义（三）

没有啦，就是这么简单。。。。。.。。。。。。.。。。。。。

秒客网