安装
- 全局安装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监视代码编译的文章就介绍到这了,更多相关ts vscode监视代码编译内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
