Vue3+Ts Episode 1

Posted by dnice on Thu, 17 Feb 2022 16:51:07 +0100

The first installment introduces the configuration of development tools


TypeScript introduction 1 TypeScript is an open source programming language developed by Microsoft. 2. TypeScript is a superset of JavaScript and follows the latest ES6 and Es5 specifications. TypeScript extends the syntax of JavaScript. 3. TypeScript is more like object-oriented languages such as back-end java and C# and allows js to develop large enterprise projects. 4. Google is also strongly supporting the promotion of TypeScript, Google's angular2 X + is based on TypeScript syntax. 5. The latest Vue and React can also integrate TypeScript. 6. TypeScript syntax is used in the Nodejs framework Nestjs and midway.

Typescript compilation installation

Before using the npm command, the computer must install nodejs

npm install -g typescript 
cnpm install -g typescript ((recommended)
yarn global add typescript 

Check installation
Reopen command line

 tsc -v

Running is also programmed into es5 syntax. Compile a js file in the same level directory. The browser can compile js but not ts

 tsc helloworld.ts

Auto compile ts

Because every time you write code, you have to run TSC HelloWorld TS is too troublesome to compile into js files, so it is necessary to configure automatic generation of js files

1. tsc --init generates configuration file and creates tsconfig JSON file

Old version vscode Click: Task - > Run task - > TSC: Monitor - tsconfig JSON can then automatically generate the code
Click the latest version of vscode: Terminal - > Run task - > typescript - > TSC: Monitor - tsconfig JSON can then automatically generate the code

Data type of the second set

In typescript, in order to make the code more standardized and easier to maintain, type verification is added. In typescript, we mainly provide the following data types

  	Boolean type( boolean)
      Number type( number)
      String type(string)
      Array type( array)
      Tuple type( tuple)
      Enumeration type( enum)
      Any type( any)
      null and undefined
      void type
      never type

In typescript, in order to make the code more standardized and more conducive to maintenance, type verification is added

Type must be specified when writing ts code

boolean type

 es5 Correct writing (correct writing)  ts Medium (wrong writing)
     var flag=true;
     var flag:boolean=true;
		// flag=123;  // error
		 flag=false;  //correct

Number type (number)

        var num:number=123;
        console.log(num);  /correct/
        num='str';    //error

String type (string)

        var str:string='this is ts';
        str='haha';  //correct
        str=true;  //error

There are two ways to define an array in the array type ts

     var arr=['1','2'];  //es5 definition array
    // 1. The first way to define an array
        var arr:number[]=[11,22,33];
         var arr:string[]=["java","js","go"];
    //The second way to define an array
        var arr:Array<number>=[11,22,33];

tuple is a kind of array

    var arr:Array<number>=[11,22,33];
    //Yuanzu type
    let arr:[number,string]=[123,'this is ts'];

Enum type (enum)
With the increasing popularity of computers, programs are not only used for numerical calculation, but also widely used to deal with non numerical data.
For example, gender, month, day of week, color, company name, education, occupation, etc. are not numerical data.
In other programming languages, a numerical value is generally used to represent a certain state, which is not intuitive and easy to read.
If you can use words with corresponding meanings in natural language to represent a certain state in the program, the program is easy to read and understand.
In other words, considering the possible value of a variable in advance, try to express each value with clear words in natural language,
This method is called enumeration method, and the type defined by this method is called enumeration type.
Enum enum name{
Identifier [= integer constant],
Identifier [= integer constant],
Identifier [= integer constant],
} ;

               enum Flag {success=1,error=2};
               let s:Flag=Flag.success;
               enum Flag {success=1,error=2};
               let f:Flag=Flag.error;
               enum Color {blue,red,'orange'};
               console.log(c);   //If the identifier is not assigned a value, its value is a subscript
               enum Color {blue,red=3,'orange'};
               console.log(c);   //3
               console.log(c);   //4
               enum Err {'undefined'=-1,'null'=-2,'success'=1};
               var e:Err=Err.success;
     Get to sleep

Topics: TypeScript ts