面试题：TypeScript中type与interface在扩展与实现方面的差异

Question

在TypeScript项目中，假设已有一个用interface定义的基础类型和一个用type定义的类型，要求通过扩展的方式分别创建新类型，描述这两种扩展方式的具体做法及不同点。如果涉及到类实现这两种类型，又有什么需要注意的地方？

Answer 1

使用 interface 扩展已有 interface 定义的基础类型

1. 具体做法：使用 extends 关键字。例如：

   interface BaseInterface {
       id: number;
   }
   interface ExtendedInterface extends BaseInterface {
       name: string;
   }
   

2. 特点：interface 可以重复声明，多次声明的 interface 会自动合并。例如：

   interface BaseInterface {
       id: number;
   }
   interface BaseInterface {
       age: number;
   }
   // 此时 BaseInterface 包含 id 和 age 属性
   

使用 type 扩展已有 type 定义的类型

1. 具体做法：使用交叉类型 &。例如：

   type BaseType = {
       id: number;
   };
   type ExtendedType = BaseType & {
       name: string;
   };
   

2. 特点：type 一旦定义不能重复声明，若重复声明会报错。例如：

   type BaseType = {
       id: number;
   };
   type BaseType = {
       age: number;
   };
   // 这里会报错，因为 BaseType 重复声明了
   

不同点

1. 声明方式：interface 使用 extends 扩展，type 使用交叉类型 & 扩展。
2. 重复声明：interface 可以重复声明并自动合并，type 不能重复声明。

类实现这两种类型时的注意点

1. 实现 interface：类使用 implements 关键字实现 interface，必须实现 interface 中定义的所有属性和方法。例如：

   interface MyInterface {
       name: string;
       greet(): void;
   }
   class MyClass implements MyInterface {
       name: string;
       constructor(name: string) {
           this.name = name;
       }
       greet(): void {
           console.log(`Hello, ${this.name}`);
       }
   }
   

2. 实现 type：由于 type 本质上是类型别名，类不能直接实现 type。但可以将 type 转换为 interface 再让类实现。例如：

   type MyType = {
       name: string;
       greet(): void;
   };
   interface MyTypeAsInterface extends MyType {}
   class MyClass implements MyTypeAsInterface {
       name: string;
       constructor(name: string) {
           this.name = name;
       }
       greet(): void {
           console.log(`Hello, ${this.name}`);
       }
   }
   

注意，在实现 interface 或转换后的 interface 时，类的属性和方法的类型必须与接口定义严格匹配。