TypeScript interface definition case tutorial

The role of the interface:

Interface, in English: interface, its function can be simply understood as: providing a convention for our code.

This is how it is described in Typescript:

• One of the core principles of TypeScript is to type-check the structure that values ​​have. It is sometimes called "duck typing" or "structural subtyping".
• In TypeScript, interfaces are used to name these types and define contracts for your code or third-party code.

For example:

//Define the interface Person
interface Person {
    name: string;
    age: number;
}

//Specify the type of the defined variable man as our Person "type" [This expression is not very accurate, just for ease of understanding]
let man: Person;

// At this point, when we assign a value to man, man must comply with the Person constraints we defined, that is, there must be an age field of type number and a name field of type string man = { age: 10, name: 'syw' }
# Or like this function fun(women:Person){} // Parameter women must also comply with the Person constraint

In the above example, I briefly talked about how to define an interface and its functions. Now I will briefly talk about other ways to play with interfaces:

Set the interface optional properties:

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

interface Person {
    name: string
    age?: number
}

The most common usage of optional attributes is when we are not sure whether this parameter will be passed or exists.

The benefits of optional parameters are described in Typescript like this:

• One benefit of optional attributes is that you can predefine attributes that may exist, and the second benefit is that you can catch errors when referencing non-existent attributes.

Additional property checks:

Speaking of this, a simple summary is: we can set attributes to be optional, but we cannot pass wrong attributes.

• Taking the above Person interface as an example, if we mistakenly write the age attribute as aag when using it, typescript will report an error, even though the age attribute itself does not need to be passed.

This is the additional property check.

Of course, we can also use type assertions to bypass these property checks, see the link: Type assertions in TypeScript [as syntax | ＜＞ syntax]

Set the interface read-only attribute:

Some object properties can only be modified when the object is first created. So we can use readonly before the attribute name to specify a read-only attribute.

interface Person {
    readonly name: string;
    readonly age: number;
}
// Assign initial values ​​let man: Person = {name: 'syw', age: 10};

// If you modify the value at this time, an error will occur.
man.age = 20; // error!
// Cannot assign to 'age' because it is a read-only property.

In fact, the effect of using read-only attributes is similar to const. Of course, the two are not the same thing at all. I just say this for easy understanding.

In Typescript, readonly and const are described as follows:

• The easiest way to determine whether to use readonly or const is to see whether you want to use it as a variable or as an attribute. If used as a variable, use const; if used as a property, use readonly.

Function type interface:

Simply put, the interface of a function type specifies the parameter types of the function and the return value type of the function.

interface PersonFun {
    (name: string, age: number): boolean
}
// Define a function that complies with the PersonFun constraint let manFun: PersonFun = (name: string, age: number) => {
    return age > 10;
}

Notice:

1. Function parameter types cannot be changed, and the return value must also comply with the constraints.
2. Function parameter names do not need to correspond to the names in the interface, as long as the types of the corresponding parameter positions are compatible.

// This also meets the requirements let manFun: PersonFun = (name12: string, age12: number) => {
    return age > 10;
}

Indexable Type Interface:

Simply put, the indexable type interface means that we can specify the type of index and the type of return value.

• For example, in an array, we can specify that the index is a number type value, and the index is a string type value. In this way, the form of the array is basically fixed.

interface PersonArr {
    [index: number]: string
}
// Define array let manArr: PersonArr = ['syw','syw1','syw2'];
// Query manArr[0]; // At this time, 0 is the index of type number, and the 0th element returns syw of type string

Typescript supports two types of index signatures, which are actually index types: number and string.

And, if we use a number type index, then the return value type defined must be a subtype of the return value defined for the string type index.

Typescript explains this sentence like this:

• When you use a number to index, JavaScript converts it into a string and then uses it to index the object. That is, indexing with 100 (a number) is equivalent to indexing with "100" (a string), so the two need to be consistent.

When I first saw this sentence, I understood the meaning of the text, but I didn’t know how to simply express it. After careful study, I realized that it might be because I’m too new to it. It’s actually very simple:

// For example, my PersonArr has two indexes, one is of index (number) type and the other is of item (string) type. When I define the return values ​​of these two indexes, I must strictly follow the above:
// If you use a number type index, the return value type must be a subtype of the return value of the string type index.

// So the interface I define below will report an error interface PersonArr {
    [index: number]: string;
    [item: string]: number;
}
// Because the index return value is of type string, it is obviously not a subtype of the item return value of type number. // How to write it correctly? The simplest way is to change the type of index return value to number.

This is the end of this article about the TypeScript interface definition case tutorial. For more related TypeScript interface definition content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!