Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how TypeScript defines interface". In daily operation, I believe many people have doubts about how to define interface in TypeScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to define interface in TypeScript". Next, please follow the editor to study!

The role of the interface:

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

It is described in Typescript as follows:

One of the core principles of TypeScript is type checking on the structure of values. It is sometimes called "duck typing" or "structural subtyping".

In TypeScript, the role of interfaces is to name these types and define contracts for your code or third-party code.

For example:

/ / define the interface Personinterface Person {name: string; age: number;} / / specify that the type of the defined variable man is 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 constraint 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 so function fun (women:Person) {} / / parameter womem must also comply with the Person constraint

In the above example, I briefly talked about how to define an interface and the function of an interface. I will briefly talk about other ways to play an interface:

Set the optional properties of the interface:

An interface with an optional attribute is similar to a normal interface definition, except that one is added after the optional attribute name definition. Symbols.

Interface Person {name: string age?: number}

Optional attribute, our most common use is that we are not sure whether this parameter will be passed or exists.

This is how the benefits of optional parameters are described in Typescript:

One of the benefits of optional attributes is that you can predefine attributes that may exist, and the second benefit is that you can catch errors when referencing attributes that do not exist.

Additional attribute check:

To sum up, we can set the property to be optional, but not to pass the wrong property.

Taking the Person interface above as an example, we will report an error if we miswrite the age attribute as aag,typescript, even if the age attribute itself does not have to be passed.

This is the extra property check.

Of course, we can also use type assertions to bypass these attribute checks and link to: type assertions in TypeScript [as syntax | < > syntax]

Set the interface read-only attribute:

Some object properties can only modify the value of an object when it is first created. So we can use readonly to specify the read-only property before the property name.

Interface Person {readonly name: string; readonly age: number;} / assign an initial value let man: Person = {name: "syw", age: 10}; / / if you modify the value at this time, an error will occur. Man.age = 20 investors / error! / / Cannot assign to "age" because it is a read-only property.

In a word, the effect of the read-only property is similar to that of const, of course, the two are not the same thing at all, I just say this to make it easier to understand.

This is how readonly and const are described in Typescript:

The easiest way to determine whether to use readonly or const depends on whether to use it as a variable or as an attribute. Use const as a variable and readonly as an attribute.

Function type interface:

To put it simply, the interface of the function type specifies the parameter type of the function and the return value type of the function.

Interface PersonFun {(name: string, age: number): boolean} / / defines the function, which conforms to the PersonFun constraint let manFun: PersonFun = (name: string, age: number) = > {return age > 10;}

Note:

The function parameter type cannot be changed, including the return value must also comply with the constraint.

The function parameter name does not have to correspond to the name in the interface, but only requires the type compatibility of the corresponding parameter location.

/ / this is also the let manFun: PersonFun = (name12: string, age12: number) = > {return age > 10;} indexable type API:

The indexable type interface simply 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 value of type number is indexed to a value of type string, so that 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 number type as index, and element 0 returns syw as string type.

Two types of index signatures are supported in Typescript, which are actually index types: number and string.

Also, if we use an index of number type, the defined return value type must be a subtype that defines the return value of the string type index.

This is how Typescript explains this sentence:

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

It's actually very simple:

/ / for example, my PersonArr has two indexes, one is index (number) type, the other is item (string) type, then when I define the return value of these two indexes, I must strictly abide by the above: / / using the index of number type, then the defined return value type must be a subtype that defines the return value of the string type index. / / so the interface I defined below will error interface PersonArr {[index: number]: string; [item: string]: number;} / / because the index return value is of string type, which is obviously not a subtype of the item return value number type / / how to write it correctly? The easiest way to do this is to change the type of index return value to number. At this point, the study on "how TypeScript defines the interface" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.