A. 如何評價 TypeScript
之前用egret寫游戲的時候，去學了下typescript，作為javascript的超集，引入了class的寫法，並且定義變數和方法的時候要聲明數據類型，這個確實給javascript注入了一些活力，尤其是webstorm這種神IDE，支持了typescript，但是在學習成本上，讓一些沒有接觸過後台語言的前端們，形成一種思想可能會有些吃力。
B. TypeScript 和 JavaScript 的區別
TypeScript 總體來講最重要的在於 Scalable (不過一些最佳實踐和規范還有待完善). 如果只是寫個兩三千行的腳本 TypeScript 並不是那麼重, 但如果是五六千行, 甚至是數萬行, TypeScript 的優勢就能發揮出來了.至於 TypeScript 是 Scalable 的原因, 其實也很簡單, 靜態類型檢查, 代碼重構和語言服務. 這些都是 JavaScript 的弱勢. 項目大了, 很多時候自己的代碼怎麼用都記不清楚, 當然第三發的類庫就不用說了. 用了 TypeScript, 可以看清楚每一個對象的屬性, 方法的參數等, 便利很多. 一些腦殘的 Typo 也無影遁形.比如一個團隊里, 你負責一個相對底層的庫, 那麼就不大需要再單獨寫一個詳細的文檔解釋每一個方法屬性, 直接在 TypeScript 里注釋上就可以了. (JS 也能做, 但不準確, 還是得依賴文檔.)再比如使用第三方庫, 很多流行的庫都能在 DefinitelyTyped 上找到定義文件, 同樣可以方便地查看 API 而不用稍微拿不準就去查文檔.重構就不說了.同樣的這些個特性也適用於 Dart, 但是個人來講更喜歡 TypeScript 的風格, 然後我用的也是 Visual Studio.目前我已經基本上把 TypeScript 作為生產工具來使用了, 新的項目基本都用 TypeScript 開發, 爽太多! 再也不怕改了哪兒忘了哪兒了, 而且到處都有準確的提示! (雖然現在的編輯器還有待提高, 但這個已經不能阻止人類使用 TypeScript 了.)當然就像之前提到的, 跟你的項目規模有關, 我的個人項目一般代碼是在 5k 到 2w 行, 以 Web App 為主.
C. 怎麼用typescript做網頁
TypeScript項目和tsconfig.json
首先安裝TypeScript編譯器
npm i -g typescript
進入項目目錄，新建一個 hello.ts
function sayHello(name: string) {
return 'Hello, ' + name;
}
let myName = 'Cheng Wang';
console.log(sayHello(myName));
然後執行
tsc hello.ts
編譯器會生成 hello.js
function sayHello(name) {
return 'Hello, ' + name;
}
var myName = 'Cheng Wang';
console.log(sayHello(myName));
為了方便編譯器和編輯器識別TypeScript項目，TypeScript約定了tsconfig.json文件來存儲項目配置，如果運行 tsc 時不指定輸入文件，編譯器則會查找項目目錄中的這個文件，如果找不到則會依次向父級目錄查找。比如這樣：
{
"compilerOptions": {
"outFile": "dist/app.js",
"sourceMap": true
},
"files": [
"src/app.ts"
]
}
直接運行 tsc ，會自動把 src/app.ts 編譯到 dist/app.js 。
關於這個配置文件的更多選項，可以看 官方文檔 。
使用模塊
TypeScript中，模塊的使用方法與ES6一致。
src/moles/utilities.ts ：
function getUrlParam(key: string) {
const REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
let result: string[] = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
} else {
return null;
}
}
export { getUrlParam }
src/app.ts ：
import { getUrlParam } from './moles/utilities';
let deviceType: string = getUrlParam('deviceType');
console.log(deviceType);
編譯後的app.js（TypeScript編譯器在輸出單個文件時，只能使用AMD或System模塊規范）：
define("moles/utilities", ["require", "exports"], function (require, exports) {
"use strict";
function getUrlParam(key) {
var REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
var result = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
}
else {
return null;
}
}
exports.getUrlParam = getUrlParam;
});
define("app", ["require", "exports", "moles/utilities"], function (require, exports, utilities_1) {
"use strict";
var deviceType = utilities_1.getUrlParam('deviceType');
console.log(deviceType);
});
使用NPM庫
我們開發JS程序的時候，要用到NPM上的第三方的庫，比如jQuery、Lodash等，但是絕大多數庫都是用JS寫的，沒有類型提示，我們也不能在在代碼中將這些庫作為模塊引入。
比如我們需要在項目中使用Lodash：
npm i --save lodash
然後在代碼中引入：
import * as _ from 'lodash';
console.log(_.camelCase('helloworld'))
運行 tsc 則報錯：
src/app.ts(1,20): error TS2307: Cannot find mole 'lodash'.
如果想在TypeScript代碼中直接使用npm上的JS庫，需要藉助Typings這個工具。
Typings也是一個包管理器，它管理的是JS代碼「定義文件」，用Typings安裝相應的定義文件後，編輯器和編譯器就可以去node_moles目錄中找到相應的JS庫，並編譯到最終的JS代碼中。
先安裝Typings工具：
npm i -g typings
然後安裝Lodash的定義文件：
typings install --save lodash
Typings會去NPM、Bower上尋找庫的作者加的定義文件，但是有的庫如jQuery並沒有官方的定義文件，則需要從社區維護的 DefinitelyTyped 目錄下安裝：
typings install --save --ambient jquery
然後再tsconfig.json中的files配置中加入一條：
"files": [
"src/app.ts"，
"typings/main.d.ts"
]
此時編譯就不會提示找不到模塊了。
安裝好定義文件之後，如果使用Visual Studio Code等對TypeScript支持較好的編輯器，則會提供更加強大的代碼提示功能。
使用Webpack構建
TypeScript編譯器支持很多模塊組織規范，如ES6、commonJS、AMD等，但是如果想要將多個ts文件打包成一個文件，TypeScript只支持AMD和System，對於瀏覽器應用來說，還需要引入第三方的模塊載入器。如果使用Webpack配合TypeScript的loader，則可以方便地構建瀏覽器可以運行的JS代碼。
首先安裝Webpack和ts-loader：
npm i webpack -g
npm i ts-loader --save-dev
然後配置項目目錄中的webpack.config.js:
mole.exports = {
entry: './src/app.ts',
output: {
filename: 'app.js',
path: './dist'
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},
mole: {
loaders: [
{ test: //.ts$/, loader: 'ts-loader' }
]
}
}
然後就可以通過運行 webpack 來構建了，構建生成的代碼自帶了webpack的模塊載入器，可以直接在瀏覽器中運行。
D. TypeScript是怎麼提高JavaScript編程效果的
TypeScript是由微軟開發的一種可快速入門的開源的編程語言，是JavaScript的一個超集，且向這個語言添加了可選的靜態類型和基於類的面向對象編程。能夠幫助web前端開發人員編出更出色的JavaScript代碼、搞定規模可觀的JavaScript項目並為ECMAScript6的來臨做好准備。
JavaScript是一款通用腳本語言，植根於開發工具的核心深處，同時在Node.js等伺服器端實現方案中也有所體現。除此之外，JavaScript還是微軟開發技術方案的關鍵組成部分，若想對office進行擴展，不使用JavaScript是不行的。
雖然JavaScript已發展得非常強悍了，但其離完美還有一大段距離，特別是在構建包含大量客戶端代碼的web應用時，JavaScript的不足之處就非常明顯。這個時候，配合TypeScript使用，JavaScript的缺陷就可完美解決。只需在TypeScript當中編寫代碼，而後將其交付至編譯器，即可將所開發代碼轉換為能夠運行在伺服器端，又可以由客戶端中的HTML進行調用的JavaScript形式方案。
TypeScript還將大量ECMAScript6功能加入到了JavaScript當中，具體包括類與模塊，並嘗試將這兩種本是同根生的語言加以進一步融合，從而滿足ECMAScript6的標准化方法要求。通過這種方式，大家可以利用TypeScript開發出能夠為ECMAScript6所接納的代碼，同時充分發揮TypeScript的靜態類型優勢以提升代碼安全性水平。
TypeScript允許我們面向變數進行類型聲明，從而確保A始終屬於整數而C始終屬於字元串。雖然TyperScript的類型安全性並不像Fortran那麼全面，但其仍然能夠定義數字與字元串，並利用Boolean類型顯著改善代碼調試機制。除此之外，TyperScript還提供選項以實現類型推斷，從而降低發生錯誤的可能性如果大家的代碼為兩個數字相加，那麼TyperScript會認定其結果始終為數字。
通過使用TypeScript，開發者也可以將類型應用至數組中，或利用enums為特定變數名稱設置值。如果不確定自己可能使用哪種類型，則可以將變數設定為any，在這種情況下TypeScript不會推斷其具體類型、大家也不會因此遇到錯誤或者警告。TypeScript類型可以自行選擇，因此也無需在編譯或者運行之前，首先向現有代碼添加各種類型，這將有效簡化現有代碼的相關遷移工作。
需要注意的是，現有JavaScript代碼將成為TypeScript應用程序的一部分加以運行。而如果將代碼遷移到ECMAScript6或者TypeScript語法形式下，大家即可享受到TypeScript的各種功能優勢。而如果我們使用具備TypeScript識別能力的工具，則可以擁有面向VisualStudioIntelliSense的支持能力——其能夠幫助我們對函數調用中的類型進行管理。除此之外，也可利用TypeScript聲明文件向各類常用庫及服務中快速添加類型支持，例如jQuery庫。
擁有這樣一款類型化且近似於JavaScript的語言能夠給類使用與模塊構建帶來顯著簡化（與AngularJS當中的處理方式非常相近）。類型的存在能夠確保某個警告類中的所有實例都通過字元串進行調用，這將幫助我們輕松構建起更理想的構造函數。大家可以將這種類型化構造函數調用視為一種契約，負責定義兩段代碼之間的相互作用——並幫助我們更輕松地在不同應用程序之間重復使用同一函數。
在函數調用當中定義類型正是創建介面結構的關鍵所在，能夠使我們的代碼更具面向對象特性。大家可以將函數元素明確定義為介面，並選擇在函數當中使用更具描述性的名稱，同時又不會影響到進行調用檢查時向IntelliSense等函數所必需的工具發出通知。
以這種方式定義類型與介面，能夠讓多位開發人員輕松對大型JavaScript項目加以管理。而在函數與類設計中秉持「介面至上」的契約化方法，則能夠幫助大家在對應用程序中特定部分進行優化時不至於影響到其餘部分，或者從其他開發者手中借用某種介面定義並直接運用到其它實現方案當中。這種方式允許我們以更為高效的方式使用諸如Git以及GitHub等工具，從而在一套持續開發模型當中輕松管理多個代碼分支。
如果使用的是Java語言或者C#語言，那麼對TypeScript（以及ECMAScript6）的類實現機制一定不會感到陌生。大家可以在構造函數之內創建類，從而對方法中所使用的類型進行定義，最終利用類似的來處理各種內部對象。大家也可以利用繼承、添加功能與重寫方法等方式對類進行擴展。而更值得注意的是，TypeScript還支持常見於函數與介面當中的泛型——其能夠幫助大家交付可重復使用的函數。
一旦掌握了TypeScript處理類與函數的方式，就可以著手將其組織在模塊當中，在這里類與函數能夠被拆分至多個文件當中。這顯然是一種非常便捷的代碼組織方案——舉例來說，我們可以利用幾個文件來處理購物車當中的不同函數。在此之後，大家可以對各個子模塊進行分別更新，從而在特定函數中利用調整歸零機制改善其性能水平，同時又不至於對其它函數造成影響。具備聲明文件的JavaScript庫也可以作為模塊使用，因此大家能夠在TypeScript應用程序當中充分發揮由此帶來的諸多優勢。
在大型web應用程序的開發中，對JavaScript的使用，以TypeScript作為切入點，將大大提高我們開發的效率。TypeScript不僅能夠幫助我們在具備充分掌控能力且遵循可重復使用方針的前提下完成編碼工作，同時也能夠擁有一條通往ECMAScript6的理想路徑。相信今後web前端開發，甚至整個web端所有網站的開發，都將逐步使用到TypeScript，以提高JavaScript的編程效果。
E. 如何修改webstome上typescript的編譯器
兩種方法：
安裝最新的webstorm，集成的是2.3.1的Typescript
自己單獨下好最新的Typescript，點那個edit，選custom directory 瀏覽到你下好的庫，點確定就ok了
F. 如何使用TypeScript和Webpack編寫網頁應用
這些都是前端的工具並不能直接編寫東西，webpack的話是一個前端的自動化構建的工具只能是提高團隊合作和開發效率
G. typescript 怎樣直接編譯為瀏覽器中可執行的代碼
使用webpack等工具轉換成瀏覽器支持的模式
H. webstorm怎麼安裝typescript
webstorm2016是一款支持遠程Node.js應用調試；：WebStorm 2016.1整體性能和功能上都有較大改進，更好的重構選項，更好的TypeScript支持，改進對AngularJS的支持，新增支持Vagrant和SSH控制台。
I. 如何使用webstorm和typescript編寫nodejs
、下載安裝Node.js，下載地址：https://nodejs.org/en/download/
2、下載安裝webstorm2016.1.1;
3、使用Node的npm命令安裝TypeScript編譯器：(npm安裝不順利的話可以使用 https://npm.taobao.org);
ctrl+R，輸入cmd回車進入；
找到node.js的安裝目錄：輸入node.js安裝所在的磁碟，回車進入；cd 輸入node.js的安裝目錄路徑，如下圖：
執行「npm install typescripot -g」進行安裝
4、打開webStorm,為TypeScript文件更改編譯設置，File->Setting->File Watchers->TypeScript
選路徑那裡安裝好typescript後應該會自動填寫Program項的,自己選擇的話有時候會找不到路徑;重新點擊設置進去添加就有了
轉自:http://blog.chinaunix.NET/uid-30198739-id-5739410.html
頂
0
踩
0
上一篇Echarts 圖標生成漸變色方法
下一篇AngularJS及Vue 項目中實現按需載入模塊
我的同類文章
Javascript（42）
•Javascript函數節流2017-03-13閱讀33
•Node.js 的本質2016-11-26閱讀135
•Vue 固定頭 固定列 點擊表頭可排序 表格組件2016-11-25閱讀1118
•AngularJS及Vue 項目中實現按需載入模塊2016-08-24閱讀1338
•JS閉包之深刻理解2016-05-19閱讀99
•nodeJS 返回 jsonp2017-02-08閱讀70
•2016.11 MAC系統下安裝mongodb 配合nodeJS簡單使用mongodb2016-11-26閱讀1343
•使用Chrome 瀏覽器調試移動端網頁 chrome://inspect/#devices2016-09-05閱讀7184
•Echarts 圖標生成漸變色方法2016-07-03閱讀3350
•JS中的call()和apply()方法2016-04-19閱讀88
更多文章
參考知識庫
.NET知識庫
3843關注|839收錄
Node.js知識庫
4751關注|578收錄
猜你在找
新物聯網開發框架：node.js+WRTnode
Node.js 核心技術 Stream (第二版)
征服Node.js 7.x視頻課程（3）：基礎知識
Node.js進階教程第一步(基礎篇)
征服Node.js 7.x視頻課程（2）：互動式運行環境：REPL
轉前端開發利器webStorm 30配置使用
JetBrains使用技能分享徵集大賽優秀作品用webstorm開發NodeJS項目
實戰使用Axure設計App使用WebStorm開發2 – 構建頁面架構
第3篇TypeScript介面使用
WebStorm 2016 最新安裝指南 破解 漢化 字體設置
關閉