Hello, I'm A bowl week , a front end that doesn't want to be drunk. If you are lucky enough to get your favor, I am very lucky~
Write in front
One of the core principles of TS is to check the type of structure. The function of interfaces is to name these types and define contracts for your code or third-party code.
Finally, it is compiled into JavaScript code without interface and type constraints.
Definition of interface
The function of the interface is similar to that of the type keyword, but different. Type can define simple data types, such as the following code
type str = string
This writing method cannot be applied to the interface. The interface can only write function types, class types and array types.
The interface defined in TS uses the interface keyword.
The example code is as follows:
// Define a simple interface
interface Person {
name: string
}
// Define get method
function getPersonName(person: Person): void {
console.log(person.name)
}
// Define set method
function setPersonName(person: Person, name: string): void {
person.name = name
}
// Define a person object
let person = {
name: 'A cup of porridge',
}
setPersonName(person, 'A bowl week')
// Modified successfully
getPersonName(person) // A bowl week
The Person interface is like a name. It is used to describe the requirements for using the interface. For example, a name attribute is required in the interface and the type is string.
It is worth noting that type checking does not check the order of attributes. It only needs that your attributes exist and have the same type.
attribute
optional attribute
If a property in the interface is optional, or only exists under certain conditions, you can add a value next to the property name? number. The example code is as follows:
;(function () {
// Define a simple interface
interface Person {
name: string
// Description is optional
age?: number
}
// Define a person object
let person = {
name: 'A bowl week',
age: 18,
hobby: 'coding',
}
// Define get method
function getPersonName(person: Person): void {
// console.log(person.age, person.hobby) // Property 'hobby' does not exist on type 'Person'.
}
})()
At this time, we can write or not write the sex attribute, but because the hobb attribute is not defined in the interface, our call will throw an exception.
Read only attribute
If you want an attribute to be a read-only attribute, you just need to add readonly in front of the attribute. The example code is as follows:
;(function () {
interface Person {
// Set name to read-only
readonly name: string
}
// Define a person object
let person = {
name: 'A bowl week',
}
// Define set method
function setPersonName(person: Person, name: string): void {
person.name = name // Cannot assign to 'name' because it is a read-only property.
}
setPersonName(person, 'A cup of porridge')
})()
Class type
Inheritance interface
Like classes, interfaces can inherit from each other. This allows us to copy members from one interface to another, and we can more flexibly divide the interface into reusable modules.
Interface inheritance uses the extends keyword. The example code is as follows:
// Define two interfaces
interface PersonName {
name: string
}
interface PersonAge {
age: number
}
// Define a Person interface that inherits from the above two interfaces. Multiple interfaces are used, separated by commas
interface Person extends PersonName, PersonAge {
hobby: string
// Define a method with a return value of string
say(): string
}
let person = {
name: 'A bowl week',
age: 18,
hobby: 'coding',
// Example method
say() {
return 'A bowl week'
},
}
// Define get method
function getPersonName(person: Person): void {
console.log(person.name, person.age, person.hobby)
}
getPersonName(person) // A bowl of 18 coding a week
Inherit multiple interfaces, separated by commas.
Function type
In TS, interfaces of function types can also be described.
The definition of function type interface is like a function definition with only parameter list and return value type. Each parameter in the parameter list needs a name and type. The example code is as follows:
interface MyAdd {
(x: number, y: number): number
}
After the definition is completed, we can use the function interface like a normal interface. The example code is as follows:
let myAdd: MyAdd = (x: number, y: number): number => {
return x + y
}
The above code is equivalent to the code defined by the following function:
let myAdd: (x: number, y: number) => number = (
x: number,
y: number
): number => {
return x + y
}
Previous recommendation