“This is the 28th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
preface
Each month there will be a summary and sharing session 📚, and this month will be the same
Therefore, I organized my recent study notes on TS into 30 brain diagrams to share this time, which is also convenient for future reference
Features of this article ✨ :
- A brief summary in the form of a picture
TSRelated knowledge points - Attached with hd original drawing and source file, can be modified twice
Note: this article is based on the basics, please turn left at 👈🏻
The body of the
30 a map of the brain
Common basic types
TS is a superset of JS, so let’s start with some common JS data types. Of course, these types have corresponding types in TS, as follows:
Special type
In addition to some common types in JS, there are also some types specific to TS
Type assertion and type guard
How do we need to guarantee and detect that data from elsewhere also meets our requirements at run time, which requires assertions that require type guarding
interface
An interface itself is just a specification that defines some required properties or methods. An interface can be used to regulate function, class, or constructor, with a few different rules
Class and modifier
Like JS, the purpose of class is to put related things together for easy management
TS also defines a class primarily through the class keyword, which also provides three modifiers
Class inheritance and abstract classes
Inheritance in TS class inheritance in ES6 is very familiar, subclasses can inherit a class through the extends keyword
But it also has the concept of abstract classes, and abstract classes, as base classes, cannot be new
The generic
Think of generics as broad types that are commonly used for classes and functions
But the idea is to pass in a type as a special argument, whether it’s for a class or a function
Type inference
In TS there is type inference, that is, where there is no explicit type, type inference helps provide type
Function types
To make it easier for us to use, TS adds types and so on to functions
Numeric enumeration and string enumeration
The advantage of enumerations is that we can define constants with names, and we can clearly express intent or create a differentiated set of use cases
TS supports numeric and string-based enumerations
Type compatibility
TSType compatibility is based on structure subtypes
Union type and cross type
Add two TS types: union type and cross type
for.. Of and the for… in
TS also supports for.. Of and the for… But do you know the main difference between them
The module
TS modularity follows the JS module concept. A module executes in its own scope. Variables, functions, classes, and so on in a module are not visible outside the module unless you explicitly export them using one of the forms of export
Use of namespaces
Namespace X {} Namespace X {}
Solve the problem of too large a single namespace
Simplified namespace
The key to simplifying namespaces is to give commonly used objects short names
TS uses import to create an alias for the specified symbol, in the format of import q = X.Y.Z
Avoid the namespace and module traps in 2 TS
Module parsing process
Module resolution refers to the process followed by the compiler to find the contents of an imported module
The process is roughly as follows:
Relative and non-relative module imports
There are two main differences between relative and non-relative module imports
The Classic module parses the policy
TS module parsing strategy, one of which is called Classic
Node.js module parsing process
Why to say node.js module resolution process, in fact, is to talk about another TS module resolution strategy to pave the way -Node module resolution strategy.
Because Node module resolution is a strategy that attempts to emulate Node.js module resolution at runtime
The Node module parses the policy
The Node module resolution policy mimics the Node.js runtime resolution policy to locate the module definition file at compile time, but differs slightly from Node.js
Declare merge interface merge
Declaration merge is when the compiler merges declarations of the same name into a single declaration
Declaration merge includes interface merge. Interface merge needs to distinguish between function members and non-function members
Merge namespace
There are two types of namespace merge: one is between namespaces of the same name, and the other is between namespaces and other types of merge
JSX mode
TS comes in three JSX modes: Preserve, React, and React-Native
Three slash instruction
///
The format is three slashes followed by a label
Corresponding article notes
The figure above corresponds to the following articles and notes
- In TS, the corresponding data type is JS
- Compared with JS, TS has more types
- Can you figure out type assertion and type guard in TS?
- Are you unfamiliar with the interface in TS?
- Classes and modifiers in TS, do you know
- Class inheritance and abstract classes in TS in a minute
- Learn about generics in TS in one minute
- Do you know where and how types are inferred in TS?
- Take a look at some of the extra functionality TS adds to JS functions
- TS supports numeric and string-based enumerations
- Do you know what TS type compatibility is based on
- Do you know the difference between a union type and a cross type in TS
- Tell me about the for… Of and the for… There are two main differences between in
- TS module follows the concept of JS module
- How do you use namespaces in TS to organize your code
- TS separates a single file into different files
- Let’s look at ways to simplify namespace manipulation in TS
- Avoid the namespace and module traps in 2 TS
- TS module parsing process
- Do you know the difference between relative and non-relative module imports in TS?
- TS module parsing strategy Classic
- Learn about node.js module parsing in a minute
- The TS module parses the policy Node
- The most common declaration merge in TS is interface merge
- Namespace merge in TS
- Three JSX modes for TS
- Do you know the triple slash command in TS
The attachment
The attachments are respectively for people with different needs in 2, corresponding to two addresses:
- If you need to save the above brain map, but because there are many pictures, it is too troublesome to save each one, you can go to the following address to download the batch download
- If you need to make a second change according to your own habits, you can download the original file at the following address
Note: Not uploaded for network reasons
END
That’s all for this article. If you have any questions, please point out