Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of the important concepts in TypeScript, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading the important concepts in this TypeScript. Let's take a look at it.

Several important concepts in Typescript the difference between 1.any and T (generics) / * * any and T, one is arbitrary type, the other is pan-type shit, it is too difficult for people to understand his difference, the literal meaning is almost the same, but I read it continuously: pan.. Pan. Be arbitrary; be arbitrary. Any type, read ten times, still feel the difference * / any: any type represents all type generics: generics is one of all types, not all types, so the type returned in the function should touch the defined type and cannot modify its original type / / in this scenario There is a difference between / / correct function getInfo (age: any): any {return "Ghost Brother this year:" + age} getInfo ("18") / / error function getInfo (age: t): t {return "Ghost Brother this year:" + age} getInfo ("18") / / report the wrong 2.type interface enum directly here

Type: used to constrain data types (data structures, data attributes, and can be union types, tuple types)

Interface: used to constrain data types (data structures, data attributes and cannot be union types, tuple types)

Enum: values used to constrain data types, not data types

Use scenarios such as:

/ / Human interface People {} / / Animal interface Animal {} / / the difference between interface and interface User {People | correct (human can be either animal or human) type User=People | Animal;// error (human can be either animal or human), but interface User {People | Animal} cannot be used to define it. In fact, we can see the difference between the two from the grammar. `type` uses the symbol `=`. Since it is equal to, there must be a variety of situations. `interface` uses the symbol `{} `, which is a form of `definition`. Since it is `definition `, it must be of a nature. There is only one possibility / * / / the difference between type and interface 2 since `interface` is a data structure, it can definitely be implemented, so the functions that `interface` can achieve / / such as using interface to define interfaces Then implement the function of the interface: interface UserModelApi {getUserList: () = > Promise, getOrderList: () = > Promise,} class HtppApi implements UserModelApi {getUserList () {return new Promise ((resolve) = > {}) } getOrderList () {return new Promise (() = > {});}} / / the difference between enum and const / * * the similarities between them are both defined data, and the defined data is immutable. The difference is that 1) in fact, like the above description of `type` and `interface`, they are both definitions and assignments. 2) does the following code feel that the use of enumerations looks more readable 3) `enumerations can be used to define types * / correct (grammatical comprehension can tell at a glance Enum Sex {M = "male", F = "female"} / / `female 'Sex enumeration can be used to define the type const getInfo=function (sex:Sex) {return `my gender is: ${sex}` } / * * / / error (and this syntax appears to be, what are the values of this object) const Sex = {M: "male", F: "female"} / / `femin` Sex cannot be used to define the type const getInfo=function (sex:Sex) {return `my gender is: ${sex}`;} 3. Mapping type

Convert a type in an object or array to another type

/ / suppose a scenario in which a system account logs in: / / define an interface type of user information interface User {age: number name: string password:string} / / login successfully sets user data const UserInfo:User= {age:1, name: "Ghost Brother", password: "123456"} / / output password is: 123456console.log (UserInfo.password) / / when the user data is successfully set The User interface definition can no longer be modified. Then we can use `mapping type` / / to make all attributes read-only * keyof: get all attributes of the current object {"age" | "name" | "password"} * T: generic * P: current attribute type SetReadonly = {readonly [P in keyof T]: T[ P] } / / New read-only user data object type ReadonlyUser = SetReadonly Const UserInfo:ReadonlyUser= {age:1, name: "Ghost Brother", password: "123456"} / / directly report an error, because none of the attributes in UserInfo strength can be modified console.log (UserInfo.password) / / of course, such an example is not convincing enough to convince us to use it, but his scenario is: after defining the type, you can reset the attribute value of the defined type 4. Cross type / * * actually means that the common meaning (the concept of union in mathematics) is not much different from that of extends in function. But if extends is a class, you need to call the parent function constructor roughly as follows: * / interface UserApi {getOrderList (): void} / / extends way interface AppApi extends UserApi {getUserList (): void} const appApi:AppApi= {getOrderList () {}, getUserList () {} / / Cross-type mode const appApi:AppApi&UserApi= {getOrderList () {}, getUserList () {}} 5. Union type / * * actually means the same part (the concept of intersection in mathematics) * / interface UserApi {getUserList (): void} interface AppApi {getUserList (): void} / / Union type mode const appApi:AppApi | AppApi= {getUserList () {}} 6. Tuple / * * this literally easy to understand element: element (meaning object in code) array: array so it means: a collection of arrays containing multiple types of objects, this is such a thing * / type regionType= {province:string, city:string} const region:regionType= {province: "Shanghai Province", city: "Shanghai"} const tableList = ["Ghost Brother", 15jue region] This is the end of the article on "what are the important concepts in TypeScript?" Thank you for reading! I believe you all have a certain understanding of "what are the important concepts in TypeScript". If you want to learn more, you are welcome to follow the industry information channel.

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.