TypeScript使用vscode监视代码编译的过程

2024-04-02 19:04:59 368人浏览独家记忆

摘要

安装全局安装ts命令 npm install -g typescript 安装结束后运行tsc -v命令显示版本号表示安装成功接下来可以使用tsc 文

安装

全局安装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监视如果报错并且错误内容大致如下