相同点
    都可以描述一个对象或者函数

    1. interface User {
    2. name: string
    3. age: number
    4. }
    5. interface SetUser {
    6. (name: string, age: number): void;
    7. }
    8. type User = {
    9. name: string
    10. age: number
    11. };
    12. type SetUser = (name: string, age: number): void;

    都允许拓展(extends)
    interface 和 type 都可以拓展,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多,但是两者语法不同。

    1. ## interface extends interface
    2. interface Name {
    3. name: string;
    4. }
    5. interface User extends Name {
    6. age: number;
    7. }
    8. ## type extends type
    9. type Name = {
    10. name: string;
    11. }
    12. type User = Name & { age: number };
    13. ## interface extends type
    14. type Name = {
    15. name: string;
    16. }
    17. interface User extends Name {
    18. age: number;
    19. }
    20. ## type extends interface
    21. interface Name {
    22. name: string;
    23. }
    24. type User = Name & {
    25. age: number;
    26. }

    不同点
    type 可以而 interface 不行
    type 可以声明基本类型别名,联合类型,元组等类型

    1. // 基本类型别名
    2. type Name = string
    3. // 联合类型
    4. interface Dog {
    5. wong();
    6. }
    7. interface Cat {
    8. miao();
    9. }
    10. type Pet = Dog | Cat
    11. // 具体定义数组每个位置的类型
    12. type PetList = [Dog, Pet]

    type 语句中还可以使用 typeof 获取实例的 类型进行赋值

    1. // 当你想获取一个变量的类型时,使用 typeof
    2. let div = document.createElement('div');
    3. type B = typeof div

    其他骚操作

    1. type StringOrNumber = string | number;
    2. type Text = string | { text: string };
    3. type NameLookup = Dictionary<string, Person>;
    4. type Callback<T> = (data: T) => void;
    5. type Pair<T> = [T, T];
    6. type Coordinates = Pair<number>;
    7. type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

    interface 可以而 type 不行
    interface 能够声明合并

    1. interface User {
    2. name: string
    3. age: number
    4. }
    5. interface User {
    6. sex: string
    7. }
    8. /*
    9. User 接口为 {
    10. name: string
    11. age: number
    12. sex: string
    13. }
    14. */