Typescript Learning Guide

install typescript

cross-env This is cross platform operation , This is lunix Up operation , stay windows Can not run , Cross platform means
1.

npm install -g typescript     

-------- Global installation typescript -g (global) i (install)
tsc 1.ts
Will transform 1.ts=> 1.js file

 npm i -g ts-node  

---- Global installation ts-node
ts-node 1.ts
Report errors Cannot find module ‘@types/node/package.json’
Execute the name
npm install -D tslib @types/node
Just ok 了 Reference resources npm In the library This address
https://www.npmjs.com/package/ts-node

react Inside tsconfig.json

{
  "compilerOptions": {
    //  Compiled target js edition , Easy for browsers to recognize .ES2015 ES2016 ES2018 ESNext
    "target": "es5",
    //  Libraries to be included during compilation ,dom The library represents the operations I can use dom Of api, Know how to check .//document.getElementById('root')
    "lib": [
      "dom",//document.getElementById('root')
      "dom.iterable",
      "esnext"
    ],
    //  Allow mixed compilation js file 
    "allowJs": true,
    "skipLibCheck": true,
    //   Allow to use commonjs The way import  file  import  React from 'react'
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    //   Modular system of code   Nodejs Of commonjs , es6 Of esnext,require Of AMD
    "module": "esnext",
    //   How the compiler works .  Use each file as a separate module 
    "moduleResolution": "node",
    //  Without this, you can't introduce json file , Error will be reported when importing . And it depends on moduleResolution
    "resolveJsonModule": true,
    "isolatedModules": true,
    //  When an error occurs, it will not be compiled into js Code 
    "noEmit": true,
    //  react-native  and  preserve Does not compile jsx
    // react-native  The output extension is js,preserve Output extension .jsx
    //  react： Compiled into  react    for example ： The tag will be compiled into a call React  Native api Method generation , The output extension is js
    // React.createElement("h1", null, "Hello world")
    //  react-jsx：  Compiled into  react17  New supported features  ：react-jsx  Do not rely on  react  Can be slightly reduced in size  
    // （react-jsx,react-jsxdev All are react17 Newly added ）
    // react-jsxdev 
    "jsx": "react-jsx",
    //  The file path included in the compilation 
    // "include": [
    //   "./src"
    // ]
  },
  "include": [
    "src"
  ]
}

? Use ！ Use

1. Property or parameter ？： Indicates that the attribute or parameter is optional
2. Property or parameter ！： Indicates forced resolution （ tell typescript compiler , There must be value here ）, Commonly used in vue-decorator Medium @Prop
3. Use after variable ！： Indicates that type inference excludes null、undefined

undefined.substring(0, 10)
VM162:1 Uncaught TypeError: Cannot read property 'substring' of undefined
    at <anonymous>:1:11
(anonymous) @ VM162:1
undefined?.substring(0, 10)

To configure config.ts

{
    
  "compilerOptions": {
    
    /* Basic Options */
    "target": "es5" /* target Used to specify the version target after compilation : 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "module": "commonjs" /*  Used to specify the module standard to use : 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": ["es6", "dom"] /* lib Used to specify the library files to be included in the compilation  */,
    "allowJs": true,                       /* allowJs The value set is true or false, Used to specify whether compilation is allowed js file , The default is false, It doesn't compile js file  */
    "checkJs": true,                       /* checkJs The value of is true or false, Used to specify whether to check and report js Error in file , The default is false */
    "jsx": "preserve",                     /*  Appoint jsx The development environment the code is used for : 'preserve', 'react-native', or 'react'. */
    "declaration": true,                   /* declaration The value of is true or false, Used to specify whether to generate the corresponding ".d.ts" Declaration file . If it is set to true, Compile each ts After the file, a js File and a declaration file . however declaration and allowJs Cannot be set to at the same time true */
    "declarationMap": true,                /*  The value is true or false, Specifies whether it is a declaration file .d.ts Generate map file  */
    "sourceMap": true,                     /* sourceMap The value of is true or false, Used to specify whether to generate .map file  */
    "outFile": "./",                       /* outFile Use to specify that the output file be merged into one file , Its value is a file pathname . For example, set to "./dist/main.js", The output file is a main.js file . But be careful , Only settings module The value of is amd and system This configuration is only supported for modules  */
    "outDir": "./",                        /* outDir Used to specify the output folder , Value is a folder path string , The output files will be placed in this folder  */
    "rootDir": "./",                       /*  Used to specify the root directory of the compiled file , The compiler looks for the entry file in the root directory , If the compiler finds that rootDir The value of as the root directory to find the entry file does not load all the files into it, an error will be reported , But it doesn't stop compiling  */
    "composite": true,                     /*  Whether to compile and build reference projects  */
    "incremental": true,                   /* Enable incremental compilation */
    "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    "removeComments": true,                /* removeComments The value of is true or false, Used to specify whether to delete comments from the compiled file , Set to true Delete the notes if necessary , The default is false */
    "noEmit": true,                        /*  Do not generate compiled files , This is generally less used  */
    "importHelpers": true,                 /* importHelpers The value of is true or false, Specifies whether to introduce tslib Utility functions in , The default is false */
    "downlevelIteration": true,            /*  When target by 'ES5' or 'ES3' when , by 'for-of', spread, and destructuring' The iterator in provides full support  */
    "isolatedModules": true,               /* isolatedModules The value of is true or false, Specifies whether to treat each file as a separate module , The default is true, It can't be with declaration Simultaneous setting  */
 
    /* Strict Type-Checking Options */
    "strict": true /* strict The value of is true or false, Used to specify whether to start all type checking , If it is set to true The following strict type checks will be turned on at the same time , The default is false */,
    "noImplicitAny": true,                 /* noImplicitAny The value of is true or false, If we don't set explicit types for some values , The compiler will default to a value of any, If noImplicitAny The value of is true Words . If there is no specific type, an error will be reported . The default value is false */
    "strictNullChecks": true,              /* strictNullChecks by true when ,null and undefined Values cannot be assigned to values other than these two types , No other type can be assigned to them , except any type . Another exception is undefined I can assign a value to void type  */
    "strictFunctionTypes": true,           /* strictFunctionTypes The value of is true or false, Used to specify whether bidirectional covariance checking of function parameters is used  */
    "strictBindCallApply": true,           /*  Set to true I'll see you later bind、call and apply The detection of parameters of bound methods is strict  */
    "strictPropertyInitialization": true,  /*  Set to true The class is checked for non undefined Whether the property is already initialized in the constructor , If you want to turn this on , It needs to be turned on at the same time strictNullChecks, The default is false */
   "noImplicitThis": true,                /*  When this The value of the expression is any When it comes to type , Generate an error  */
    "alwaysStrict": true,                  /* alwaysStrict The value of is true or false, Specifies that each module is always checked in strict mode , And after compiling js Add... To the document "use strict" character string , Used to tell browsers to js For the strict model  */
 
    /* Additional Checks */
    "noUnusedLocals": true,                /*  Used to check whether there are defined but unused variables , The detection of this point , Use eslint You can make a prompt when you write the code , You can use it with . Its default value is false */
    "noUnusedParameters": true,            /*  Used to check if there are arguments that are not used in the function body , This can also work with eslint Come and have a check , The default is false */
    "noImplicitReturns": true,             /*  Used to check whether a function has a return value , Set to true after , If the function does not return a value, it will prompt , The default is false */
    "noFallthroughCasesInSwitch": true,    /*  Used for inspection switch If there case Not used break Jump out of switch, The default is false */
 
    /* Module Resolution Options */
    "moduleResolution": "node",            /*  Used to select module resolution strategy , Yes 'node' and 'classic' Two types of ' */
    "baseUrl": "./",                       /* baseUrl Used to set the base directory for resolving non relative module names , Relative modules are not affected by baseUrl Influence  */
    "paths": {
    },                           /*  Used to set the module name to be based on baseUrl Path mapping for  */
    "rootDirs": [],                        /* rootDirs You can specify a list of paths , At build time, the compiler will put the contents of the paths in the path list into a folder  */
    "typeRoots": [],                       /* typeRoots A list of paths used to specify the declaration file or folder , If this is specified , Only the declaration files listed here will be loaded  */
    "types": [],                           /* types Used to specify the modules that need to be included , Only the declaration files of the modules listed here will be loaded in  */
    "allowSyntheticDefaultImports": true,  /*  Used to specify that default imports are allowed from modules that do not have default exports  */
    "esModuleInterop": true /*  By creating a namespace for the imported content , Realization CommonJS and ES Interoperability between modules  */,
    "preserveSymlinks": true,              /*  Don't parse symbolic links into their real paths , You can learn more about webpack and nodejs Of symlink Related knowledge  */
 
    /* Source Map Options */
    "sourceRoot": "",                      /* sourceRoot Used to specify that the debugger should find TypeScript File instead of source file location , This value will be written in .map In the document  */
    "mapRoot": "",                         /* mapRoot Used to specify where the debugger finds the mapping file instead of the makefile , Appoint map The root path of the file , This option affects .map In the document sources attribute  */
    "inlineSourceMap": true,               /*  Specify whether to map The contents of the document and js The files are compiled in the same js In file , If it is set to true, be map The content of the content will be //# sourceMappingURL= Then joining together base64 The form of a string is inserted in js At the bottom of the file  */
    "inlineSources": true,                 /*  Used to specify whether to further .ts The contents of the file are also included in the input file  */
 
    /* Experimental Options */
    "experimentalDecorators": true /*  Used to specify whether experimental decorator features are enabled  */
    "emitDecoratorMetadata": true,         /*  Used to specify whether metadata support is provided for decorators , About metadata , It's also ES6 New standard of , Can pass Reflect The static method provided to get metadata , If needed Reflect Some of the ways , Need to introduce ES2015.Reflect This library  */
  }
  "files": [], // files You can configure an array list , It contains the relative or absolute path of the specified file , The compiler compiles only those included in files The documents listed in , If you don't specify , It depends on whether it's set up include Options , without include Options ,<br>// By default, files in the root directory and all subdirectories will be compiled . The path listed here must be the specified file , Not a folder , And it can't be used * ? **/  Equal wildcard 
  "include": [],  // include You can also specify a list of paths to compile , But and files The difference is that , The path here can be a folder , It can also be a document , You can use relative and absolute paths , And you can use wildcards , such as "./src" That means to compile src All the files in the folder and the files in the subfolder 
  "exclude": [],  // exclude To exclude 、 Files not compiled , It can also specify a list , Rules and include equally , It can be a file or a folder , It can be relative path or absolute path , You can use wildcards 
  "extends": "",   // extends It can be done by specifying an other tsconfig.json File path , To inherit the configuration in this configuration file , The configuration of the inherited file will override the configuration defined by the current file .TS stay 3.2 Version start , Support inheriting one from Node.js Bag tsconfig.json The configuration file 
  "compileOnSave": true,  // compileOnSave The value of is true or false, If it is set to true, When we edit the files in the project and save them , The editor will be based on tsconfig.json The configuration in regenerates the file , But this one needs to be supported by the editor 
  "references": [],  //  An array of objects , Specify the project to reference 
}

.vscode/settings.json 
 "js/ts.implicitProjectConfig.checkJs": false,// close tslink Yes js Detection of documents 

Cloud ticketing ts.config

{
    
    "compilerOptions": {
    
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "types": [
            "node",
            "webpack-env"
        ],
        "paths": {
    
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ],
        "strictPropertyInitialization": false,
        "noImplicitAny": false,
        "allowJs": true,
        "outDir": "./"

    },
    "include": [
        "src/**/*.js",
        "src/**/**/*.js",
        "src/**/**/**/*.js",
        "src/**/*.ts",
        "src/**/**/*.ts",
        "src/**/*.vue",
        "src/**/**/*.vue",
    ],
     "exclude": ["node_modules", "dist"]
}