持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

前言

typescript的核心原则是对元素所具有的结构进行类型检查。我们一般会用接口来描述一个对象结构中的每个属性的类型。

定义接口

比如我们定义一个人的抽象对象，对其做类型校验。

// 我们定义了一个接口 Person
interface Person {
  name: string;
  age: number;
}

我们定义接口一般首字母大写，它具有两个属性，名字-字符串，年龄-数字。当我们给这个抽象对象进行实例化时，直接限定实例化后的类型。

//定义了一个变量 viking，它的类型是 Person。
//这样，我们就约束了 viking 的形状必须和接口Person一致
let viking: Person = {
  name: "viking",
  age: 20,
};

Person接口就好比是一个抽象的类，内部声明了他能描述的属性，我们定义出来的具体对象就要和Person接口一致。

可选属性

假如，我们在初始化一个Personal对象的时候，没有性别属性，但是后来在赋值的时候又需要把这个属性加上，做属性添加操作时Personal会报错。像这种初始没有xxx属性，后面做赋值操作又添加了此属性的情况，可以使用可选参数符?来进行定义：比如我们定义性别是可选的。

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

这样我们在赋值的时候就不会出问题了。

const viking: Person = {
  name: 'viking',
  age: 20
};

viking.sex = '男';

只读属性

有的时候，我们创建的对象中，某些字段，比如id，应该是不可修改的，在JavaScript中是没办法做这种限制的，typescript中给了只读属性，我们就可以做对应的类型检查。

// 我们希望id是只读的，不可修改
interface Person2 {
  readonly id: number;
  name: string;
  age?: number;
}
let viking2: Person2 = {
  id: 9527,
  name: "viking",
  age: 20,
};

当我们对id做修改时，就会报错，大大减少了不必要的错误。

vue3入门20 - typescript 接口

前言

定义接口

可选属性

只读属性