angularjs2.0剛發布, typescript2.0也剛發布, 于2016.9.29記錄.

參考文檔：https://angular.cn/docs/ts/latest/quickstart.html

win7環境

1. 下載并安裝 Visual Studio Code, 以下簡稱 vsc

2. 安裝 node, 會自動安裝 npm, 下載地址: https://nodejs.org/en/download/

3. 命令行執行: npm install -g typescript 安裝 typescript 編譯器

4. 打開 vsc , 文件/首選項/用戶設置, 設置 setting.json :

// 將設置放入此文件中以覆蓋默認設置
{

   //啟用 typescript 2.0 編譯器
   "typescript.tsdk": "C:/Users/[用戶名]/AppData/Roaming/npm/node_modules/typescript/lib",

   // ts 項目, 隱藏 .js 和 .js.map 文件
   "files.exclude": {
        "node_modules": true,
        "**/*.js": { "when": "$(basename).ts"},
        "**/*.js.map": true
    }
}

5. 打開一個ts項目, 從這里下載: https://github.com/angular/quickstart/blob/master/README.md

按 ctrl+shift+b 編譯項目時, 提示設置 task.json

{
"version": "0.1.0",
"command": "cmd",
"isShellCommand": true,
"showOutput": "always",
"args": ["/C npm start"]
}

6. 至此，按 ctrl+shift+b 可以編譯ts項目，并啟動一個瀏覽器打開網站首頁。

命令行鍵入

node -v 可查看本機安裝的 node 版本號, 應該是 6.6+

npm -v 可查看本機安裝的 npm 版本號, 應該是 3.0+

tsc -v 可查看本機安裝的 typescript 版本號, 應該是 2.0+

npm start 也可從命令行啟動項目

或許還應該下載類型頭文件, npm i -g typings, 我暫未安裝

我設置了 vsc 文件/首選項/文件圖標主題 為seti 主題, 以顯示文件的圖標

我還安裝了一系列的vsc插件, 尤其是 visual studio code settings sync, 配置 gist, 用于同步 vsc 的設置項

安裝的插件有:

vscode-tslint
Angular 2 TypeScript Snippets for VS Code
Visual Studio Code HTML Snippets
HTML CSS Class Completion
js-beautify for VS Code
Auto Close Tag
Auto Rename Tag
VSCode Log Output Colorizer
Document This
Code Metrics - Visual Studio Code Extension
AutoImport

Visual Studio Code Settings Sync
VS Code - Debugger for Chrome
VSCode TODO Parser Extension
Bookmarks.
EditorConfig for Visual Studio Code
Node npm Script Running for Visual Studio Code
FTP-Sync extension for VS Code
Material Theme
Gulp - VS Code
CodeBing