Here’s the basic TypeScript usage:

1. Global TypeScript installation

Start by installing Typescript globally (or locally, depending on your preference).

npm install -g typescript
Copy the code

After installation, you can use the command-line tool TSC, which can be used to compile individual files.

tsc helloworld.ts
Copy the code

Note that compiling a single file with TSC does not look for the tsconfig.json file under the project, but uses the default configuration, which must be changed on the command line if needed.

tsc helloworld.ts  --allowJs --allowSyntheticDefaultImports
Copy the code

2. Tsconfig. Json configuration

Tsconfig. json has many configuration items, and it’s not easy to get familiar with them all. TypeScript prompts you to turn on configuration items when you use some behavior in your code that requires them to be turned on.

// Generate a tsconfig.json initial file TSC --initCopy the code
{"compilerOptions": {/* Basic options */ "incremental": */ "target": "ES5 ", /* Specifies the ECMAScript version generated after compilation: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "Commonjs / * specify which modules compiled generation: 'none', 'commonjs',' amd ', 'the system', 'umd', 'es2015', 'es2020', or 'ESNext. * /" lib ": [], /* Specifies which library files to include */ "allowJs": true, /* allows compiling JS files (JS, JSX) */ "checkJs": True, /* Allows you to indicate an error message in a JS file, usually with allowJs */ "JSX ": "Preserve ", /* Specify the development environment for JSX code: 'preserve', 'react-native' or 'react'*/ "declaration": True, /* Generates a source map for each corresponding ".d.ts "file. */ "sourceMap": true, /* Generates the corresponding ". Map" file. */ "outFile": "./ss.js", /* When moudle is AMD, multiple TS files will be merged into a js file */ "outDir": "./dist", /* Specify the output directory */ "rootDir": "./ SRC ", /* Specify compilation root */ "composite": true, /* Enable project compilation */ "tsBuildInfoFile": "./", /* Specify incremental file storage location */ "removeComments": */ "noEmit": true */ "noEmit": true */ "importHelpers": True, /* Import emit helpers from 'tslib'. */ "downlevelIteration": true, /* For ES5 and ES3, add for.. Of, spread and destructuring demote */ "isolatedModules": true, /* converts each file into a separate module (similar to 'ts.transpilemodule'). */ /* strict type checking options */ "strict": true, /* All strict type options are enabled, and the following options are enabled */ "noImplicitAny": StrictNullChecks: true, /* strictNullChecks: true, /* strictFunctionTypes: /* strictNullChecks: true, /* strictNullChecks: /* strictFunctionTypes: True, /* Enables strict checking of function types. */ "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. * / "strictPropertyInitialization" : true, / * class instance attributes must be initialized * / "noImplicitThis" : True, /* Does not allow this to have an implicit any type */ "alwaysStrict": true, /* Injects "use strict" */ /* Additional checks */ "noUnusedLocals": NoUnusedParameters: true, /* Reports only unused local variables */ "noUnusedParameters": true, /* Reports unused function parameters */ "noImplicitReturns": True, every branch / * function has a return value, as if the else wants to have a return value * / "noFallthroughCasesInSwitch" : True, /* prevents switch statements from running through (if a branch does not break, the following branches will execute in sequence) */ /* moduleResolution options */ "moduleResolution": "Node ", /* Specifies the module resolution policy: 'node' (node.js) or 'classic' */ "baseUrl": "./", /* Basic directory for resolving non-relative module names */ "paths": BaseUrl. */ "rootDirs": [], /* Puts multiple compiled directories in one virtual directory for run-time use */ "typeRoots": [], /* Declare file directory, default node_modules/@types */ "types": [], / * need to load statement specified file package, if you specify a package, will only load the package declaration file * / "allowSyntheticDefaultImports" : True, /* sModuleInterop is enabled by default */ "esModuleInterop": /* If a module is exported with export =, we can either import from or import = import */ "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ "allowUmdGlobalAccess": True, /* Allow the login to UMD globals from modules. */ "", /* specifies where the debugger should locate TypeScript files instead of source locations */ "mapRoot": "", /* specifies where the debugger should locate map files instead of generated files */ "inlineSourceMap": True, /* Specifies whether to compile the contents of the map file and the js file in the same JS file */ "inlineSources": true, /* emit the source with the source map in a single file; Need to set "--inlineSourceMap" or "--sourceMap" */ /* Experimental option */ "experimentalDecorators": True, /* Specifies whether to enable experimental decorator features */ "emitDecoratorMetadata": true, /* Specifies whether to enable metadata support for decorators */ /* Advanced options */ "skipLibCheck": True, / * skip declaration file type checking * / "forceConsistentCasingInFileNames" : true / * bans do not match the case of the same file reference * /}}Copy the code