上一节,我们简单的介绍ts的基础数据类型,那么接下来我们来介绍ts的接口。
TS的接口
接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。
JS中是没有接口的概念的,在 TypeScript 中,我们使用接口interface
来定义接口。
在ts中,接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对对象的形状进行描述。
我们先来看一个简单的代码,来认识一下接口。
interface Person {
name: string,
age: number
}
function sayHello(person: Person) {
return `Hello! I am ${
person.name}, ${
person.age} years old.`;
}
let p1: Person = {
name: "cyl",
age: 21
}
console.log(sayHello(p1));
我们定义了一个简单的接口,用来对Person对象的形状进行描述。我们在调用sayHello函数时,多给一些属性,或者属性数据类型错误都是不行的。
赋值的时候,变量的形状必须和接口的形状保持一致。
可选属性
有时我们希望不要完全匹配一个形状,那么可以用可选属性。
interface Person {
name: string,
age?: number
}
function sayHello(person: Person) {
return `Hello! I am ${
person.name}`;
}
let p1: Person = {
name: "cyl"
}
console.log(sayHello(p1));
我们在age的:前面添加一个?表示这是一个可选属性,可以不用给。
只读属性
我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly
定义只读属性
interface Person {
readonly id: string,
name: string,
age?: number
}
let p: Person = {
id: '1',
name: "jake",
age: 16
}
p.id = "2";
我们在id属性前面加上readonly
那么id属性就变成一个只读属性,对其进行修改会报错的。
const
和readonly
的区别,如果你想限定某个变量不允许其发生改变,那么你应该使用const
。如果你想限定一个对象的某个属性不允许发生改变,那么你应该使用readonly
。
任意属性
首先,我们先看一段ts代码
interface Person {
name?: string,
age: number
}
function sayHello(person: Person) {