ts使用vscode监视代码编译

木头清柠

已于 2022-08-26 15:05:21 修改

阅读量575

点赞数

文章标签： vue.js javascript 前端

于 2022-08-26 14:58:09 首次发布

本文链接：https://blog.csdn.net/m0_55295461/article/details/126543557

版权

本文介绍了如何在VSCode中配置TypeScript（ts）的监视编译。首先全局安装typescript，验证安装成功后，通过tsc命令转换TS文件为JS文件。接着创建tsconfig.json文件，设置监视选项，并解决可能出现的执行权限问题。最后，通过VSCode的终端运行tsc监视任务，实现实时监控TS文件变化并自动编译。

摘要由CSDN通过智能技术生成

安装

全局安装ts命令 npm install -g typescript
安装结束后运行tsc -v命令显示版本号表示安装成功
接下来可以使用tsc 文件名称可以将ts文件转化为js文件 js文件可以引入在html文件中直接使用
监视Ts文件
在文件夹中执行 tsc --init 可以生成tsconfig.json文件打开该文件可以看到内容如下

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifie