TypeScript(八)接口interface(下)

203 阅读1分钟

上一节我们学习了interface的使用方法,这节我们学习一些其它的属性。

一、可选属性

我们来看这样一段代码

interface Person {
  name: string;
  age: number;
}

let tom: Person = {
  name: 'Tom'
};

这段代码中我们定义了一个接口Person,接下来我们定义一个对象tom,并且用Person去校验这个对象,结果是报错的,因为我们定义的对象tom中没有age这个属性。当我们想把age作为一个非必要属性时可以在age的后面加上一个?,这时age就变成了可选属性。

interface Person {
  name: string;
  age?: number;
}

let tom: Person = {
  name: 'Tom'
};

此时这个对象写或者不写age的时候都不会报错了。

二、任意属性

有时候我们希望定义一个接口允许有任意属性,可以这样写

interface Person {
  [propName: string]: any;
}

let tom: Person = {
  name: 'Tom',
  age: 12,
  abc: {}
};

上面的代码中我们定义了这个对象的key是string类型,这个对象的value是any也就是任意类型,可以看到我们定义的有字符串、数字、对象都不会报错,这就是任意属性的使用方法。

三、只读属性

有时候我们希望一些值只能读取不能被改变,这时可以在对象的key前面加上 readonly

interface Person {
  readonly name: string;
}

let tom: Person = {
  name: 'Tom'
};

console.log(tom.name) //Tom  可以读取
tom.name = "xxx"      //报错  不可以被改变