nodejs + typescirpt + vs code
参考:
基于Nodejs生态圈的TypeScript+React开发入门教程
NPM install -save 和 -save-dev 傻傻分不清
TypeScript 3 + Express + Node.js
尝试使用nodejs+typescript+vs code做服务端
一 nodejs环境搭建
二 vscode下载
三 简易服务端
一 nodejs环境搭建
1.1 安装nodejs
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
下载安装完毕后,任意文件夹下shift+右键,选择此处打开命令窗口,查看node版本
node -v
查看npm版本
npm -v
二 vs code安装
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……
1.1 下载vs code
下载后安装
三 简易服务端
1.1 新建项目
任意位置新建项目文件夹test,并用vs code 选择"文件"->"打开文件夹"打开,就相当于“新建项目”了

1.2 安装typescirpt
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
在vscode里按ctrl+~打开cmd命令行,安装typescript
npm install -g typescript
查看ts版本
tsc -v
1.3 创建package.json文件
配置文件package.json,此文件定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)
命令行输入
npm init
根据提示输入配置信息,最终生成如下

1.4 创建tsconfig.json文件
tsconfig.json指定了用来编译这个项目的根文件和编译选项
输入
tsc --init
生成tsconfig.json

修改outDir输出文件夹和rootDir源文件目录

并在相应的项目目录下创建bin和src

1.5 安装express
npm install express --save
使用npm isntall @types/xxx。
对应的类型定义文件将被安装在 工程根目录/node_modules/@types 目录下。
npm install @types/node --save
npm install @types/express --save

1.6 创建index.ts文件
以下代码创建一个简易服务器
const app = require('express')();
const http = require('http').Server(app);
app.get('/', function(req:any, res:any){
res.send('<h1>Welcome Realtime Server</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
在vs code中按ctrl+shift+b,选择构建

可以看到index.ts发布到bin文件夹下index.js

输入
node bin/index.js
则cmd窗口输出listening on *:3000

在浏览器打开127.0.0.1:3000

nodejs + typescirpt + vs code的更多相关文章
- Nodejs编译Native Code:使用C++构建工具npm
Nodejs的很多NPM包需要本地编译,通常是C++写的代码,例如图像处理模块等. 这是如果生产环境没有安装Visual Studio 2015等开发工具,通常会编译失败,发现了一个npm专门干这事儿 ...
- 6 个JavaScript日期处理库
1. Later.js Later.js, a stadalone JavaScript library, offers an advanced usage for triggering recurr ...
- 微软为.NET程序员带来了最优的跨平台开发体验-WSL
前言 在前几个Visual Studio Code更新中发现有一个重要得特性,就是nodejs可以使用VS Code在WSL中进行Debug了(WSL是指Win10中的Linux子系统),之前写过一篇 ...
- How to Build a Chat Bot Using Azure Bot Service and Train It with LUIS
Introduction If you haven’t had much programming experience before, building a conversational bot an ...
- Kali linux 2016.2(Rolling)中的Exploits模块详解
简单来将,这个Exploits模块,就是针对不同的已知漏洞的利用程序. root@kali:~# msfconsole Unable to handle kernel NULL pointer der ...
- Getting Started With Node and NPM
Getting Started with Node and NPM Let's start with the basics. Install Node.js: https://nodejs.org.
- Nodejs in Visual Studio Code 14.IISNode与IIS7.x
1.开始 部署IISNode环境请参考:Nodejs in Visual Studio Code 08.IIS 部署Nodejs程序请参考:Nodejs in Visual Studio Code 1 ...
- Nodejs in Visual Studio Code 11.前端工程优化
1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...
- Nodejs in Visual Studio Code 10.IISNode
1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...
随机推荐
- JAVA自学笔记21
JAVA自学笔记21 1.转换流 由于字节流操作中文不是非常方便,因此java提供了转换流 字符流=字节流+编码表 1)编码表 由字符及其对应的数值组成的一张表 图解: 2)String类的编码和解码 ...
- [Java代码] Java用pinyin4j根据汉语获取各种格式和需求的拼音
pinyin4j是一个功能强悍的汉语拼音工具包,主要是从汉语获取各种格式和需求的拼音,功能强悍,下面看看如何使用pinyin4j.下面介绍用pinyin4j来做的一个根据汉语获取各种格式和需求的拼音d ...
- 下载Android kernel
方法一: https://source.android.com/setup/building-kernels 方法二: 在按照https://source.android.com/setup/down ...
- 自定义UIPickView
效果图 源码 https://github.com/YouXianMing/Animations 说明 1. 数据适配器PickerViewDataAdapter含有PickerViewCompone ...
- hive sql 里面的注释方式
如果建表ddl 用 comment 这个没问题 那么在sql 语句里面呢,这个貌似不像mysql 那样能用 # // /* */ (左边这些都不行) 其实用 -- comment 就行啦 貌似上面的- ...
- 超过 130 个你需要了解的 vim 命令
从 1970 年开始,vi 和 vim 就成为了程序员最喜爱的文本编辑器之一.5年前,我写了一个问自己名为 “每个程序员都应该知道的 100 个 vim 命令” 这次算是之前那篇文章的改进版,希望你会 ...
- SSE图像算法优化系列二十四: 基于形态学的图像后期抗锯齿算法--MLAA优化研究。
偶尔看到这样的一个算法,觉得还是蛮有意思的,花了将近10天多的时间研究了下相关代码. 以下为百度的结果:MLAA全称Morphological Antialiasing,意为形态抗锯齿是AMD推出的完 ...
- 【.NET 深呼吸】在 .net core app 中使用 Composition
.NET 中的 Composition ,即 MEF.MEF 说得简单一点,就是它可以在运行阶段动态地发现类型,用于组件扩展方面特别合适. .NET Core App 的默认框架并不提供 MEF 有关 ...
- ionic 视图滚动到顶部
问题描述 进入页面, 滚动到底部 点击一个连接, 当前视图内容更新了 内容滚动到了上次的位置导致底部的内容没显示 需要控制自动回滚到顶部 <ion-content delegate-handle ...
- gdb fabs错误输出
https://sourceware.org/gdb/wiki/FAQ GDB doesn't know the return type nor the type of the arguments f ...