TypeScript basic operation, configuration file tsconfig.json details, vscode and HBuilderX basic configuration

Keywords: TypeScript npm JSON React

Node basic command

npm installation dependency
[npm install xxx] using npm to install xxx depends on the directory where the current command line is located
[npm install xxx -g] use npm to install global dependency xxx
[npm install xxx – save] install and write to "dependencies" of package.json
[npm install xxx – save dev] install and write to "devdpendencies" in package.json

npm delete dependency
[npm uninstall xxx] delete xxx dependency
[npm uninstall xxx -g] delete global dependency xxx

Use ts in VScode

1. Basic configuration: after installing Node, install typescript on the terminal,

1. Install to current project and global

npm i typescript   //Install to current directory

npm i typescript -g   //Install to global

2. Install the configuration file tsconfig.json
Automatically generate a. json configuration file after execution

tsc --init  //Automatically generate a configuration file tsconfig.json

3. Basic settings of configuration file tsconfig.json
"outDir": ". /", / Redirect output structure to the directory / directory converted to js

--------------------------------------------------------------------------------------

For example: put it in the js file directory of this project

 outDir": "./js"

4. Set profile monitoring: do not automatically convert ts to js every time you run
vscode2020 version:
Click the terminal to find the running task - > > select tsc: Monitor
1.

2.

ts used in HBuilderX

1. Install the plug-in

Tools > plug-in installation > find typescript to install
2. Set write listening to automatically convert ts file to js

Create a. ts file right click > external command > typescript > plug in configuration

The plug-in configuration is as follows
Package.json
Plug in configuration detail link

  • Modify: "onDidSaveExecution": false / / whether to trigger automatically when saving. If it is set to true, it will be triggered automatically when saving
{
	"name": "typescript",
	"id": "compile-typescript",
	"version": "1.0.1-2018080916",
	"external": {
		"type": "node",
		"programPath": "${pluginPath}",
		"executable": "/node_modules/.bin/tsc",
		"programName": "typescript",
		"commands": [
			{
				"id": "TYPESCRIPT_COMPILE",
				"name": "Compile TypeScript",
				"command": [
					"${programPath}",
					"${file}"
				],
				"extensions": "ts",
				"key": "",
				"showInParentMenu": false,
				"onDidSaveExecution": true
			}
		]
	},
	"dependencies": {
		"typescript": "^2.8.3"
	},
	"extensionDependencies": [
		"npm"
	],
	"description": "compile-typescript Plug in typescript File compilation"
}

Using ts in hbuilder x is not as smooth as loading files in vs. The TS in hb is converted to the file in js. The creation is the same level as the TS file. No replacement is found

**Details of configuration file tsconfig.json**

Download automatically by entering tsc --init in the terminal

{
  "compilerOptions": {
    /* Basic Options (Basic operation) */
     "incremental": true,                   /*  (Enable incremental compilation)*/
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. (Specify ECMAScript target version: ES3 (default), ES5, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, or ESNEXT) */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.(Specify module code generation: 'none', 'Commonjs',' AMD ',' system ',' UMD ',' es2015 ',' es2020 ', or' ESNext ')*/
     "lib": [],                             /* Specify library files to be included in the compilation. (Specifies the library files to include in the compilation.)*/
     "allowJs": true,                       /* Allow javascript files to be compiled. (Allows you to compile javascript files. )*/
     "checkJs": true,                       /* Report errors in .js files. (Report errors in the. js file. )*/
     "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'.(Specify JSX code generation: 'preserve', 'reactive -native', or 'react'. ) */
     "declaration": true,                   /* Generates corresponding '.d.ts' file. (Generate the corresponding. d.ts file. )*/
     "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file.(Generate a source map for each corresponding ". d.ts" file. ) */
     "sourceMap": true,                     /* Generates corresponding '.map' file. (Generate the corresponding ". map" file. )*/
     "outFile": "./",                       /* Concatenate and emit output to single file. (Connect and send the output to a single file. )*/
     "outDir": "./",                        /* Redirect output structure to the directory.(Redirect output structure to directory) */
     "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. (Specifies the root of the input file. For using -- outDir to control output directory structure)*/
     "composite": true,                     /* Enable project compilation (Enable project compilation)*/
     "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information(Specify file to store incremental compilation information) */
     "removeComments": true,                /* Do not emit comments to output.(Do not comment the output. ) */
     "noEmit": true,                        /* Do not emit outputs.(Do not output. ) */
     "importHelpers": true,                 /* Import emit helpers from 'tslib'. (Issue the helper from "tslib". )*/
     "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. (Full support for iterables in for of, spread, and designing for ES5 or ES3. )*/
     "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). (Transfer each file as a separate module (similar to "ts.transform module"). )*/

    /* Strict Type-Checking Options (Strict type check option)*/
    "strict": true,                           /* Enable all strict type-checking options. (Enable all strict type checking options. )*/
     "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type.(An error was thrown on expressions and declarations of type 'any' implied. ) */
     "strictNullChecks": true,              /* Enable strict null checks.(Enable strict empty checking. ) */
     "strictFunctionTypes": true,           /* Enable strict checking of function types.(Enables strict checking of function types. ) */
     "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. (Enable strict "bind", "call" and "apply" methods for functions. )*/
     "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes.(Enables strict checking of property initialization in a class. ) */
     "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. (An error was thrown on the 'this' expression with an implied' any 'type. )*/
     "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file.(Resolve in strict mode and issue "use strict" for each source file) */

    /* Additional Checks (Additional checks)*/
     "noUnusedLocals": true,                /* Report errors on unused locals. (Report errors for unused local variables. )*/
     "noUnusedParameters": true,            /* Report errors on unused parameters.(Report errors for unused parameters) */
     "noImplicitReturns": true,             /* Report error when not all code paths in function return a value.(An error is reported when not all code paths in the function return values. ) */
     "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement.(Report errors in the switch statement for failover conditions. ) */

    /* Module Resolution Options (Module resolution options) */
     "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).(Specifies the module Resolution Policy: "node" (node.js) or "classic" (TypeScript pre-1.6). ) */
     "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. (Base directory used to resolve non absolute module names. )*/
     "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.(A series of items that remap the import to a lookup location relative to 'baseUrl'. ) */
     "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime.(Its combined content represents the root folder list of the runtime project structure. ) */
     "typeRoots": [],                       /* List of folders to include type definitions from.(Folder list with type definition) */
     "types": [],                           /* Type declaration files to be included in compilation. (The type declaration file to include in the compilation. )*/
     "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking.(Allows default import from modules that do not have a default export. This does not affect code generation, only type checking. ) */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. (Enable interoperability between CommonJS and ES modules by creating namespace objects for all imports. Indicates "allowsynthetics defaultimports". )*/
     "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. (Do not resolve the actual path of the symbolic link. )*/
     "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules.(The actual path of the symbolic link is not resolved. Allows access to UMD global variables from modules. ) */

    /* Source Map Options (Source mapping options) */
     "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations.(Specifies that the debugger should locate the TypeScript file in it instead of the source location. ) */
     "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. (Specifies where the debugger should locate the mapping file rather than the build location. )*/
     "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. (Use source mapping to generate a single file instead of using a separate file. )*/
     "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. (Issue the source along the source map in a single file; "- inlineSourceMap" or "- sourceMap" needs to be set. )*/

    /* Experimental Options (Test options) */
     "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. (Enable experimental support for ES7 decorators. )*/
     "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators.(Enables experimental support for issuing type metadata for decorators. ) */

    /* Advanced Options (Advanced options)*/
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file.(Case inconsistent references to the same file are not allowed. ) */
  }


}

Published 41 original articles, won praise 3, visited 944
Private letter follow

Posted by techevan on Tue, 25 Feb 2020 01:21:36 -0800