TypeScript开发环境搭建-Visual Studio Code

╰半橙微兮° 2022-06-14 10:16 251阅读 0赞

**一.环境安装**

1.安装Node.Js环境

2.使用 npm包管理，安装TypeScript

npm install -g typescript

更新到最新版本：

npm update -g typescript

3.查看当前TypeScript的版本

tsc -v

**三、在VS Code中对于 v1.14以后的版本，编辑器只需要配置 tsconfig.json文件就可以了**

注：VsCode v.1.14对tasks.json进行了调整，详细 参考 ：[https://code.visualstudio.com/docs/editor/tasks\#vscode][https_code.visualstudio.com_docs_editor_tasks_vscode]

1.配置tsconfig.json,和一起前一样，见介绍2

注：watch可以 配置监视当执行保存时及时编译文件。

{
        "compilerOptions": {
            "target": "es5",
            "noImplicitAny": true,
            "module": "commonjs",
            "removeComments": true,
            "sourceMap": false,
            "watch": true,
            "outDir": "out/"
        },
        "include":[  
            "src/*"  
        ],  
        "exclude": [  
            "js"  
        ]  
    }

2.自动生成task.json、

点击任务》配置生成默认任务，选择tsc就可以了

![Center][]

或者使用Ctrl+Shift+P

![Center 1][]

结果如下：

{
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "type": "typescript",
                "tsconfig": "tsconfig.json",
                "group": {
                    "kind": "build",
                    "isDefault": true
                }
            }
        ]
    }

其他说明：多任务示例

{
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "type": "npm",
                "script": "lint",
                "problemMatcher": [
                    "$eslint-stylish"
                ],
                "presentation": {
                    "reveal": "never"
                },
            },
            {
                "taskName": "Run tests",
                "type": "shell",
                "command": "./scripts/test.sh",
                "windows": {
                    "command": ".\\scripts\\test.cmd"
                },
                "group": "test",
                "presentation": {
                    "reveal": "always",
                    "panel": "new"
                }
            }
        ]
    }

**二.在VS Code工具下创建、编译项目（这针对于VsCodev1.14以前的版本）**

1.使用VS Code打开执行文件夹作为工作目录

2.创建tsconfig.json文件，配置\*.ts的编译输出等，更多参考：[https://www.tslang.cn/docs/handbook/tsconfig-json.html][https_www.tslang.cn_docs_handbook_tsconfig-json.html]

{
       "compilerOptions": {
           "target": "es5",
           "noImplicitAny": false,
           "module": "commonjs",
           "removeComments": true,
           "sourceMap": false,
           "outDir": "Golang/TypeScript/"
        }
        //"include":[
        //     "ts"
        // ],
        //"exclude": [
        //     "js"
        // ]
    }

*  target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
 *  noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
 *  module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。
 *  removeComments：编译生成的JavaScript文件是否移除注释。
 *  sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
 *  outDir：编译输出JavaScript文件存放的文件夹。如果文件夹不存在，抛出异常
 *  include、exclude：编译时需要包含/剔除的文件夹。

3.在.vscode文件夹下创建任务，用于指定编译命令等

文件名tasks.json

{
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for thedocumentation about the tasks.json format
       "version": "2.0.0",
       "command": "tsc",
       "isShellCommand": true,
       "args": ["-p", "."],
       "showOutput": "always",
       "problemMatcher": "$tsc"
    }

4.使用  **Ctrl+Shift+B 启动编译**

编译成功会将在指定的输出目录生成 \*.ts => \*.js

如下图：

![Center 2][]

[TypeScript 简介整理][TypeScript]

[NodeJs开发环境搭建之Visual Studio Code][NodeJs_Visual Studio Code]

[Apache Cordova开发环境搭建（二）VS Code][Apache Cordova_VS Code]

[https_code.visualstudio.com_docs_editor_tasks_vscode]: https://code.visualstudio.com/docs/editor/tasks#vscode
[Center]: /images/20220614/c43e65a72e124b97a3d1a2dd24590fbd.png
[Center 1]: /images/20220614/2b550ff111a640f39b81f59cae0cf241.png
[https_www.tslang.cn_docs_handbook_tsconfig-json.html]: https://www.tslang.cn/docs/handbook/tsconfig-json.html
[Center 2]: /images/20220614/4c1d716c7a8f44019f9f17322b9ae1aa.png
[TypeScript]: http://blog.csdn.net/u011127019/article/details/73380025
[NodeJs_Visual Studio Code]: http://blog.csdn.net/u011127019/article/details/56673123
[Apache Cordova_VS Code]: http://blog.csdn.net/u011127019/article/details/56335719