preface

An interface is a concept we often use when encapsulating modules, methods, etc. Using an interface can:

  • Abstract a class of concrete transactions into a single object method, users do not need to care about the internal implementation logic, just need to pass in the corresponding parameters according to the requirements can get the expected result output, greatly reduce the mental burden of users.
  • One definition, multiple use, reduce the subsequent maintenance burden.

TypeScript also has the concept of interfaces, which are used to validate data types.

A TypeScript interface is like a contract or rule with a name that specifies the composition and type of data in a data structure. Whenever a contract is invoked by name, it means that the data must be checked by the contract’s content or an error will be reported.

JavaScript code examples

With JavaScript, our code might look like this:

function printInfo(info){
    console.log(info.name);
}
printInfo({name: Programming Samadhi});
// Programming samadhi
printInfo({age: 22});
// undefined
printInfo();
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')
Copy the code

Because JavaScript doesn’t have static type checking, you can’t tell exactly what problems might occur until the code actually runs. Often, before invoking an interface, you need to explore the source code associated with the interface, which is not conducive to collaborative development.

There is an urgent need for a mechanism that explicitly shows the type and format of the required parameters when a method is called.

Examples of TypeScript code that does not use interfaces

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

let personalInfo_1: { name: string; age: number } = {
    name: Programming Samadhi.age: 22
};

let personalInfo_2: { name: string; age: number } = {
    name: The Hermit King.age: 22
};
Copy the code

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

Why use TypeScript interfaces?

The above two pieces of code reveal two problems:

  • A mechanism without a type checker is not conducive to collaborative development;
  • Regular TypeScript type checker writing tends to create code redundancy.

Using the TypeScript interface solves this problem. Such as:

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

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

let personalInfo_1: PersonalInfo = {
    name: Programming Samadhi.age: 22
};

let personalInfo_2 = {
    name: The Hermit King.age: 22.gender: "Male"
}

let personalInfo_3 = {
    age: 22
}
printPersonalInfo(personalInfo_1);
// Programming samadhi
printPersonalInfo(personalInfo_2);
/ / the king of reclusion
printPersonalInfo(personalInfo_3);
// The Error message is shown in the following figure
Copy the code

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

As we mentioned earlier, a TypeScript interface is a contract that constraints data types. Anyone can use it by name to constrain their own data types, enabling reuse.

Existential doubt

In the above code, I don’t know if you noticed something odd: The personalInfo_2 data type does not match the data type specified in the printPersonalInfo method, but the code does not report an error.

I don’t know how everyone understands this.

conclusion

This article focuses on why we use TypeScript interfaces and the benefits of using them. An interface is like a contract that specifies the format of the data, and any variable can be typed using the interface name.

And also led to a point of doubt, you can give your own opinion on this problem, welcome to exchange in the comments section!

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!