Systematic Learning TypeScript (6) - Understanding Interfaces

foreword

Interface is a concept that we often use when encapsulating modules, methods, etc. Using interfaces can:

• By abstracting a class of specific transactions into a single object method, the user does not need to care about the internal implementation logic, and only needs to pass in the corresponding parameters as required to get the expected output, which greatly reduces the mental burden of the user. .
• One definition, multiple use, reduce the subsequent maintenance burden.

TypeScript also has the concept of an interface, which is used to verify that the data type conforms to the requirements.

The TypeScript interface is like a contract or rule with a name. The content of the contract specifies the data composition and type in a certain data structure. As long as the contract is called by through the name , it means here The data must be accepted and passed the inspection of the contract content, otherwise an error will be reported.

JavaScript code example

In JavaScript, our code might look like this:

function printInfo(info){
    console.log(info.name);
}
printInfo({name: "编程三昧"});
// 编程三昧
printInfo({age: 22});
// undefined
printInfo();
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Since JavaScript does not have a static type checking mechanism, it is impossible to accurately determine possible problems before the code actually runs. Before calling an interface, it is often necessary to study the source code related to this interface, which is not conducive to the collaborative development

We desperately need a mechanism to explicitly display the required parameter types and formats at method invocation.

TypeScript code example without interfaces

Before learning TypeScript interfaces, our TypeScript code might look like this:

let personalInfo_1: { name: string; age: number } = {
    name: "编程三昧",
    age: 22
};

let personalInfo_2: { name: string; age: number } = {
    name: "隐逸王",
    age: 22
};

Although the purpose of data type checking is achieved, it is obvious that the type checker { name: string; age: number } is repeated, causing code redundancy.

Why use TypeScript interfaces?

The above two pieces of code expose two problems:

• A mechanism without a type checker is not conducive to collaborative development;
• Conventional TypeScript type checker writing can easily lead to code redundancy.

The above problem can be solved by using the TypeScript interface. for example:

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

function printPersonalInfo(info: PersonalInfo): void {
    console.log(info);
}

let personalInfo_1: PersonalInfo = {
    name: "编程三昧",
    age: 22
};

let personalInfo_2 = {
    name: "隐逸王",
    age: 22,
    gender: "Male"
}

let personalInfo_3 = {
    age: 22
}
printPersonalInfo(personalInfo_1);
// 编程三昧
printPersonalInfo(personalInfo_2);
// 隐逸王
printPersonalInfo(personalInfo_3);
// Error,具体报错信息如下图

As you can see, by using the TypeScript interface, both type checking is implemented and the redundancy of repeatedly specifying type checkers is reduced.

As we said before, the TypeScript interface is a contract that constrains data types. Anyone can use it to constrain their own data types by name, which achieves the effect of reuse.

doubts

In the above code, I don't know if you have noticed something strange: the data type of personalInfo_2 does not conform to the data type specified in the printPersonalInfo method, but the code does not report an error.

I don't know how everyone understands this.

Summarize

This article mainly introduces the reasons for using TypeScript interfaces and the benefits of using interfaces. An interface is like a contract, the content specifies the data format, and any variable can be type-checked using the interface by the interface name.

And it also leads to a point of doubt, you can give your own opinions on this issue, welcome to exchange in the comment area!

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I'm Hermit King , the author of 〖 Programming Samadhi 〗, my official account is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!