NodeJs之TypeScript开发环境--VS Code

本是古典何须时尚 2022-06-13 09:45 201阅读 0赞

NodeJs的开发中可以使用TypeScript。

本文介绍在NodeJs项目中使用TypeScript，VSCode已经支持TypeScript的编辑编辑等功能。

**方式一：使用VS Code**

**一、创建NodeJs项目**

可以参考：[http://blog.csdn.net/u011127019/article/details/74295235][http_blog.csdn.net_u011127019_article_details_74295235]

**二、在当前NodeJs项目中添加TypeScript的支持**

更多参考：[TypeScript开发环境搭建-Visual Studio Code][TypeScript_-Visual Studio Code]

1.添加tsconfig.json，配置TypeScript 的编译输出

{
    	"compilerOptions": {
    		"target": "es5",
    		"module": "commonjs",
    		"watch": false,
    		"sourceMap": true,
    		"outDir": "./out"
    	},
    	"exclude": [
    		"node_modules",
    		"out"
    	]
    }

2.添加tasks.json，添加编译命令和任务

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

3.编写typescript 代码例如：main.ts

//引用NodeJs模块
    var http=require('http');
    console.info(http);

**三、在TypeScript中添加NodeJs的提示和支持**

安装typings 的node模块

typings install dt~node --global --save

![Center][]  
  
最终创建键的项目如下：

![Center 1][]

**方式二：使用 Egret Wing 创建**

注：可以省去许多初始化操作，创建项目更快捷

1.点击新建项目 选择NodeJs项目（TypeScript）

![Center 2][]

2.输入项目名，创建项目目录，初始化项目

![Center 3][]

3.创建完成

![Center 4][]

更多参考：

[TypeScript开发环境搭建-Visual Studio Code][TypeScript_-Visual Studio Code]

[VS Code智能提示功能之Typings][VS Code_Typings]

[NodeJs开发环境搭建之Visual Studio Code（二）][http_blog.csdn.net_u011127019_article_details_74295235]

[http_blog.csdn.net_u011127019_article_details_74295235]: http://blog.csdn.net/u011127019/article/details/74295235
[TypeScript_-Visual Studio Code]: http://blog.csdn.net/u011127019/article/details/73380654
[Center]: /images/20220613/cba4f18289f54207afec88e38042b504.png
[Center 1]: /images/20220613/f1077b501fd6470585d4b86eb59a4f37.png
[Center 2]: /images/20220613/228c8ed558864b65b3ce12d8b48647b0.png
[Center 3]: /images/20220613/9afaca645a8948699dbef7f4ecf6da06.png
[Center 4]: /images/20220613/88e22e2aea6245ccad1130479b0f613a.png
[VS Code_Typings]: http://blog.csdn.net/u011127019/article/details/56671511