在 TypeScript 中，any 类型可以表示任意类型，但是使用 any 类型会导致代码可读性较差，容易引起类型错误。而 interface 类型可以定义一个对象的结构，可以更好地描述对象的属性和方法，从而提高代码可读性和可维护性。
interface 类型的基本用法
定义一个 interface 类型，可以使用如下的语法：
// javascriptcn.com 代码示例
interface Person {
name: string;
age: number;
}
const person: Person = {
name: '张三',
age: 20,
};上述代码定义了一个 Person 接口，包括 name 和 age 两个属性。可以通过 Person 类型来定义变量 person，从而保证 person 对象的属性符合 Person 接口的定义。
interface 类型的可选属性和只读属性
在 interface 类型中，可以使用 ? 符号来表示可选属性，使用 readonly 关键字来表示只读属性。
// javascriptcn.com 代码示例
interface Person {
name: string;
age: number;
gender?: string; // 可选属性
readonly id: number; // 只读属性
}
const person: Person = {
name: '张三',
age: 20,
id: 123,
};上述代码中，id 属性是只读属性，不能被修改。gender 属性是可选属性，可以不用指定。
interface 类型的函数定义
在 interface 类型中，可以定义函数的结构，包括函数的参数和返回值。
interface AddFunc {
(a: number, b: number): number;
}
const add: AddFunc = (a, b) => {
return a + b;
};上述代码中，定义了一个 AddFunc 接口，表示一个函数，接受两个参数 a 和 b，返回一个 number 类型的值。可以使用 AddFunc 类型来定义变量 add，从而保证 add 变量是一个符合 AddFunc 接口定义的函数。
interface 类型的继承和多态
在 interface 类型中，可以使用 extends 关键字来实现接口的继承，从而实现接口的复用。同时，使用 interface 类型还可以实现多态的效果。
// javascriptcn.com 代码示例
interface Animal {
name: string;
eat(): void;
}
interface Dog extends Animal {
bark(): void;
}
class GoldenRetriever implements Dog {
name: string;
constructor(name: string) {
this.name = name;
}
eat() {
console.log(`${this.name} is eating.`);
}
bark() {
console.log(`${this.name} is barking.`);
}
}
const dog: Dog = new GoldenRetriever('旺财');
dog.eat(); // 旺财 is eating.
dog.bark(); // 旺财 is barking.上述代码中，定义了 Animal 和 Dog 两个接口，Dog 接口继承了 Animal 接口，并且定义了 bark 方法。然后定义了一个 GoldenRetriever 类，实现了 Dog 接口的要求。最后，定义了一个 dog 变量，使用 Dog 类型来定义变量，实现了多态的效果。
总结
使用 interface 类型可以提高代码的可读性和可维护性，避免了使用 any 类型导致的类型错误。在定义 interface 类型时，可以使用可选属性、只读属性、函数定义、继承和多态等特性，实现更加灵活和可扩展的代码。因此，在 TypeScript 中使用 interface 类型替代 any 类型是一种比较好的编码实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655c2ec8d2f5e1655d646a49