nodejs + typescirpt + vs code

參考：

基於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