TypeScript的interface、type、class——泰联病从口入

先看效果

type 和 interface 有什么异同？

1.interface侧重于描述数据结构，type侧重于描述类型

1.  
   interface A{
2.  
   name:string;
3.  
   }
4.  
   type B = 'bb'|'cc'

2.都可以描述一个对象或者函数

1.  
   interface user {
2.  
   name: string;
3.  
   age: number
4.  
   }
5.  
   interface setUser {
6.  
   (name: string, age: number): void
7.  
   }
8.  
    
9.  
   type hoster = {
10.  
    name: string;
11.  
    age: number;
12.  
    }
13.  
    type setHoster = (name: string, age: number) => void

3.都可以使用extends,两两组合，四种情况

1.  
   interface extends type
2.  
   interface extends interface
3.  
   type extends interface
4.  
   type extends type

4.type专属功能-联合类型

1.  
   // type专属 联合类型
2.  
   interface Dog {
3.  
   wang()
4.  
   }
5.  
   interface Cat {
6.  
   miao()
7.  
   }
8.  
   type Pet = Dog | Cat
9.  
   type PetList = [Dog,Cat]

5、interface 能够声明合并

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

为什么说如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type

总之，大多数时候，定义用interface，修改，联合等用 type。

Typescript 中 interface 和 class 的区别？

interface: 接口只负责声明成员变量类型，不作具体实现。

class：类既声明成员变量类型并实现。

interface是什么?

在OOP语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动须要由类（classes）去实现（implement）。

TypeScript 中的接口是一个很是灵活的概念，除了可用于对类的一部分行为进行抽象之外，也经常使用于对「对象的形状（Shape）」进行描述。

1.  
   interface Person {
2.  
   name: string;
3.  
   age: number;
4.  
   }

上述例子就是一个最简单的接口，分别有两个属性分别叫作name和age，对应的值是一个字符串和一个数字。利用接口约束了传入变量的内容，当你不遵照这个约定时，typescript就会抛出一个错误。

Class是什么?

传统方法中，JavaScript 经过构造函数实现类的概念，经过原型链实现继承。而在 ES6 中，咱们终于迎来了 class。TypeScript 除了实现了全部 ES6 中的类的功能之外，还添加了一些新的用法。（今天只讲述类与interface却别，具体类的其余特性可参考官方）

1.  
   //类Person
2.  
   class Person {
3.  
   name: string;
4.  
   age: number;
5.  
   constructor(name: string, age: number) {
6.  
   this.name = name;
7.  
   this.age = age;
8.  
   }
9.  
   };
10.  
     
11.  
    //类充当接口使用,接口中只包含其中的实例属性和实例方法（constructor和static不在其中）
12.  
    const person: Person = {
13.  
    name: '张三',
14.  
    age: 18
15.  
    };
16.  
     
17.  
    //接口继承类
18.  
    interface Person1 extends Person{
19.  
    sex: string,
20.  
    printName() : void
21.  
    };
22.  
     
23.  
    const person1: Person1 = {
24.  
    name: '张三',
25.  
    age: 18,
26.  
    sex: '男',
27.  
    printName() {
28.  
    console.log(this.name)
29.  
    }
30.  
    };
31.  
     
32.  
    //类实现接口
33.  
    class Person2 implements Person1 {
34.  
    name: string;
35.  
    age: number;
36.  
    sex: string;
37.  
    email: string;
38.  
    printName() {
39.  
    console.log(this.name)
40.  
    };
41.  
    }

总结

Typescript中声明class，实际上，除了会建立一个类以外，同时也会建立一个同名的interface（同名的interface只包含其中的实例属性和实例方法）。因此class既能够看成类来使用，也能够看成interface来使用

这篇好文章是转载于：学新通技术网