深入接口类型

Qxw大约 2 分钟TypescriptTypescript

提示

基本用法
可选属性
只读属性
接口继承
混合类型接口

一、前言

使用接口可以定义几乎任意结构

二、基本用法

interface Info {
  firstName: string;
  lastName: string;
}

const fullName = ({ firstName, lastName }: Info) => `${firstName}${lastName}`;

三、可选属性

当我们定义了某些结构的时候，一些对于某些字段的要求是可选的，有些字段就要做处理，没有就忽略。这种情况下可以使用 typescript 提供的可选属性。

interface IVegetables {
  color?: string;
  type: string;
}

const getVegetables = ({ color, type }) => {
  return `A ${color ? color + " " : ""}${type}`;
};

四、只读属性

interface Role {
  readonly 0: string;
  readonly 1: string;
}

const role: Role = {
  0: "super_admin",
  1: "admin",
};
role[1] = "super_admin"; // Cannot assign to '0' because it is a read-only property

五、接口继承

一个接口可以被多个接口继承

interface Vegetables {
  color: string;
}
interface Tomato extends Vegetables {
  radius: number;
}
interface Carrot extends Vegetables {
  length: number;
}
const tomato: Tomato = {
  radius: 1.2, // error  Property 'color' is missing in type '{ radius: number; }'
};
const carrot: Carrot = {
  color: "orange",
  length: 20,
};

上面定义的 tomato 变量因为缺少了从Vegetables接口继承来的 color 属性，从而报错。

一个接口也可以继承多个接口

interface Vegetables {
  color: string;
}
interface Food {
  type: string;
}
interface Tomato extends Food, Vegetables {
  radius: number;
}

const tomato: Tomato = {
  type: "vegetables",
  color: "red",
  radius: 1.2,
}; // 在定义tomato变量时将继承过来的color和type属性同时声明

六、混合类型接口

interface Counter {
  (): void; // 这里定义Counter这个结构必须包含一个函数，函数的要求是无参数，返回值为void，即无返回值
  count: number; // 而且这个结构还必须包含一个名为count、值的类型为number类型的属性
}
const getCounter = (): Counter => {
  // 这里定义一个函数用来返回这个计数器
  const c = () => {
    // 定义一个函数，逻辑和前面例子的一样
    c.count++;
  };
  c.count = 0; // 再给这个函数添加一个count属性初始值为0
  return c; // 最后返回这个函数对象
};
const counter: Counter = getCounter(); // 通过getCounter函数得到这个计数器
counter();
console.log(counter.count); // 1
counter();
console.log(counter.count); // 2