参考:

基于Nodejs生态圈的TypeScript+React开发入门教程

NPM install -save 和 -save-dev 傻傻分不清

使用typescript开发node js

TypeScript 3 + Express + Node.js

尝试使用nodejs+typescript+vs code做服务端

一 nodejs环境搭建

二 vscode下载

三 简易服务端

一 nodejs环境搭建

1.1 安装nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

http://nodejs.cn/

下载安装完毕后,任意文件夹下shift+右键,选择此处打开命令窗口,查看node版本

node -v 

查看npm版本

npm -v

二 vs code安装

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……

1.1 下载vs code

https://code.visualstudio.com

下载后安装

三 简易服务端

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的更多相关文章

  1. Nodejs编译Native Code:使用C++构建工具npm

    Nodejs的很多NPM包需要本地编译,通常是C++写的代码,例如图像处理模块等. 这是如果生产环境没有安装Visual Studio 2015等开发工具,通常会编译失败,发现了一个npm专门干这事儿 ...

  2. 6 个JavaScript日期处理库

    1. Later.js Later.js, a stadalone JavaScript library, offers an advanced usage for triggering recurr ...

  3. 微软为.NET程序员带来了最优的跨平台开发体验-WSL

    前言 在前几个Visual Studio Code更新中发现有一个重要得特性,就是nodejs可以使用VS Code在WSL中进行Debug了(WSL是指Win10中的Linux子系统),之前写过一篇 ...

  4. 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 ...

  5. Kali linux 2016.2(Rolling)中的Exploits模块详解

    简单来将,这个Exploits模块,就是针对不同的已知漏洞的利用程序. root@kali:~# msfconsole Unable to handle kernel NULL pointer der ...

  6. Getting Started With Node and NPM

    Getting Started with Node and NPM Let's start with the basics. Install Node.js: https://nodejs.org.

  7. 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 ...

  8. Nodejs in Visual Studio Code 11.前端工程优化

    1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...

  9. Nodejs in Visual Studio Code 10.IISNode

    1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...

随机推荐

  1. 原生ajax请求

    $('#send').click(function(){ //请求的5个阶段,对应readyState的值 //0: 未初始化,send方法未调用: //1: 正在发送请求,send方法已调用: // ...

  2. hdu2955 Robberies(背包)

    https://vjudge.net/problem/HDU-2955 概率是浮点数,只能做值(而且这里是累乘,也不能化成整数),这里注意要化成安全概率(1-p[i]),求安全概率的最大值. 钱数作二 ...

  3. win10下搭建storm环境

    原文:https://blog.csdn.net/lu_wei_wei/article/details/80843365 1.下载storm; http://mirror.bit.edu.cn/apa ...

  4. java获得上下周及本周日期

    public static SimpleDateFormat getFormat(String format) { return new SimpleDateFormat(format); } /** ...

  5. 每天一个linux命令:du

    1.命令简介 du (Disk usage) 用来计算每个文件的磁盘用量,目录则取总用量. 2.用法 用法:du [选项]... [文件]... 或:du [选项]... --files0-from= ...

  6. Unity应用架构设计(1)—— MVVM 模式的设计和实施(Part 2)

    MVVM回顾 经过上一篇文章的介绍,相信你对MVVM的设计思想有所了解.MVVM的核心思想就是解耦,View与ViewModel应该感受不到彼此的存在. View只关心怎样渲染,而ViewModel只 ...

  7. Kubernetes 1.12公布:Kubelet TLS Bootstrap与Azure虚拟机规模集(VMSS)迎来通用版本号

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/M2l0ZgSsVc7r69eFdTj/article/details/82880341 https: ...

  8. 解决AndroidStudio导入项目卡在gradle加载界面

    为了节省排版时间,直接上图了,图片若看不清,可在新标签中打开查看. 文中图片上涉及到的一些链接如下: maven { url 'http://maven.aliyun.com/nexus/conten ...

  9. 如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库 ...

  10. 流媒体之HLS——综述

    [时间:2018-01] [状态:Open] [关键词:流媒体,stream,HLS] 0 HLS背景及初衷 HLS是由苹果公司发起的流媒体网络传输协议,可参考rfc8261 HTTP Live St ...