1.TypeScript summary

1.TypeScript What is it?

TypeScript yes JavaScript Superset （JS yes , we have TS There are ）, by JS Added type system

2.TypeScript comparison JS The advantages of

JS The type system is flawed , Most of the errors are type errors （Uncaught TypeError）
Advantage 1 ： Typed thinking mode , Yes, the development is more rigorous , Discover errors ahead of time , Reduce change Bug Time
Advantage 2 ： The type system improves the readability of the code , And make it easier to maintain and refactor code
Advantage three ： Added interface 、 Enumeration, etc. when developing large-scale applications JS Missing function
Vue3 Source code usage TS rewrite
Angular The default support TS;React And TS Perfect fit , It is the first choice for many large projects

2. development tool

1.Node.js
2.VSCode
3. analysis TS The toolkit （TSC）
Node.js/ browser , Know only JS Code , incognizance TS Code , Need to put TS Code conversion to JS

npm i -g typescript

3. first TS file

1. Create the first one ts file

step

establish ts file —》 Write code —》 Execute code

1. establish hello.ts

console.log('hello ts')

2. compile ts Code
Open the terminal , Enter the command

tsc hello.ts

Generate a js file

3. function js Code
Open the terminal , Carry out orders

node hello.js

2. Simplify execution ts Steps for

Every time you change the code , You have to repeat two commands to execute TS Code , Too complicated
Simplified method ： Use ts-node package , Directly in Node.js In the implementation of TS Code

npm i -g ts-node

Usage mode ：ts-node hello.ts

4. Comments and output statements

Comments are explanations of the code , Used to help read and understand code
Single-line comments // Content
Multiline comment /* Content */

Output statement ： Print information in the terminal
Node.js Can execute code , In order to know the results of code execution , You need to use the output statement , Print out the results

5. Variables and data types

Variables are containers for storing data , And it can change

1. Use of variables

Variables are used in two steps ：
1. Declare variables

let age:number

let yes ts Key words of , Used to declare variables ,age Is the name of the defined variable ,：number Used to specify the type of variable
2. Assign a value to a variable

age = 18

simplify : When you declare a variable, you assign a value

let age: number = 18

Be careful ： Be sure to specify the type when declaring variables

2. Type notes

Type notes ： Add type constraints to variables in the form of
What kind of , You can only assign a variable what type of value

3. Variable naming rules and specifications

Variable names can only appear ： Numbers 、 Letter 、 Underline _、 Dollar symbol $, And can't start with a number

let $name
let f_s

Variable names should have meaning , seeing the name of a thing one thinks of its function , Hump nomenclature is recommended

Case study ： Exchange the values of two variables

let num1: number = 12
let num2: number = 20
let temp: number
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)

5. data type

TypeScript There are two types of data in ：1. The original type （ Basic data type ） 2. object type （ Complex data type ）
Common basic data types ： number/string/boolean/undefined/null

Numeric type (number)： Contains integer values and floating point numbers （ decimal ）

 let age: number = 18
 let weight: number = 11.1

String type (string)： Consisting of zero or more characters concatenated , Used to represent text information

let uname: string = 'zhangsan'

Boolean type （boolean): Used to express true or false

let isShow: boolean = true

undefined、null: Only one value , The value is the type itself

let isUndefined: undefined = undefined
let isNull: null = null

undefined: Represents the declared but unassigned variable value （ Value not found ）
null： Indicates that a variable has been declared and assigned , The value is null

These types of values , Also known as literal , That is, you can literally see what it is

6. Operator

Operators are also called operators , Used to implement assignment 、 Arithmetic operations 、 Symbols for comparison and other functions
1. Arithmetic operator ： Add （+）、 reduce （-）、 ride （*）、 except （/）
+ Sign can not only be used for addition calculation , String splicing can also be realized
stay ts In the syntax , Except for the plus sign , Other arithmetic operators should be used with numeric types
The other way ： Convert string type to number type

console.log(1 - '1') //  Report errors 
console.log(1 - +'1') // 0

+'1’ It can mean that ‘1’(string) => 1(number)
Add... Before the string + Number , Can be string Turn into number（ Only when the content of the string is a number ）

2. Assignment operator
Assign the value to the right of the symbol to the variable to the left of it （=）

 let age = 1
 age = age + 1
 console.log(age) // 2

An equal sign （=） outside , It also includes ： Additive grade (+=)、 Wait less (-=)、 Wait (*=)、 In addition to (/=)

age += 1

3. Self increasing 、 Self - subtracting operator
Self increasing （++） The operator is += 1 Simplified form of , Self reduction （–） yes -= 1 Simplified form of

let age = 1
age ++ 
console.log(age) // 2
age --
console.log(age) // 1

4. Comparison operator
Used to compare the values of two data , And return the result of the comparison , Is Boolean type
Greater than （>） Greater than or equal to (>=) Less than (<) Less than or equal to (<=) be equal to (=) It's not equal to (!)

let num1 = 3
let num2 = 4
console.log( num1 > num2) // false

5. Logical operators
And （ also ）、 or （ perhaps ）、 Not （ No ）
Logical operators are usually used for Boolean calculations , And the result is Boolean
Logic and （&&） At the same time on both sides true, Results Caiwei true, Otherwise false

true && false // false

Logic or （||） When only one of the values on both sides is true, The results for true, Otherwise false

true && false // true

Not （!）, Representation inversion , namely ture->false false-> true

!true // false

7. sentence

1. Conditional statements （ Branch statement ）

According to the result of judging conditions （ True or false ）, To execute different code , To achieve different functions
When the condition is executed , First, judge whether the conditions are met , If the conditions are met , Just do something , If not satisfied , Just do another thing , That is, different branches are executed in different situations

if sentence
stay TypeScript in if Statement is to realize conditional judgment

if( Judge the condition ) {
    
	  What to do when the conditions are met 
}

Judge the condition ： Boolean type （ture perhaps false）

let isShow: boolean = true
if(isShow) {
    
    console.log('show') 
}

else sentence
stay TypeScript in else Statement must match if Statement to use
else The statement means ： Condition not satisfied , What to do

if( Judge the condition ) {
    
}else {
    
	 Condition not satisfied , What to do 
}

 let isShow: boolean = false
 if(isShow) {
    
     console.log('show')
 } else {
    
     console.log('is not show')
 }

2. Ternary operator

Judge whether the conditions are true or false , Get different results

 result  =  Judge the condition  ？  value 1 :  value 2

If the result is true , The value is 1, If the judgment condition is false , The value is 2

 let num1: number = 10
 let num2: number = 20
 let isMoreThen: string = num1 > num2 ? ' Greater than ' : ' Less than '
 console.log(isMoreThen) //  Less than 

3. Loop statement

stay TypeScript in , To do something repeatedly , You need a loop
for loop
form ：
1. Initialization statement ： Declare a counter variable to record the number of cycles （ Do it once ）
2. Judge the condition ： Judge whether the number of cycles reaches the target number
3. Counter update ： Complete a cycle to increase the number of counters 1
4. The loop body ： The code of the loop , That's what you have to do repeatedly

for( Initialization statement ; Judge the condition ; Counter update ) {
    
	 The loop body 
}

for (let i:number = 0;i<=3;i++) {
    
     console.log(i)
}

Execution process : Initialize counter （ Only once ）, Judge the condition , Loop code , Counter update , Condition not satisfied , Out of the loop

break and continue
break and continue Often used in circular statements , Used to change the execution process of the loop
for The characteristic of your change of execution is ： Continuous and uninterrupted
break It can end the cycle ahead of time （ End cycle ）

for (let i:number = 0;i<=5;i++) {
    
   if(i === 2) {
    
        break
    }
    console.log(i) // 0, 1
}

continue Can make the loop execute intermittently （ Skip this cycle , So let's go to the next loop ）

for (let i:number = 0;i<=5;i++) {
    
     if(i === 2) {
    
        continue
     }
     console.log(i) // 0, 1, 3, 4, 5
 }

4. Breakpoint debugging

Vs-Code Breakpoint debugging configuration
1. Prepare for debugging ts file
2. Add debug configuration

Open the debug window ： Click the activity bar on the left Debug
Generate default configuration : Click on DEBUG The drop-down box at the back , Select Add configuration
Modify the configuration as follows

{
    
    //  Use  IntelliSense  Learn about properties . 
    //  Hover to see the description of an existing property .
    //  For more information , Please visit : https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
    
            "type": "node",
            "request": "launch",
            "name": " debugging ts Code ",
            // ts-node command ： Direct operation ts Code 
            //  effect   Load during debugging ts-node package （ Run directly during debugging ts Code ）
            "runtimerArgs": ["-r", "ts-node/register"],
            "args": ["${workspaceFolder}/a.ts"]
        }
    ]
}

3. Install the package used for debugging

npm  i ts-node typescript