vscode 配置 typescript

配置vscode中TypeScript

• 安装 TypeScript

npm install -g typescript

• 在ts文件夹中目录下执行创建 tsconfig.json 文件命令

tsc --init 

• 编辑tsconfig.json文件

{
  "compilerOptions": {
    /*基本选项*/
    // "incremental": true,                   /* 对应增量汇编 */
    "target": "es5",                          /* 指定ECMAScript目标版本：“ES3”（默认）、“ES5”、“ES2015”、“ES2016”、“ES2017”、“ES2018”、“ES2019”或“ESNEXT”。*/
    "module": "commonjs",                     /* 指定模块代码生成：“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”或“esnext”。*/
    // "lib": [],                             /* 指定要包含在编译中的库文件。 */
    // "allowJs": true,                       /* 允许编译javascript文件。 */
    // "checkJs": true,                       /* 报告.js文件中的错误。 */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* 指定JSX代码生成：“preserve”、“react native”或“react”。 */
    // "declarationMap": true,                /* 为每个对应的“.d.ts”文件生成源映射。 */
    // "sourceMap": true,                     /* 生成相应的“.map”文件。 */
    // "outFile": "./",                       /* 连接并将输出发送到单个文件。 */
    "outDir": "./../js",                      /* 将输出结构重定向到目录。 */
    // "rootDir": "./",                       /* 指定输入文件的根目录用于使用--outdir控制输出目录结构。 */
    // "composite": true,                     /* 启用项目编译 */
    // "tsBuildInfoFile": "./",               /* 指定文件以存储增量编译信息 */
    // "removeComments": true,                /* 不要向输出发出注释。 */
    // "noEmit": true,                        /* 不要发出输出。*/
    // "importHelpers": true,                 /* 从“tslib”导入emit helpers。 */
    // "downlevelIteration": true,            /* 在针对“ES5”或“ES3”时，在“for of”、“spread”和“destructuring”中为iterables提供完全支持。 */
    // "isolatedModules": true,               /* 将每个文件作为单独的模块进行传输（类似于“ts.Transpile module”）。 */

    /* 严格类型检查选项 */
    "strict": true,                           /* 启用所有严格类型检查选项。*/
    // "noImplicitAny": true,                 /* 对隐含“any”类型的表达式和声明引发错误。 */
    // "strictNullChecks": true,              /* 启用严格的空检查。 */
    // "strictFunctionTypes": true,           /* 启用函数类型的严格检查。*/
    // "strictBindCallApply": true,           /* 对函数启用严格的“bind”、“call”和“apply”方法。 */
    // "strictPropertyInitialization": true,  /*在类中启用属性初始化的严格检查。 */
    // "noImplicitThis": true,                /* 对隐含“any”类型的“this”表达式引发错误。 */
    // "alwaysStrict": true,                  /* 以严格模式解析并为每个源文件发出“使用严格”命令。 */

    /* 附加检查 */
    // "noUnusedLocals": true,                /* 报告未使用的局部变量的错误。 */
    // "noUnusedParameters": true,            /* 报告未使用参数的错误。 */
    // "noImplicitReturns": true,             /* 不是函数中的所有代码路径都返回值时报告错误。*/
    // "noFallthroughCasesInSwitch": true,    /*在switch语句中报告故障转移情况的错误。 */

    /* 模块分辨率选项 */
    // "moduleResolution": "node",            /* 指定模块解析策略：“node”（node.js）或“classic”（TypeScript pre-1.6）。 */
    // "baseUrl": "./",                       /* 用于解析非绝对模块名的基目录。*/
    // "paths": {},                           /* 将导入重新映射到相对于“baseUrl”的查找位置的一系列项。*/
    // "rootDirs": [],                        /* 其组合内容表示运行时项目结构的根文件夹列表。 */
    // "typeRoots": [],                       /* 要从中包含类型定义的文件夹列表。 */
    // "types": [],                           /* 要包含在编译中的类型声明文件。 */
    // "allowSyntheticDefaultImports": true,  /* 允许从没有默认导出的模块进行默认导入。这不会影响代码发出，只会影响类型检查。*/
    "esModuleInterop": true                   /* 通过为所有导入创建命名空间对象，启用CommonJS和ES模块之间的互操作性。表示“AllowSyntticDefaultImports”。*/
    // "preserveSymlinks": true,              /* 不要解析符号链接的实际路径。 */
    // "allowUmdGlobalAccess": true,          /* 允许从模块访问umd全局。 */

    /* 源映射选项 */
    // "sourceRoot": "",                      /* 指定调试器应在其中定位TypeScript文件而不是源位置。 */
    // "mapRoot": "",                         /* 指定调试器应定位映射文件而不是生成位置的位置。 */
    // "inlineSourceMap": true,               /* 使用源映射生成单个文件，而不是使用单独的文件。*/
    // "inlineSources": true,                 /* 在单个文件中沿源映射发出源；需要设置“--inlinesourcemap”或“--sourcemap”。 */

    /* 实验选择 */
    // "experimentalDecorators": true,        /*ES7室内设计师的小实验支持*/
    // "emitDecoratorMetadata": true,         /* 启用对为装饰器发出类型元数据的实验性支持。 */
  }
}

选项都是机翻，如果有不正确的地方欢迎指正，我来修改。
日常我们只需要修改以下
target参数会让TS代码编写成es5的代码
outDir参数决定了你编译成功的js文件储存在哪里

vscode自动编译TS为JS

在vscode中按 Ctrl + Shift + B 或 点击菜单 终端-运行任务

向下移动选择监视并按回车启动
接下来就可以愉快的使用TS开发，vscode会自动将TS转为你需要的JS。