What is an interface

The core of TypeScript is type checking. The interface is used to declare types and provide type declarations and constraints for internal or third-party consumers.

Usage scenarios

• Data type declaration and constraints

// Declare data type
interface CustomerInfo {
  customerCode: string;
  customerName: string;
}

// Using data types
function helloCustomer(customerInfo: CustomerInfo) {
  console.log(`Hello, ${customerInfo.customerName}!`);
}

helloCustomer({customerCode: '1001', customerName: 'Jee'}); // ok
helloCustomer({customerName: 'Jee'}); // error, Property 'customerCode' is missing

• object-oriented programming

Similar to the object-oriented language, it is used to define the object interface, declare the structure of the object, implement the interface when defining the class, and meet the function of the interface definition.

// Interface declaration
interface Animal {
  name: string;
}

// Interface inheritance
interface Mammal extends Animal {
  legNum: number;
  sound(): string;
}

// Class implementation
class Bull implements Mammal {
  name: string;
  legNum: number;
  
  constructor(name: string) {
    this.name = name;
    this.legNum = 4;
  }

  sound() {
    return 'moo';
  }
}

// Example
let bull1 = new Bull('bull1');
console.log(bull1.sound()); // moo

Variable interface properties

There are two ways to implement variable attributes. When the attributes are clear, the first is recommended. The second can be used when it is not clear.

• Optional attribute, defining the attributes that can be selected for transmission

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // optional attribute
}

• Index type, support string, number index property

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // optional attribute
  [key: string]: any; // Any other name, any type of property
}

Here's an explanation, because in JavaScript objects, the number index is converted to string to get the value. If there are number and string index properties in an interface, the type of number index property and the subtype of string index property must be used. That is to say, the attribute type of the number index must be able to be overwritten by the attribute type of the string index; the value obtained by using the number index is also the attribute type of the string index.

Static and read-only properties

• Static type, i.e. class attribute, static decoration
• Read only property, cannot be modified after initialization, readonly

interface CustomerInfo {
  static greeting = 'Hello'; // Static attribute
  static readonly standardGreeting = 'Hello'; // Read only static properties
  readonly customerCode: string; // Read-only attribute
  customerName: string; // General attribute
}

const vs readonly, const for variables, readonly for attributes

Function type

Interface can not only describe object type, but also function type (this is a little different from object-oriented language, which needs to be understood).

interface SearchFunc {
  (content: string, key: string): boolean;
}

// The parameter name can be different and the type can be omitted.
let mySearchFunc: SearchFunc = (c, k) => {
  return c.search(k) > -1;
}

Follow-up

Will write class learning again, a combination of interface and class.