Interface interface

This interface is not the other interface. In ts, it is only a kind of object, which is used to define the type of object

What is an interface

In object-oriented language, Interfaces is a very important concept. It is the abstraction of behavior, and how to act needs to be implement ed by classes.
ts interface interfaces are often used to describe the shape and characteristics of objects.

Small trial ox knife

interface Person{
  id:number,
  name:string,
  isMale:boolean
}

let peter:Person = {
  id:123456,
  name:'peter',
  isMale:true
}

It can be seen from the example that the so-called interface is defined in the form of object + type, and then used when defining variables and adding their constraints.
Generally, when declaring an interface, the initial letter is capitalized

Interface definition

When declaring variables with interface, if there are no other special cases, such as arbitrary attributes, optional attributes, read-only attributes, the number cannot be more or less, and the order does not matter. It does not matter if there are more unknown attributes or less known attributes, otherwise an error will be reported.

interface Person{
  id:number,
  name:string,
  isMale:boolean
}

let peter:Person = {
  id:123456,
  name:'peter',
} // Error reported, missing attribute isMale

let tom:Person = {
  name:'tom',
  id:1111111,
  isMale:false,
  age:20
} // An error is reported. age is not in the Person attribute

optional attribute

Optional attribute, which means that if it is not a required attribute, add "optional" after the attribute? Just. Adding undefined attributes is still not allowed

interface Animal{
  type:string,
  color?:string
}

let tiger:Animal = {
  type:'cat',
  color:'yellow'
}
let lion:Animal = {
  type:'dog'
}
let shark:Animal = {
  type:'fish',
  isBig:true
}// An error is reported. isBig is not in the Animal type

Read only attribute

Read only attribute, which means that it cannot be assigned after the first creation.
Read only constraints exist when objects are first assigned values, not when read-only properties are first assigned values

interface Flower{
  readonly name:string,
  color:string
}

let red_flower:Flower = {
  name:'red_flower',
  color:'red'
}
red_flower.name = 'green_flower' // An error is reported and cannot be assigned to "name" because it is a constant or read-only attribute.

Any type

In js, objects have the property of unlimited declaration and assignment. ts can also set any type of interface to declare and assign values indefinitely. Any attribute defined with [propName: string] or [propName: number] takes a value of type string or number.

interface Person_1{
  id:number
  name:string,
  [propName:string]:string,
} //The attribute "id" of the error reporting type "number" cannot be assigned to the string index type "string"
let Lily:Person_1 = {
  id:12345,
  name:'Lily',
  age:18,
} // An error is reported. Type "number" cannot be assigned to type "string".

Once any attribute is defined, the type of the determined attribute and optional attribute must be a subset of its type. Take the above example. Once any type is declared as string, the attribute number and boolean cannot be defined. Similarly, when applying, the unknown attribute must also be of string type.
The solution is to set the type of any type to any or unknown, or use a union type. This method is not recommended unless absolutely necessary

interface Person_1{
  id:number
  name:string,
  isMale:boolean,
  [propName:string]:unknown,
}
let Lily:Person_1 = {
  id:12345,
  name:'Lily',
  isMale:false,
  age:18,
  like:'dance'
}

TypeScript supports two types of index signatures: string and number. Two types of indexes can be used at the same time, abbreviated as indexable type.

You can describe types that can be "indexed", such as a[10] or ageMap["daniel"]. An indexable type has an index signature, which describes the type of object index and the corresponding index return value type.
It indicates whether the attribute is a string or a number. Generally, there are most strings in objects and most array numbers. In the array, the corresponding value can be obtained through the digital index type.
However, the return value of a numeric index must be a subtype of the return value type of a string index. This is because when you use number to index, JavaScript converts it into a string and then indexes the object. In other words, indexing with 100 (a number) is equivalent to indexing with "100" (a string), so the two need to be consistent.

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

Function interface

Define a call signature for the interface. It is like a function definition with only parameter list and return value type. Each parameter in the parameter list needs a name and type.

interface encrypt {
  (key: string, value: string): string;
}

// Constrain the passed in parameters and return values
let md1: encrypt = function (key: string, value: string): string {
  return key + value;
}
console.log(md1('Zhang San', 'Class 1, junior high school'));

Inheritance interface

The so-called inheritance means that an interface can own the properties and types of another interface, and add its own properties and types on the basis of ownership.
Inheritance cannot override the properties and types of the parent interface
An inherited interface can inherit multiple parent interfaces

interface Person{
  id:number,
  name:string,
  isMale:boolean
}
interface Male extends Person {
  isMale:boolean,
  hobby:string,
  eat:(val:string)=>string
}
let Got:Male = {
  isMale:true,
  id:1111,
  name:'Got',
  hobby:'basketball',
  eat:(apple)=>{
    return apple
  }
}