TypeScript中type与interface的使用和区别

一、基本概念对比

1. 基本语法

interface 示例：

interface User {
  id: number;
  name: string;
}

interface Admin extends User {
  privileges: string[];
}

type 示例：

type User = {
  id: number;
  name: string;
};

type Admin = User & {
  privileges: string[];
};

2. 核心相同点

✅ 都能描述对象形状
✅ 都支持扩展（interface 用 extends，type 用交叉类型）
✅ 都支持实现（implements）
✅ 现代 TypeScript 中性能差异可以忽略

二、关键差异详解

1. 扩展方式不同

interface 使用继承：

interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

type 使用交叉类型：

type Animal = {
  name: string;
};

type Bear = Animal & {
  honey: boolean;
};

2. 声明合并（Interface 独有）

interface User {
  name: string;
}

interface User {
  age: number;
}

// 最终 User 包含 name 和 age 属性
const user: User = {
  name: "Alice",
  age: 30
};

type 不允许重复声明，会报错

3. 类型表达能力

type 能表达更复杂的类型：

• 联合类型：

  type ID = number | string;
  

• 元组类型：

  type Point = [number, number];
  

• 映射类型：

  type Readonly<T> = {
    readonly [P in keyof T]: T[P];
  };
  

• 条件类型：

  type IsString<T> = T extends string ? true : false;
  

4. 类实现（implement）

两者都可以被类实现，但语法不同：

// 使用 interface
interface ClockInterface {
  currentTime: Date;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
}

// 使用 type
type ClockType = {
  currentTime: Date;
};

class DigitalClock implements ClockType {
  currentTime: Date = new Date();
}

三、使用场景推荐

优先使用 interface 的情况

1. 定义对象形状（尤其是公共 API）

   // 更好的做法
   interface Config {
     apiUrl: string;
     timeout: number;
   }
   

2. 需要声明合并时

   // 扩展第三方库类型
   declare module "vue" {
     interface ComponentCustomProperties {
       $filters: Filters;
     }
   }
   

3. 面向对象编程（类实现接口）

   interface Serializable {
     serialize(): string;
   }
   
   class Document implements Serializable {
     serialize() {
       return "...";
     }
   }
   

优先使用 type 的情况

1. 需要联合类型时

   type Result = Success | Failure;
   

2. 需要元组类型时

   type Coordinates = [number, number];
   

3. 需要复杂类型运算时

   type Partial<T> = {
     [P in keyof T]?: T[P];
   };
   

4. 需要类型别名简化时

   type StringOrNumber = string | number;
   

四、性能与编译差异

五、最佳实践建议

1. 项目一致性：团队统一选择一种风格（或制定明确规则）

2. 公共 API：优先使用 interface（更好的错误提示和扩展性）

3. 复杂类型：使用 type 表达高级类型关系

4. React Props & State：

   // 推荐用法
   type Props = {
     visible: boolean;
   };
   
   type State = {
     count: number;
   };
   
   class Component extends React.Component<Props, State> {}
   

六、经典案例对比

1. 扩展第三方库类型

interface 方式（推荐）：

declare namespace Express {
  interface Request {
    user?: User;
  }
}

type 方式（不可行）：

// 无法这样扩展第三方类型
type Express.Request = {
  user?: User;
};

2. 组件 Props 类型

type 方式（推荐）：

type ModalProps = {
  visible: boolean;
  onClose: () => void;
  children?: React.ReactNode;
} & (
  | {
      type: "alert";
      message: string;
    }
  | {
      type: "confirm";
      question: string;
    }
);

到此这篇关于TypeScript中type与interface的使用和区别的文章就介绍到这了,更多相关TypeScript type与interface区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论