一栋艳、typescript helloworld
1.安裝node,npm,typescript,vs code等
2.新建一個目錄，比如tsHelloworld,使用命令行運行tsc --init魂挂，tsc會幫助我們創(chuàng)建一個tsconfig.json文件，tsconfig是tsc每次編譯時都會檢查的一個配置文件馁筐。這里可以參考tsconfig.json官方文檔
命令行運行code .,使用vs code打開項目涂召。
rootDir,outDir默認被 注釋掉了，一個是源文件目錄敏沉，一個是編譯后生成的JS目錄果正。在tsHelloworld下新建兩個文件夾：bin,src，然后更改相應的配置盟迟。
3.在VS CODE任務主菜單下秋泳，選擇運行生成任務，或者使用CTRL+SHIFT+B
這里可以參考tsconfig.json官方文檔
選擇tsc:構(gòu)建攒菠，控制 臺會報錯迫皱，這是因為src目錄下找不到ts文件。
> Executing task: tsc -p e:\node\tsHelloworld\tsconfig.json <
error TS18003: No inputs were found in config file
'e:/node/tsHelloworld/tsconfig.json'. Specified 'include'
paths were '["**/*"]' and 'exclude' paths were '[]'.
在src目錄下要尔，新建一個Hello.ts的文件：
class Hello {
firstName : string;
lastName : string;
constructor(fiestName : string, lastName : string) {
this.firstName = fiestName;
this.lastName = lastName;
}
greeter() {
return "歡迎來到typescript的世界舍杜，hello" +
this.firstName + " " + this.lastName;
}
}
var user = new Hello("王", "小二");
document.body.innerHTML = user.greeter();
然后再使用tsc:構(gòu)建，可以發(fā)現(xiàn)bin目錄下多出一個Hello.js文件赵辕。
4.在bin目錄下既绩，新建index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Word</title>
</head>
<body>
<script src="Hello.js"></script>
</body>
</html>
現(xiàn)在，可以運行index.html文件看一下頁面了还惠。
二饲握、ts開發(fā)node.js
typescript 開發(fā)node 可行么？ 會存在什么問題
TypeScript在node項目中的實踐
【學習筆記】在VSCode上配置typescript + nodejs 開發(fā)環(huán)境
這里部分參考本文第一部分的helloworld內(nèi)容
1.新建ts-node-starter文件夾蚕键，命令行運行tsc --init,然后使用code .打開vs code救欧。tsc:構(gòu)建配置一下，打開tasks.json
2.tsconfig.json把sourceMap打開
3.debug配置锣光，打開launch.json笆怠。這里可以參考node js調(diào)試相關(guān)
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程序",
"program": "${workspaceRoot}/app.ts"
}
]
4.新建app.ts
import { createServer, Server, IncomingMessage, ServerResponse } from 'http';
// 明確類型麻煩些，卻會獲得非常詳細的語法提示
const server: Server = createServer((req: IncomingMessage, res: ServerResponse) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
res.end("Hello World\n");
})
const hostname: string = "127.0.0.1";
const port: number = 3000;
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
})
關(guān)于import誊爹，還是require蹬刷，參考 Typescript import/as vs import/require? [duplicate]
參考在nodeJs的Express框架下用TypeScript編寫router路由出現(xiàn)import關(guān)鍵字錯誤的解決方案：
其實這里只是import變成了var而已，但其意義在于在ts代碼中采用import載入的模塊可以享用強類型檢查频丘，以及代碼自動補全办成，預編譯檢查等。
5.編譯成js后搂漠，可以斷點調(diào)試了迂卢。
6.代碼提示typings
參考代碼提示Typings，這里區(qū)別有點大，import { createServer, Server, IncomingMessage, ServerResponse } from 'http';都認不出來而克。不像寫JS的時候靶壮，直接typings init就行了。
E:\node\ts-node-starter> typings install node --ambient --save
typings ERR! deprecated The "ambient" flag
is deprecated. Please use "global" instead
E:\node\ts-node-starter> typings install node --global --save
沒辦法拍摇，只能把node安裝進來亮钦。參考使用TypeScript編寫node項目的疑惑。這時可以看到typings.json變成這樣：
{
"dependencies": {},
"globalDependencies": {
"node": "registry:dt/node#7.0.0+20170322231424"
}
}
這時候再寫import * as http from 'http';就可以進入代碼提示了充活。
7.@types
參考在 Typescript 2.0 中使用 @types 類型定義
使用Typescript開發(fā)node.js項目——簡單的環(huán)境配置
在 Typescript 2.0 之后，TypeScript 將會默認的查看 ./node_modules/@types 文件夾蜡娶，自動從這里來獲取模塊的類型定義混卵，當然了，你需要獨立安裝這個類型定義窖张。比如幕随，你希望 core.js 的類型定義，那么宿接，你需要安裝這個庫的定義庫赘淮。
npm install --save @types/core-js
與我們安裝一個普通的庫沒有區(qū)別。當然了睦霎，常用的 jquery 也有梢卸。Microsoft 在 The Future of Declaration Files 介紹了 TypeScript 的這個新特性。
在項目目錄下執(zhí)行安裝:npm install --save-dev @types/node就可以獲得有關(guān)node.js v6.x的API的類型說明文件副女。之后蛤高，就可以順利的導入需要的模塊了:import * as http from 'http';完成之后，不僅可以正常的使用http模塊中的方法碑幅，也可以在vscode中獲得相應的代碼提示戴陡。
對于內(nèi)建模塊，安裝一個@types/node模塊可以整體解決模塊的聲明文件問題沟涨。那么恤批，對于浩如煙海的第三方模塊，該怎么辦呢裹赴？官方和社區(qū)中也提供了查找和安裝的渠道：
