TypeScript | TypeScript | Interface - Moment For Technology

One of TypeScript’s core tenets is type-checking of the structure a value has. It is sometimes called “duck type discrimination” or “structural typing”. In TypeScript, interfaces name these types and define contracts for your code or third-party code.

In TypeScript, we use Interfaces to define the types of objects. Before declaring an object, function, or class, we define Interfaces to ensure that the data structures are consistent. The TypeScript compiler relies on interfaces for type checking.

Tips:

Define interfaces with uppercase letters.
You only care about what the value looks like. Unlike other languages, interfaces are defined for implementation.
If a variable has fewer attributes than the interface, it is not allowed to define a variable with more attributes than the interface. The shape of the variable must be the same as the shape of the interface when assigning values.

Interface properties

Optional attribute

Optional property: Add? To the property name. symbol

Read-only property

Read-only property: Prefixes the property name with readonly, const as a variable, or readonly as a property.

Note that the read-only constraint exists the first time an object is assigned, not the first time a read-only property is assigned

Any attribute

interface Person {
    name: string; age? : number;// Use [propName: string] to define any attribute that takes a string value
    [propName: string]: any; 
}

let tom: Person = {
    name: 'Tom'.gender: 'male'
};
Copy the code

Once any attribute is defined, the type of both the determined attribute and the optional attribute must be a subset of its type:

The value of any attribute can be string, but the value of the optional attribute age is number. Number is not a child of string, so an error is reported.

Only one arbitrary attribute can be defined in an interface. If the interface has more than one type of attribute, you can use the union type in any attribute:

interface Person {
    name: string; age? : number; [propName: string]: string | number; }let tom: Person = {
    name: 'Tom'.age: 25.gender: 'male'
};
Copy the code

Function types

In addition to describing ordinary objects with attributes, interfaces can also describe function types.

In order for the interface to represent the function type, we need to define a call signature for the interface. It is like a function definition with only the argument list and return value types.

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;

mySearch = function(source: string, subString: string) :boolean {
  return source.search(subString) > -1;
}

// The parameter name of the function does not need to match the name defined in the interface.
// You can change the parameter name of a function, as long as the position of the parameter remains the same

// source => src, subString => sub
mySearch = function(src: string, sub: string) :boolean {
  return src.search(sub) > -1;
}

// No parameter type is specified
mySearch = function(src, sub) {
  let result = src.search(sub);
  return result > -1;
}
Copy the code

Indexable type

The index signature is of type number and the return value is a string:

interface ScenicInterface {
  [index: number]: string
}

let arr: ScenicInterface = ["West lake".'hua'.'the Palace Museum']
let favorite: string = arr[0]
Copy the code

The index signature is a string. We can use both types of indexes, but the numeric index return value must be a subtype of the string index return value type:

/ / right
interface Foo {
  [index: string]: number;
  x: number;
  y: number;
}

/ / error
interface Bar {
  [index: string]: number;
  x: number;
  y: string; // Error: the y attribute must be of type number
}
Copy the code

Class types

You want the implementation of a class to follow the interface definition, so you can use the implements keyword to ensure compatibility.

This type of interface is most common in traditional object-oriented languages, such as Java, where interfaces are of this class type. This interface is similar to an abstract class, but the interface can only contain abstract methods and member attributes, and the implementation class must implement all of the abstract methods and member attributes in the interface.

// You can describe a method in an interface and implement it in a class
interface AnimalInterface {
  name: string
  eat(m: number): string
}

class Dog implements AnimalInterface {
  name: string;

  constructor(name: string){
    this.name = name
  }

  eat(m: number) {
    return `The ${this.name}Eat the meat${m}Minutes `}}Copy the code

Interfaces describe the public parts of a class, not the public and private parts. It doesn’t help you check if the class has some private members.

Inherited interface

Like classes, interfaces can inherit from each other through the keyword extents. This allows us to copy members from one interface to another, giving us more flexibility to split the interface into reusable modules.

interface Shape {
  color: string;
}

interface PenStroke {
  penWidth: number;
}

// An interface can inherit multiple interfaces to create a composite interface of multiple interfaces.
interface Square extends Shape, PenStroke {
  sideLength: number;
}

let square = {} as Square;
// Inherits the Shape and PenStroke attributes
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
Copy the code

Mixed type

Interfaces can describe functions, methods of an object, or properties of an object. Sometimes you want an object to have multiple types mentioned above, such as an object that can be used as a function and has properties and methods.

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

// the getCounter() function returns a value of type Counter
function getCounter() :Counter {
  let counter = function (start: number) {}as Counter;
  counter.interval = 123;
  counter.reset = function () {};return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
Copy the code

let counter = function (start: number) { } as Counter; — Use type assertion to convert a function object to type Counter. The converted object not only implements the description of the function interface as a function, but also has the interval attribute and reset() method. The assertion succeeds only if one of the two data types can be assigned to the other. Function type data cannot be assigned to a variable of interface type because it does not have the interval attribute or reset() method.

Learning links

www.tslang.cn/docs/handbo…
www.imooc.com/wiki/typesc…
Ts.xcatliu.com/basics/type…

TypeScript | TypeScript | Interface