Ts interfaces are used to define the type of an object, which is defined by the interface keyword

A simple example:

// A variable of type Person must be an object with a name attribute of string and an age attribute of number
interface Person {
  name: string;
  age: number;
}

const xiaoming: Person = {
  name: 'xiaoming'.age: 18
}
Copy the code

Attribute is optional

There are times when we are not sure whether a property of an object exists, and we need to make that property optional

// The money property is optional, so a variable of type person can have or not have the money property

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

const xiaoming: Person = {
  name: 'xiaoming'.age: 18
}

const xiaohong: Person = {
  name: 'xiaohong'.age: 17.money: 10000
}

console.log(xiaoming)
console.log(xiaohong)
Copy the code

Read-only property

If a property’s type is defined as read-only, then a variable that changes the interface cannot modify the property

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

const xiaohong: Person = {
  name: 'xiaohong'.age: 17
}
console.log(xiaohong.age) //pass
xiaohong.age = 18  / / an error
Copy the code

Mixed type

When a function can be called directly and 🈶 has some properties, you need to define the function type using interface

interface Func {
  (name: string) :string;
  age: number;
}

let func: Func
const myFunc = function (name) {
  return ' '
}
myFunc.age = 18
func = myFunc
console.log(func)

Copy the code

Type index

Type indexes can be used when defining arrays or objects with uncertain properties

A simple example:

interface StringObject {
  [key:string] :string
}

const strobj:StringObject = {
  a:'hello'.b:'message'
}


// If the index is number, then this type can also be used as an array
interface ArrayInter {
  [key:number] :string
}

const arr = ['hello'.'message']

Copy the code

Once the type index is defined, the named attribute type must be defined in accordance with the index type

interface AnyObject {
  [key: string] :string;
  age: string; //pass
  // age: number; // Error: age does not match index type; age must be defined as string
}
Copy the code

Class types

In addition to constraining ordinary variables, interfaces can also constrain classes to implement them by convention

A simple example:

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

// Implement Xiaomin as a Person using the implements keyword
class Xiaomin implements Person {
  name = 'xiaomin'
  age = 18
}
Copy the code

You can also constrain methods within a type

interface Person {
  getMoney(num:number) :number
}

class Xiaomin implements Person {
  getMoney(num) {
    return num * 10}}Copy the code

In addition to being able to constrain member attributes of a real class, a custom interface can also constrain class constructors

The direct constraint constructor will report an error

 interface Person {
    new(name: string.age: number);
 }
 class Xiaomin implements Person {} / / an error
Copy the code

Constraints can be achieved by constraining the return value of the constructor

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

interface Person {
  new(name: string.age: number): PersonInstance;
}

class Xiaohong implements PersonInstance {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

const xiaohong: Person = Xiaohong

Copy the code

Interface inheritance

Interfaces, like classes, can be inherited

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

interface Teacher extends Person {
  job: string;
}
Copy the code

Multiple interfaces can be inherited

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

interface Worker {
  workTime: number;
}

interface Teacher extends Person, Worker {
  job: string;
}
Copy the code

An interface can also inherit a class, for example:

class Action {
  run = true;
}
interface Man extends Action {
  sit: boolean;
}

const man: Man = {
  run: false.sit: true
}
Copy the code