深入接口类型
大约 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