TypeScript practice is essential to note (2) - Interface

　　In traditional object-oriented languages, interfaces (Interface) like protocol, it lists a series of rules (that is, the behavior of abstraction), then by the class to implement these rules. The TypeScript the interface more flexible, in addition to containing conventional role outside, it can also extend other classes, named for the type of object and the structure of the constraint values, greatly eliminate many potential errors.

First, property

　　TypeScript Interface may be limited by the structure of the object attribute and its type declaration. For example a defined interface called Person, containing a string type name attribute and an age property of numeric type, as shown below.

interface Person {
  name: string;
  age: number;
}

　　When declaring an object of the Person type, it must be two attributes are defined, and also the type of interface with the same, as shown below.

let worker: Person = {
  name: "strick",
  age: 28
};

　　Once a few custom attributes interface or a property not declared in the interface in worker object, then it will error at compile time. Note that, typescript type checking does not match the order attribute definition interface and object, as long as the type and name match can compile.

1) optional attributes

　　Attribute definition allows TypeScript interface is optional, as long as the attribute name followed by a question mark (?), Could become optional attributes, as shown below.

interface Person {
  school?: string;
}

　　Alternatively predefined attributes may both required attributes, an error message will also be inspired with no role in capturing the attributes, for example, when creating a worker object, schools define a property (see below), when compiled it will report " 'schools' does not exist in type 'Person'. Did you mean to write 'school'?" error.

let worker: Person = {
  schools: "university"
};

　　It can be seen, the definition of a not declared in the interface in the object property still is not allowed.

2) read-only attribute

　　If you want a property of the object can only be assigned when you create, you can act on the readonly keyword corresponding interface attributes, it becomes read-only, as shown below.

interface Person {
  readonly gender: string;
}

　　Because gender is a read-only property, and therefore can not be modified after the object is initialized as follows.

worker the let: the Person = {     // correct 
  Gender: " male " 
}; 
worker.gender = " female " ;      // error

3) any property

　　When the interface need to include any properties can be achieved by way of the index, as shown below in square brackets and wrapped up the index name index type.

interface Person {
  [prop: string]: string;
}

　　Person type in use, a plurality of strings can pass any type of property as follows.

let worker: Person = {
  name: "strick",
  gender: "男"
};

　　Note that once the declaration any attribute, then the mandatory and optional attributes have to be the type of sub-types. In the following example, since the type of the optional age attribute is a subtype Number, not a string, so that at compile time error.

interface the Person { 
  name: String ;                 // correct 
  Age ?: Number;                 // Error 
  [prop: String ]: String ; 
}

　　In addition to supporting the string TypeScript index type, but also support digital types of indexes, as shown below.

interface Person {
  [prop: number]: number;
}

　　It is important to note that, when the strings and numbers simultaneously define two types of indexes in the interface, which corresponds to the value type is a subtype of the former obtained. For this reason, the following code does not result in at compile time.

interface Person {
  [prop: string]: string;
  [prop: number]: number;            //错误
}

　　TypeScript is so limited because JavaScript is converted to a string of digits will then automatically indexed to an object, for example 10 and "10" to the two index values, the result is the same, the two kinds of values ​​corresponding to the index type to be consistent.

Second, inheritance

1) class inherits the interface

　　And C #, Java and other object-oriented languages, TypeScript in the class can inherit an interface, and the interface of class members will enforce. With the following interface that any changes are likely to result in a compilation error, so we can guarantee the synchronization related code. The following example demonstrates a class by inheritance through the interface, first create an interface named Person, a name attribute and a getName () method, as shown below.

interface Person {
  name: string;
  getName(): string;
}

　　Then create a class named Member of inherited Person interface, as shown by the implements keyword. At compile time, once the missing class property or method interface discovery, will immediately given.

class Member implements Person {
  name: string = "strick";
  getName() {
    return this.name;
  }
}

　　Class can inherit multiple interfaces, implemented as long as its members in the class, the compiler can be successful, as shown below, and Person class inherits Member Profile two interfaces, the limited space reasons, in its internal name are omitted and getName () achieve two members.

interface Profile {
  school: string;
}
class Member implements Person, Profile {
  school: string = "university";
}

　　Note that all members of the class can not be achieved in the interface, for example, a constructor defined in the interface, then a class that implements this interface via the constructor, the compiler will fail at this time, the code as shown below.

interface Person {
  new (name: string);
}
class Member implements Person {
  constructor(name: string) { }
}

　　Class contains two parts, static and instance, because the compiler will only instance part of the interface type checking, and constructor () function belongs to the static part of the class, so will be ignored, resulting in members can not find a match in the class to achieve interface.

　　If you want to implement the interface in the constructor, then there are two ways to choose from. The first parameter is the callback, as shown, the class code is no longer directly inherited Member Person interface, but as a parameter to createPerson () function and its first parameter is declared as the Person type.

class Member {
  constructor(name: string) { }
}
function createPerson(ctor: Person, name: string) {
  return new ctor(name);
}
createPerson(Member, "strick");

　　The second expression is the class, as shown in the following code, the variable is declared as Man Person type, class and assign it the Member.

let Man: Person = class Member {
  constructor(name: string) { }
}

2) interface inherits the interface

　　Between the interface can inherit from each, so that both interfaces more fine-grained segmentation, code reuse can be maximized. Unlike classes that simply copy other interface member over, without having to implement them. In the following example, Square interface inherits the Shape interface via the extends keyword.

interface Shape {
  background: string;
}
interface Square extends Shape {
  width: number;
}

　　A plurality of interface may also inherit other interfaces, interfaces to create a composite, as shown, extends behind with the two interfaces Shape and Border.

interface Border {
  color: string;
}
interface Ellipse extends Shape, Border {
  angle: string;
}

3) interface inheritance class

　　When the interface inherit a class that inherits all members of the class (including private and protected members), but not to implement them. In the following TextBox interface as an example, it inherited Control class.

class Control {
  private width: number;
  protected height: number;
}
interface TextBox extends Control {
  type: string;
}
class Tel implements TextBox {
  type: string = "tel";
}

　　In the example above Tel class inherits TextBox direct interface, although to achieve the type attribute interface, but will still report "Type 'Tel' is missing the following properties from type 'TextBox': width, height" wrong. Button interface inheritance because the width and height attributes also need to implement two. To avoid these errors, the interface may be implemented TextBox, as shown by the Control subclass.

class Password extends Control implements TextBox {
  type: string = "password";
}