Typescript introductory notes (personal)

TypeScript Basic types in

TypeScript Basic types in ：

• Type declaration

  • The type declaration is TS A very important feature ;

  • Type declarations allow you to specify TS Medium variable （ Parameters 、 Shape parameter ） The type of ;

  • After specifying the type , When assigning a value to a variable ,TS The compiler will automatically check whether the value conforms to the type declaration , If yes, the value is assigned , Otherwise, the report will be wrong ;

  • In short , The type declaration sets the type... For the variable , So that variables can only store certain types of values ;

  • grammar ：

    • let  Variable :  type ;
      
      let  Variable :  type  =  value ;
      
      function fn( Parameters :  type ,  Parameters :  type ):  type {
                
          ...
      }
      

• Automatic type determination

  • TS Have automatic type judgment mechanism
  • When the declaration and assignment of variables are carried out at the same time ,TS The compiler automatically determines the type of the variable
  • So if you declare and assign variables at the same time , You can omit the type declaration

• type ：

  type	Example	describe
  number	1, -33, 2.5	Arbitrary number
  string	‘hi’, “hi”, hi	Any string
  boolean	true、false	Boolean value true or false
  Literal	Its own	The value of the limiting variable is the literal value
  any	*	Any type
  unknown	*	Type safe any
  void	Null value （undefined）	No value （ or undefined）
  never	No value	Cannot be any value
  object（ Not commonly used ）	{name:‘ The Monkey King ’}	Any of the JS object
  array	[1,2,3]	arbitrarily JS Array
  tuple	[4,5]	Elements ,TS New type , Fixed length array
  enum	enum{A, B}	enumeration ,TS New type in

• number

  • let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    let big: bigint = 100n;
    

• boolean

  • let isDone: boolean = false;
    

• string

  • let color: string = "blue";
    color = 'red';
    
    let fullName: string = `Bob Bobbington`;
    let age: number = 37;
    let sentence: string = `Hello, my name is ${
              fullName}. I'll be ${
              age + 1} years old next month.`;
    

• Literal

  • You can also use literals to specify the type of variable , The value range of the variable can be determined by literal quantity

  • let color: 'red' | 'blue' | 'black';
    let num: 1 | 2 | 3 | 4 | 5;
    

• any

  • let d: any = 4;
    d = 'hello';
    d = true;
    

• unknown

  • let notSure: unknown = 4;
    notSure = 'hello';
    

• void

  • let unusable: void = undefined;
    

• never

  • function error(message: string): never {
            
      throw new Error(message);
    }
    

• object（ No dice ）

  • let obj: object = {
            };
    

• array

  • let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];
    

• tuple

  • let x: [string, number];
    x = ["hello", 10]; 
    

• enum

  • enum Color {
            
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
            
      Red = 1,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
    
    enum Color {
            
      Red = 1,
      Green = 2,
      Blue = 4,
    }
    let c: Color = Color.Green;
    

• Types of assertions

  • In some cases , The type of variable is very clear to us , however TS The compiler doesn't know , here , You can tell the compiler the type of a variable through type assertions , There are two forms of assertion ：

    • The first one is

      • let someValue: unknown = "this is a string";
        let strLength: number = (someValue as string).length;
        

    • The second kind

      • let someValue: unknown = "this is a string";
        let strLength: number = (<string>someValue).length;
        

Compilation options

First create a tsconfig.json file

{
    
  /* "include"  Used to specify which ts The file needs to be compiled   Default ： All files in the current path , **\*  route ：**  Represents any directory  *  Represents any file  */
  "include": [
    "./src/**/*"
  ],
  /* "exclude"  No need to compile the file directory   The default value is ： ["node_modules", "bower_components", "jspm_packages", "./dist"] */
  "exclude": [
    "./src/exclude/**/*"
  ],




  /*  Inherited profile   for example ："extends": "./configs/base", */
  // "extends": "",
  /*  Specify the list of compiled files , It is only used when there are few files to compile  */
  // "files": [],
  /* compilerOptions  Compiler options  */
  "compilerOptions": {
    
    // target  Used to specify ts Compiled as ES Version of 
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', ...
    "target": "es2015",
    // module  Specify the modular specification to use 
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', ...
    "module": "es2015",
    // lib Used to specify the library to be used in the project （ Generally don't move ）
    //  stay node Libraries that can be declared in the project , In the front end, you can declare dom( Built in Libraries in browsers , But in node There is no need for ！)
    //  The default is the running environment in the browser ！
    //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020',
    // 'esnext', 'dom', 'dom.iterable', ...
    "lib": [
      "es6",
      "dom"
    ],
    // outDir  Used to specify the directory of the compiled file 
    "outDir": "./dist",
    //  Merge the code into one file 
    //  Set up outFile after , All the code in the global scope will be merged into the same file 
    "outFile": "./dist/app.js"
    //  Whether the js File for compilation , The default is false
    "allowJs": true,
    //  Whether to check js Whether the code is syntactically correct , The default is false
    "checkJs": true,
    //  Remove comments 
    "removeComments": true,
    //  Do not generate compiled files 
    //  Just use TS Check grammar 
    "noEmit": false,
    //  When there is an error, the compiled file is not generated 
    "noEmitOnError": true,
    /*  Syntax attribute check  */
    //  All strictly checked master switches 
    "strict": true,
    //  Used to set whether the compiled file uses strict mode , Default false
    //  stay ES6 Modularity in automatically uses strict patterns , Without adding... At the beginning of the file `'use strict'`
    "alwaysStrict": true,
    //  Implicit is not allowed any type 
    "noImplicitAny": true,
    //  It is not allowed to be of indefinite type this
    "noImplicitThis": true,
    //  Strictly check for null values 
    "strictNullChecks": true
  }
}