TypeScript怎么使用vscode监视代码编译

这篇文章主要讲解了“typescript怎么使用vscode监视代码编译”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“TypeScript怎么使用vscode监视代码编译”吧！

安装

• 全局安装ts命令 npm install -g typescript

• 安装结束后运行tsc -v命令 显示版本号表示安装成功

• 接下来可以使用tsc 文件名称 可以将ts文件转化为js文件 js文件可以引入在html文件中直接使用

监视ts文件

在文件夹中执行 tsc --init 可以生成tsconfig.JSON文件 打开该文件可以看到 内容如下

{  "compilerOptions": {            // "incremental": true,                                  // "composite": true,                                    // "tsBuildInfoFile": "./",                              // "disableSourceOfProjectReferenceRedirect": true,      // "disableSolutionSearching": true,                     // "disableReferencedProjectLoad": true,                     "target": "es2016",                                      // "lib": [],                                            // "jsx": "preserve",                                    // "experimentalDecorators": true,                       // "emitDecoratORMetadata": true,                        // "jsxFactory": "",                                     // "jsxFragmentFactory": "",                             // "jsxImportSource": "",                                // "ReactNamespace": "",                                 // "noLib": true,                                        // "useDefineForClassFields": true,                          "module": "commonjs",                                    // "rootDir": "./",                                      // "moduleResolution": "node",                           // "baseUrl": "./",                                      // "paths": {},                                          // "rootDirs": [],                                       // "typeRoots": [],                                      // "types": [],                                          // "allowUmdGlobalAccess": true,                         // "resolveJsonModule": true,                            // "noResolve": true,                                        // "allowJs": true,                                      // "checkJs": true,                                      // "maxNodeModuleJsDepth": 1,                                // "declaration": true,                                  // "declarationMap": true,                               // "emitDeclarationOnly": true,                          // "sourceMap": true,                                    // "outFile": "./",                                      //    这里可以配置输出的js文件目录   "outDir": "./js/",                                       // "removeComments": true,                               // "noEmit": true,                                       // "importHelpers": true,                                // "importsNotUsedAsValues": "remove",                   // "downlevelIteration": true,                           // "sourceRoot": "",                                     // "mapRoot": "",                                        // "inlineSourceMap": true,                              // "inlineSources": true,                                // "emitBOM": true,                                      // "newLine": "crlf",                                    // "stripInternal": true,                                // "noEmitHelpers": true,                                // "noEmitOnError": true,                                // "preserveConstEnums": true,                           // "declarationDir": "./",                               // "preserveValueImports": true,                             // "isolatedModules": true,                              // "allowSyntheticDefaultImports": true,                 "esModuleInterop": true,                                 // "preserveSymlinks": true,                             "forceConsistentCasingInFileNames": true,                    "strict": true,                                          // "noImplicitAny": true,                                // "strictNullChecks": true,                             // "strictFunctionTypes": true,                          // "strictBindCallApply": true,                          // "strictPropertyInitialization": true,                 // "noImplicitThis": true,                               // "useUnknownInCatchVariables": true,                   // "alwaysStrict": true,                                 // "noUnusedLocals": true,                               // "noUnusedParameters": true,                           // "exactOptionalPropertyTypes": true,                   // "noImplicitReturns": true,                            // "noFallthroughCasesInSwitch": true,                   // "noUncheckedIndexedAccess": true,                     // "noImplicitOverride": true,                           // "noPropertyAccessFromIndexSignature": true,           // "allowUnusedLabels": true,                            // "allowUnreachableCode": true,                             // "skipDefaultLibCheck": true,                          "skipLibCheck": true                                   }}

结束后可以点击vscode的终端 点击配置任务 选择tsc监视 如果报错 并且错误内容大致如下

无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本

这时候需要单开 window powershell ise 输入命令 Set-ExecutionPolicy RemoteSigned 点击全是 再次执行监视任务即可正常监视

再次点击终端 点击运行任务 选择 tsc监视 即可实时监视ts文件的变化 并自定生成对应的js文件

感谢各位的阅读，以上就是“TypeScript怎么使用vscode监视代码编译”的内容了，经过本文的学习后，相信大家对TypeScript怎么使用vscode监视代码编译这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！