資訊專欄INFORMATION COLUMN
摘要：簡介本文將簡述如何使用開發工具來搭建一套的開發環境，主要的目的是落地留痕，同時也希望能對一些剛入門的小伙伴有一定的參考價值。安德斯海爾斯伯格，的首席架構師，已工作于的開發。為大型應用之開發而設計，可以編譯成來確保兼容性。
簡介
本文將簡述如何使用vscode [Visual Studio Code]開發工具來搭建一套TypeScript的開發環境，主要的目的是落地留痕，同時也希望能對一些剛入門的小伙伴有一定的參考價值。[注意：Windows，Linux，OS X在操作上基本上一致，只是工具的安裝有所不同，這里僅以Windows平臺作為本次教程的演示環境]
TypeScript是一種由微軟開發的自由和開源的編程語言，通常我們認為其是JavaScript的一個超集，且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，已工作于TypeScript的開發。
TypeScript為大型應用之開發而設計，可以編譯成javascript來確保兼容性。
Node.js Node.js - Official Site
Visual Studio Code Visual Studio Code - Official Site
安裝Node.js一方面提供一個開發的Runtime；另一方面提供的npm工具，我們可以利用這個工具來安裝TypeScript。
下載Node.js安裝包首先按照準備工作里面提供的鏈接下載對應平臺的Node.js安裝包
安裝Node.js，安裝過程基本上是下一步，即可完成，然后在CMD中運行如下命令：node -v 來查詢當前node.js的版本號，然后輸出如圖所示的結果就表示node.js安裝成功，接著可以輸入命令：npm -v 來查詢當前npm工具的版本號[可能需要時間稍長點]，便會輸出如圖所示的結果表示npm工具可用
由于npm安裝工具默認會跑到C盤[因為npmrc文件中默認的設置為：prefix=${APPDATA}
pm]，這樣有時可能會因為系統權限的問題，導致不能正常成功的安裝某些工具，那么我們可以先將npm安裝的全局路徑自定設置一下，比如：我們可以在nodejs的目錄下[即你的node.js安裝后的根目錄]新建兩個目錄：node_global，node_cache，然后找到nodejs目錄下的node_modules/npm目錄下名為npmrc 或者 .npmrc文件，[為安全，我們可以先將該文件copy一個副本出來進行備份]使用文本編輯器打開，修改并新增如下：prefix 和 cache 分別對應之前新建的目錄node_global 和 node_cahce
通過步驟3設置后，后續在安裝工具的時候，比如安裝TypeScript，最終會安裝到node_global中，所以為了后續使用工具命令行，我們可以配置一個環境變量：
首先新建一個NODE_PATH -> NODE_PATH=D:EasBuilding
odejs
ode_global，然后在Path下新增%NODE_PATH%
[這里只是為了說明問題，可不用進行這一步] 打開CMD，運行命令：tsc -v，這里不能正常像是版本號，這是由于這里還沒有安裝typescript，所以我們接下來就先安裝TypeScript Compiler
安裝TypeScript 安裝TypeScript Compiler在前面安裝好Node.js后，我們可以直接使用npm工具來安裝TypeScript，這個TypeScript的Package其實也是一個Compiler，我們可以通過這個Complier將typescript編譯成javascript。打開命令提示符CMD(或其他終端Terminal)，輸入指令：npm install -g typescript，稍等片刻即可完成TypeScript Compiler的安裝。
如上圖所示，下載的TypeScript版本為1.8.10，在官網，該版本為最新穩定版，所以不需要更新，如果我們下載的版本小于這個版本，我們可以使用如下命令來進行更新：npm update -g typescript
首先按照準備工作里面提供的鏈接下載對應平臺的vscode安裝包
這里我先在桌面上新建一個DemoModules的目錄來存放一些我的Demo Projects，然后選中DemoModules右鍵使用 vscode 打開或者打開CMD，切換到DemoModules下，然后輸入命令：code . 既可以使用 vscode 打開DemoModules目錄。
接著，在該目錄下新建一個名為TS_DEMO的目錄：
在TS_DEMO下新建一個名為greeter.ts的文件，并輸入如下代碼：
我們發現這就是一個簡單的javascript code，那么我繼續改造一下這個代碼，弄得稍微復雜點，加入接口interface和類class：
繼續在該目錄下新建一個index.html的文件，并在body中引入greeter.js腳本：
首先在TS_DEMO目錄下創建一個名為tsconfig.json的文件，可以手動創建該文件，并輸入如下代碼：
也可以使用命令自動創建這個配置文件，CMD中切換到TS_DEMO目錄，然后輸入命令：tsc -init 即可自動創建
接下來我們繼續輸入編譯命令，編譯greeter.ts；輸入指令：tsc -w greeter.ts, 其中-w是watch監控的意思，當typescript文件內容發生改變時會自動進行編譯。
我們可以看到，TS_DEMO目錄下多了一個.js后綴的同名文件，這就是typescript編譯后的javascript文件。
同時我們還可以更改tsconfig.json中的target屬性，調整編譯出來的javascript版本
最后我們將index.html用Chrome或者Firefox打開看看效果：
http://www.open-open.com/lib/...
https://www.typescriptlang.or...
https://code.visualstudio.com...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90833.html
摘要：分享嘉賓是來自微軟云計算事業部的高級軟件開發工程師劉鵬。是微軟開源的一款開發工具，它針對做了許多編譯和命令上的支持。今天主要向大家介紹一下微軟去年推出的一個，以及對的一些支持。年他加入微軟，從事開發的工作。 本文是數人云分布式架構的開源組件大選Meetup的實錄分享。分享嘉賓是來自微軟云計算事業部的高級軟件開發工程師劉鵬。Visual Studio Code是微軟開源的一款開發工具，它...
摘要：在這個編輯器中，和是其中排名靠前的兩個。是一個免費的輕量級編輯器和，用于和開發。對于免費的代碼編輯器來說，是一個很好的選擇。可以安裝兩個命令行實用程序，用于從啟動編輯器，用于管理的軟件包。 對于JavaScript程序員來說，目前有很多很棒的工具可供選擇。本文將會討論10個優秀的支持javascript，HTML5和CSS開發，并且可以使用Markdown進行文檔編寫的文本編輯器。為什...
摘要：菜鳥教程框架中文手冊入門目標使用搭建通過對數據增刪查改沒了純粹占行用的拜 后端API入門學習指北 了解一下一下概念. RESTful API標準] 所有的API都遵循[RESTful API標準]. 建議大家都簡單了解一下HTTP協議和RESTful API相關資料. 阮一峰:理解RESTful架構 阮一峰:RESTful API 設計指南 RESTful API指南 依賴注入 D...
摘要：菜鳥教程框架中文手冊入門目標使用搭建通過對數據增刪查改沒了純粹占行用的拜 后端API入門學習指北 了解一下一下概念. RESTful API標準] 所有的API都遵循[RESTful API標準]. 建議大家都簡單了解一下HTTP協議和RESTful API相關資料. 阮一峰:理解RESTful架構 阮一峰:RESTful API 設計指南 RESTful API指南 依賴注入 D...
摘要：菜鳥教程框架中文手冊入門目標使用搭建通過對數據增刪查改沒了純粹占行用的拜 后端API入門學習指北 了解一下一下概念. RESTful API標準] 所有的API都遵循[RESTful API標準]. 建議大家都簡單了解一下HTTP協議和RESTful API相關資料. 阮一峰:理解RESTful架構 阮一峰:RESTful API 設計指南 RESTful API指南 依賴注入 D...
閱讀 2406·2021-11-18 10:02
閱讀 1922·2021-10-13 09:40
閱讀 2999·2021-09-07 10:07
閱讀 2106·2021-09-04 16:48
閱讀 1005·2019-08-30 13:18
閱讀 2452·2019-08-29 14:03
閱讀 2922·2019-08-29 12:54
閱讀 3155·2019-08-26 11:41
