interface

One of the core principles of TypeScript is type checking the structure a value has. We use interfaces (Interfaces) to define the type of object. An interface is an abstraction (description) of an object's state (attributes) and behavior (methods)

A Preliminary Study on the Interface

Requirements: To create a human object, certain constraints need to be imposed on human attributes

id is a number type, must have, read-only
name is a string type, must have
age is a number type, must have
sex is a string type, can be absent Let's
use a simple example to observe how the interface works:


/*
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型
接口: 是对象的状态(属性)和行为(方法)的抽象(描述)
接口类型的对象
    多了或者少了属性是不允许的
    可选属性: ?
    只读属性: readonly
*/

/*
需求: 创建人的对象, 需要对人的属性进行一定的约束
  id是number类型, 必须有, 只读的
  name是string类型, 必须有
  age是number类型, 必须有
  sex是string类型, 可以没有
*/

// 定义人的接口
interface IPerson {
    
    
  id: number
  name: string
  age: number
  sex: string
}

const person1: IPerson = {
    
    
  id: 1,
  name: 'tom',
  age: 20,
  sex: '男'
}

The type checker will check whether the internal properties of the object are consistent with the IPerson interface description, and if not, it will prompt a type error.

optional attributes

Not all properties in an interface are required. Some are only present under certain conditions, or not at all.

interface IPerson {
    
    
  id: number
  name: string
  age: number
  sex?: string
}

An interface with optional attributes is similar to an ordinary interface definition, except that a ? symbol is added after the optional attribute name definition.

One of the benefits of optional attributes is that the attributes that may exist can be predefined, and the second advantage is that errors when referencing attributes that do not exist can be caught.

const person2: IPerson = {
    
    
  id: 1,
  name: 'tom',
  age: 20
  // sex: '男' // 可以没有
}

read-only attribute

Some object properties can only change their values when the object is first created. You can specify read-only properties by prefixing the property name with readonly:

interface IPerson {
    
    
  readonly id: number
  name: string
  age: number
  sex?: string
}

Once assigned, it cannot be changed again.

const person2: IPerson = {
    
    
  id: 2,
  name: 'tom',
  age: 20
  // sex: '男' // 可以没有
  // xxx: 12 // error 没有在接口中定义, 不能有
}
person2.id = 2 // error

readonly vs const

The easiest way to judge whether to use readonly or const is to see whether to use it as a variable or as an attribute. If used as a variable, use const, if used as an attribute, use readonly.

function type

Interfaces can describe the various shapes that objects in JavaScript can have. In addition to describing ordinary objects with properties, interfaces can also describe function types.

In order to use an interface to represent a function type, we need to define a calling signature for the interface. It is like a function definition with only parameter list and return type. Each parameter in the parameter list requires a name and a type.

/*
接口可以描述函数类型(参数的类型与返回的类型)
*/

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

After this definition, we can use this function type interface like any other interface. The following example shows how to create a variable of function type and assign a function of the same type to this variable.

const mySearch: SearchFunc = function(source: string, sub: string): boolean {
    
    
  return source.search(sub) > -1
}

console.log(mySearch('abcd', 'bc'))

class type

class implements interface

Similar to the basic role of interfaces in C# or Java, TypeScript can also use it to explicitly enforce a class to conform to a certain contract.

/*
类类型: 实现接口
1. 一个类可以实现多个接口
2. 一个接口可以继承多个接口
*/

interface Alarm {
    
    
  alert(): any
}

interface Light {
    
    
  lightOn(): void
  lightOff(): void
}

class Car implements Alarm {
    
    
  alert() {
    
    
    console.log('Car alert')
  }
}

A class can implement multiple interfaces

class Car2 implements Alarm, Light {
    
    
  alert() {
    
    
    console.log('Car alert')
  }
  lightOn() {
    
    
    console.log('Car light on')
  }
  lightOff() {
    
    
    console.log('Car light off')
  }
}

interface inherits interface

Like classes, interfaces can also inherit from each other. This allows us to copy members from one interface to another, allowing for more flexibility in splitting interfaces into reusable modules.

interface LightableAlarm extends Alarm, Light {
    
    }

Learning TypeScript (2)---Interface