preface
TS now used more and more, to learn the computer must constantly learning, to better the pursuit of this era, this is the summary of the TS waves before learning, can quickly help everybody introduction to TS, here are not very full list some commonly used, but can satisfy the usual requirements, specific, we can see the official document, here is just a simple introduction, I hope I can help you
Past highlights:
Quick start Vuex to easy writing Vuex
From understanding to in-depth virtual DOM and implementation of diff algorithm
Write a simple VUE response to take you to understand the principle of response
From using it to implementing your own simple Vue Router look at this
The essential basics of the front-end interview, although little but you can’t help but know
1. Install
The advantages and disadvantages of TS are not to be repeated, and let’s get straight to the point
Global Installation
npm install -g typescript
Copy the code2. Raw data type
Nuggets code highlight I feel and theme conflict, here code code is relatively simple, I will direct screenshots ha
After the variable we add: type to specify the type of the data. Setting any other type will result in an error
Let’s look at the type of base here
1. The stringstring
Double quotes (“) or single quotes (‘) represent strings
2. Digitalnumber
Supports base 10, 16, 2, and 8
Boolean. 3boolean
Can be a true/false
4.undefined
Not very useful
5.null
Not very useful
6. Emptyvoid
Void (undefined); void (undefined); void (undefined)
7. Any typeany
Here you can use any if the type is uncertain, but not if you have to
Unknow types like any can hold any type safer than any
Usually used not much, I will not introduce
7. Literal
You can only assign what you define, right
3. Complex types
An array of 1.array
If you set the type of the array like in this example true this will give you an error, not number, the elements of the array must be of the specified type and the same goes for other types
2. A tupletuple
For those of you who have studied Python, you can actually view it as an array, and you can declare multiple types of arrays, so you can insert multiple data types, so it’s an array of fixed length
3. The interfaceinterface
It is very convenient for us to define Ojbect types, it is very flexible to describe various types of objects
There are some differences between Java interface and Java interface. Here is a brief look
Add? To interface property. Can be omitted
So let’s add height, okay?
Readonly is immutable and cannot be changed once it is defined, like const for variables and readonly for attributes
Let’s add the ID to readonly
4. The functionfuntion
We need to specify the input and return types of the function
A colon after a parameter declares the type of the parameter, and a colon after a () declares the return value type
An error is reported if you pass extra arguments
We can also add an optional parameter to the function in this case? So we can call two arguments or three arguments without error
An optional parameter cannot be followed by a parameter of the specified type
We can add a, right? This parameter is optional
In addition to the declarative notation above, there is an expression notation
With that in mind, let’s look at the variables that define function types
This function right here is the same function up here
We define mysum to specify its type to accept the function we defined above
Inside is the type of the input parameter
=> indicates the type of the returned value
The following are all declaration types, and have nothing to do with the code logic
We just said that interfaces can describe various types, so let’s use interfaces to describe function types
Note that => was used earlier to indicate the return value type
Here is the return value type after ()
5. Union typeunion types
We can use any if there are several types of a variable, but the range of any is a little too large to use unless we have to,
If we know which is one of the several types of words, we can use the joint type Use | space
For example, “Haha” can be “number” or “string”
Note: Only common methods and attributes can be accessed before assignment, as in the following example where number has no length attribute
Object of 6.object
Let a: object; Doesn’t t make sense because there are too many objects in JS.
We can use it this way
Attributes must be of type {name: string; age: number; }
4. The assertiontype inference
When the joint variables of type on the incoming, we declare the type of number | string it cannot cannot call length method
The machine can’t tell this type, but we know this type better than the machine, so we can specify string and we can use type assertions here
1. We use itasTo make a claim
2. There is another way to write itThe < types >They both do the same thing
5. Type guardtype guard
When dealing with federated types, use type guards to narrow the scope
Implement the same method as above
In addition to typeof, there are instanceof and in type guards
Class 6.class
In ES6 there is the concept of classes, in TS to add some functionality to classes, here are just a few commonly used
Let’s write a basic class
Let’s start with the next three access modifiers
Public: Decorated properties or methods that are common and accessible anywhere
Private: Modified properties or methods are Private and accessible only in the class
Protected: Modified properties or methods are Protected and accessible in the class and subclasses
For example, if you specify that money in the Parent class is private and can only be accessed in the Parent class, the child class will fail
We can make access protected so that subclasses can access it
Static attribute static
The name Money properties above are both accessed through instances
Properties decorated static are accessed through classes and are common to each instance
In the same way that static can modify methods, methods that are modified with static are called class methods and can be called directly with the class
Read-only readonly
Adding readOnly to the property ensures that it is read-only and cannot be modified. If there is a static modifier, write it after it
An abstract class abstract
When we write a class, we don’t want to create instances of it directly ** (can’t be new) ** so we make it abstract and can’t be instantiated
Can only be inherited
Add the abstract modifier before class,
Abstract methods can be written in abstract classes, which have no method body
For example: an abstract class of an animal, there is a method called, not every animal sounds the same, we can set it to abstract method, concrete function subclass implementation (the name of the class is written by the subclass).
Property encapsulation is the same as In Java, but not here…
7. The interfaceinterface
Why is there an interface
To solve the inheritance dilemma (a class can only inherit from another class and cannot implement multiple inheritance)
In another case, people can wash clothes, and the washing machine can also wash clothes. The washing machine and people cannot find a common parent. We can separate the function of washing clothes and write it into an interface, and it is ok for people and the washing machine to realize this interface
We can implement the interface with implements
Interfaces can be implemented multiple times
Interfaces can be inherited before
The following example interface inherits from another interface, so humans only need to implement one interface
8. The enumerationenum
Constants are often used in projects. Although const can be declared as constants, some values are in a range, so we need to use enum to handle constants
1. Enumeration of numbers
You can modify the initial values in the enumeration
2. Enumeration of strings
3. Constant enumeration
Adding a const in front of the enum improves performance
Why so say, I will compile the above string enumeration into JS example, and constant enumeration compilation posted to compare
Constants enumerates Week.Tuesday without a section
9. The generic
A generic type is like a placeholder for a variable, and when used we can pass in the defined type as a parameter and output it as if it were a parameter
So in this example we want to return a value, and in this case I’m going to say number
In practice, it doesn’t have to be number, so we can do it by generics, so what type is passed in, what type is returned
A brief introduction to generics
Here T is equivalent to a placeholder in the method (variable, interface…. Etc.) followed by
It doesn’t look so simple, but it is
And then when I use getValue, all I have to do is specify the type of the argument, and the compiler is not stupid enough to know our parameter types and assign them to T
Multiple parameters
At the time of use, it is smart to judge the incoming type, and modify T,U, really convenient
We can use interfaces to constrain generics
The extends Ilen extends after T, which defines the code in Ilen to say that T must have a length property
This will not result in an error when params.length is called from within the method
Use generics in classes
Use generics in interfaces
Use generics in arrays
There are many more ways to use generics, so here’s a quick primer
10. Type alias
Use type to alias a type
11. Cross types
Connect with ampersand
To combine the types, variable assignments must satisfy the cross type
Conclusion:
This article is small wave in March to learn TS summary, write not comprehensive write are some often used, comprehensive words have to write a lot of… Official document yyds, but everybody can be started quickly, through this article, but these small wave with TS for a period of time, feeling is very complicated, some generic write normative is very strong, many third-party libraries hidden type was confused, just write completely don’t understand, every time to write a think things will be to define types, blew it couldn’t take the computer… I’m kidding. I still have to be patient
Resources: OFFICIAL TS documentation