type 和 interface的区别

2024-05-18 01:18

1. type 和 interface的区别

 大家使用 typescript 总会使用到 interface 和 type, 官方规范  稍微说了下两者的区别   An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.   An interface can have multiple merged declarations, but a type alias for an object type literal cannot.   但是没有太具体的例子。
   明人不说暗话,直接上区别。
    相同点 
   都可以描述一个对象或者函数
    interface 
   interface User {   name: string   age: number   }
   interface SetUser {   (name: string, age: number): void;   }
    type 
   type User = {   name: string   age: number   };
   type SetUser = (name: string, age: number): void;
    拓展(extends)与 交叉类型(Intersection Types) 
   interface 可以 extends, 但 type 是不允许 extends 和 implement 的,但是 type 缺可以通过交叉类型 实现 interface 的 extend 行为,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 与 interface 类型 交叉 。   虽然效果差不多,但是两者语法不同。
    interface extends interface 
   interface Name {   name: string;   }   interface User extends Name {   age: number;   }
    type 与 type 交叉 
   type Name = {   name: string;   }   type User = Name & { age: number  };
    interface extends type 
   type Name = {   name: string;   }   interface User extends Name {   age: number;   }
    type 与 interface 交叉 
   interface Name {   name: string;   }   type User = Name & {   age: number;   }
    不同点 
    type 可以而 interface 不行 
    type 可以声明基本类型别名,联合类型,元组等类型 
   // 基本类型别名   type Name = string
   // 联合类型   interface Dog {   wong();   }   interface Cat {   miao();   }
   type Pet = Dog | Cat
   // 具体定义数组每个位置的类型   type PetList = [Dog, Pet]
    type 语句中还可以使用 typeof 获取实例的 类型进行赋值 
   // 当你想获取一个变量的类型时,使用 typeof   let div = document.createElement('div');   type B = typeof div
    其他骚操作 
   type StringOrNumber = string | number;   type Text = string | { text: string };   type NameLookup = Dictionary;   type Callback = (data: T) => void;   type Pair = [T, T];   type Coordinates = Pair;   type Tree = T | { left: Tree, right: Tree };
    interface 可以而 type 不行 
    interface 能够声明合并 
   interface User {   name: string   age: number   }
   interface User {   sex: string   }
   /*   User 接口为 {   name: string   age: number   sex: string   }   */

type 和 interface的区别