TypeScript makes up for JavaScript’s lack of static type checking. It provides good type-checking support for JavaScript and can be compiled into standard JavaScript.
Angular already refactores in TypeScript, and a new version of Vue, another major front-end framework, will also refactor in TypeScript. TypeScript will be a must-have language for front-end developers for the foreseeable future.
Today we’ll talk about TypeScript objects’ type-interfaces.
01 What is an interface
In TypeScript, we use Interfaces to define the types of objects.
An interface is a set of abstract method declarations, a collection of method characteristics that can be invoked by a third party to make a concrete class execute a concrete method.
Interfaces in TypeScript can be used to describe shapes of objects in addition to abstracting some of the behavior of a class.
Here’s an example:
Here we define an interface Person, followed by a variable Faker of type Person. This constraints the faker shape to be the same as the Interface Person.
Note: Interfaces generally start with uppercase letters
It is not allowed to define a variable with fewer attributes than the interface:
Additional attributes are also disallowed:
Therefore, the shape of the variable must be the same as that of the interface.
02 Optional attribute
An optional attribute means that the attribute may not exist. When we wish not to match a shape exactly, we can use the optional attribute:
Undefined attributes are still not allowed:
03 Any attribute
Sometimes we want an interface to allow arbitrary attributes. This can be done as follows:
Use [propName: string] to define any attribute that takes a string value
Note that once any attribute is defined, the type of both the determined attribute and the optional attribute must be a subset of its type:
In this example, 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 the error is reported
Note: 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:
04 Read-only property
Sometimes we want fields in an object to be assigned only at creation time, so we can use readonly to define read-only properties:
In this example, the attribute ID defined by readonly was initialized and then assigned, so an error was reported
Note that the read-only constraint exists when an object is first assigned, not when a read-only attribute is first assigned:
In the preceding example, there are two error messages:
1. When faker is assigned, id is not assigned
2. An error was reported when assigning a value to faker.id because it is read-only
05 Combine types and interfaces
The following example demonstrates how to use union types in an interface:
The output is:
Hello
Hello
World
**Hello World**
06 Interfaces and Arrays
Interface we can set the index value and element of the array to different types. The index value can be a number or a string
07 Interface inheritance
Interface inheritance means that interfaces can extend themselves through other interfaces. Typescript allows interfaces to extend from multiple interfaces using the extends keyword
1. Single-interface inheritance
Single interface inheritance syntax format:
Example:
Output:
Age: 22
Favorite musical instrument: Piano
2. Multiple interface inheritance
Multiinterface inheritance syntax format:
Example:
Output:
value 1: 22 value 2: 23
If you like me, you can pay attention to the following public number, know more dry goods. At the same time, you can also join the technical exchange group, you can discuss with the technical master ~
