typescript編譯es5
1. ES2015 和 TypeScript 的區別
1、TypeScript是ES2015（即ES6）的超集，ES6是ES5的改進，如下圖：
2、TypeScript 相對ES2015（即ES6），的主要改進是，有一個類型系統
它有助於編寫代碼，因為它可以在編譯時發現錯誤
它有助於在你閱讀代碼的時候，理解其中的意圖
2. 零基礎編程語言，初學選Typescript應該從哪裡開始學習呢
TypeScript 是一種由微軟開發的自由和開源的編程語言，它是javaScript的一個超集，擴展了JavaScript的語法。TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型註解提供編譯時的靜態類型檢查。TypeScript 可處理已有的 JavaScript 代碼，並只對其中的 TypeScript 代碼進行編譯。
3. 如何學慣用Typescript寫Reactjs
首先掃盲一下，先從搭建環境開始：
1.安裝node，因為ts的編譯器是js/ts寫的；
安裝node後同時獲得npm命令，這是nodejs世界裡的包管理器（也可以看作node的app商店）；
2.安裝vs 2015或者vs code，當然這不是必須的，但是這里強烈推薦寫ts的工具，vs第一，vsc第二；
3.vs自帶了TypeScript（vs2012+，vs2015update1自帶了ts1.7）,最新版本的typescript for vs去官網下載即可, 或者如果不依賴vs（比如mac環境）, 可以用命令行裝ts編譯器
npm i -g typescript@next
4. 安裝了ts後, 就會有2個命令可用：tsc和tsd, tsc用來編譯TypeScript代碼, tsd用來下載第三方js類庫的ts定義文件(或者叫頭文件)，熟練使用tsd，工作效率提升，因為減少了80%查文檔的時間，所以寫ts可以說是jser打通了任督二脈，上手任何新的開發環境都很快；
有網友指正tsd工具不是安裝ts的時候自帶的，需要另外安裝，裝太久不記得了。
npm install tsd -g
5. 命令行下載react的ts頭文件,
tsd install react-global --save
注意上面之所以寫 react-global 而不是react， 因為我們接下來使用比較原始的寫法，直接把React當作全局對象使用， 而不作為es6模塊（必須用import引入），不需要Babel編譯也不需要webpack打包；
上面執行的tsd命令下載了ReactJS類庫的頭文件, 下面用tsc命令創建一個ts項目配置文件
tsc --init
命令創建了tsconfig.json配置文件, 打開該文件
增加"jsx": "react", 就是自動把tsx變成最終的js, 而不是jsx
把"outDir": "built", 這行去掉,這樣編譯的文件就會在當前目錄輸出
"target": "es5", 這里es3改成es5,
"watch": true 是否監聽文件修改 如果你用的是vs,這行不重要
6.下載reactjs文件，如果沒有安裝bower命令，可以手動去官網下載react類庫
bower install --save react
7.以上環境配置好了, 開始寫代碼:
創建一個demo.tsx文件(注意這里是tsx, 不是ts也不是jsx)
創建一個demo.html, 添加文件的引用
<!doctype html>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
</body>
</html>
8. demo.tsx 寫代碼
class MyClass extends React.Component<any, any> {
render() {
return <h1>hello {this.props.name}</h1>;
}
}
document.addEventListener('DOMContentLoaded', function () {
ReactDOM.render(<MyClass name="Tom" />, document.body);
});
9. 如果保存了demo.tsx後, 沒有在目錄下發現自動編譯了demo.js, 那麼可能是vs沒配置好,如果你沒有裝vs或者vsc,沒關系,在當前文件夾下命令行運行
tsc
tsc命令會自動根據tsconfig.json裡面配置的情況, 自動幫你把代碼編譯成js, 這是編譯後的js文件
10. 打開demo.html可以看到效果了;
11. 至於題主說怎麼學習, 其實跟JS完全沒兩樣, 上面demo.tsx的代碼, 跟react官網的es6寫法一模一樣多了<any,any> 這兩個prop和states類型約束, 僅此而已;
12. 下班, 有空再寫;
－－－－－－時間分割－－－－－－
13、繼續寫，對1-12進行潤色，轉入傳教模式；
妖獸啦，這里14-15的文字怎麼不不見了，知乎編輯器bug好多。
不記得寫了什麼，大概說的是 工廠方法創建子類和用class直接繼承的差異。
React.createClass 和 Backbone.View.extend 等都是工廠方法創建子類
文字斷了。。。。
以上的代碼，工廠方法在創建子類的同時，做了一些初始化的動作，這與單純的原型繼承不同，所以在使用class方式進行子類繼承，這樣的寫法是無效的；
class MyView extends React.Component {
render() {
return <h1>hello {this.state.name}</h1>; //會拋異常,因為state是null
}
//不起作用的
getInitialState:(){
return {name:'',age:20};
}
}
需要改成如下方式，下面是官網給出的方案（這里TypeScript和ES6情況是一樣的）
class MyView extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
name: '',
};
}
render() {
return <h1>hello {this.state.name}</h1>;
}
}
16、當組件化遇到強類型：
從前寫JS組件，一般復用性比較差，基本寫完就仍，原因如下：
1）暴露了太多的Dom結構以及別的實現細節；
2）命名挫，缺乏可記憶性，本身編程中變數和方法的命名對於碼農來說就是天坑；
3）JS天生缺乏私有和公共成員的約束，不加註釋根本不知道怎麼使用該類庫/組件；
React解決了把dom標簽暴露出去的問題，TS則解決了語言層面的問題，並提供了強大的重構能力，你根本不需要記住組件的API，因為工具會列出來；
17、強類型的ts有IDE的代碼提示，但是面對各種mvvm的字元串模版組裝，卻無用武之地，以下是典型的mvvm數據綁定和有IDE支持的JSX數據組裝在開發體驗上的區別；
模板字元串的綁定里，工具無法檢查出問題，只能在運行時拋出異常，而jsx則可以提示拼寫錯誤。
18、關於生產力再拋一個概念：無障礙編程；
我們平時的開發工作，有不少時間花在查API文檔、調試代碼、查字典（給變數命名），需要不停地切換任務窗口……
上面的例子比較小，實際開發中各種JSON對象可能有10來個屬性，且結構層層嵌套，不一邊查文檔一邊抓包，根本無法完成開發；
如果項目是並行開發的，文檔都還沒定義出來（但是產品原型已經有了，甚至html頁面都已經切好），如何快速完成前端部分的開發工作？
業界常用方法是使用mock數據（先造假數據），下面介紹一種更簡單的辦法（為了舉例先虛擬一個需求場景 —— 一個留言板html的組裝）；
別忘了JS變數是可以用中文的，好吧不用查字典了，先把需求完成再說，在組裝html的過程中TS+JSX發揮了巨大的優勢，三下五除二就把組裝界面的代碼寫好了，不用調試我可以確定沒有錯誤的；
過了些天，WebAPI的數據結構定義出來了，可以著手進行代碼重構（或者說把查字典的工作集中完成），利用開發工具的重構功能進行變數改名：
最後項目完成的時候，是把所有類型的定義都挪到獨立的描述文件里(比如叫做webapi.d.ts)，原來的interface可以改成type關鍵字(類型別名)：
以上，這個開發過程中基本沒有一邊查文檔、一邊查字典，效率的提升是明顯的。
4. typescript 怎樣直接編譯為瀏覽器中可執行的代碼
使用webpack等工具轉換成瀏覽器支持的模式
5. 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的編程效果。
6. 如何編譯TypeScript
1）通過 File -> New-Project 新建項目
2）輸入必要信息，點擊 Ok 按鈕，創建後項目模板如下
3）app.js 依賴於 app.ts，默認的 app.ts 文件包含類和構造函數等等
4）TypeScript 文件將會被編譯為 JavaScript (app.js)，下面是編譯後的 JavaScript 代碼
5）在頁面中引用 JavaScript
6）構建或者重新構建項目時，你將看到提示是否重新編譯 TypeScript 的信息
7）在 proj 文件中有如下內容將會被自動編譯
8）運行此應用時會在頁面上顯示當前的日期和時間
7. 這段javascript代碼的typescript聲明文件怎麼寫
1.安裝node，因為ts的編譯器是js/ts寫的；安裝node後同時獲得npm命令，這是nodejs世界裡的包管理器（也可以看作node的app商店）；2.安裝vs2015或者vscode，當然這不是必須的，但是這里強烈推薦寫ts的工具，vs第一，vsc第二；3.vs自帶了TypeScript（vs2012+，vs2015update1自帶了ts1.7）,最新版本的typescriptforvs去官網下載即可,或者如果不依賴vs（比如mac環境）,可以用命令行裝ts編譯器npmi-gtypescript@next4.安裝了ts後,就會有2個命令可用：tsc和tsd,tsc用來編譯TypeScript代碼,tsd用來下載第三方js類庫的ts定義文件(或者叫頭文件)，熟練使用tsd，工作效率提升，因為減少了80%查文檔的時間，所以寫ts可以說是jser打通了任督二脈，上手任何新的開發環境都很快；5.命令行下載react的ts頭文件,tsdinstallreact-global--save注意上面之所以寫react-global而不是react，因為我們接下來使用比較原始的寫法，直接把React當作全局對象使用，而不作為es6模塊（必須用import引入），不需要Babel編譯也不需要webpack打包；上面執行的tsd命令下載了ReactJS類庫的頭文件,下面用tsc命令創建一個ts項目配置文件tsc--init命令創建了tsconfig.json配置文件,打開該文件增加"jsx":"react",就是自動把tsx變成最終的js,而不是jsx把"outDir":"built",這行去掉,這樣編譯的文件就會在當前目錄輸出"target":"es5",這里es3改成es5,"watch":true是否監聽文件修改如果你用的是vs,這行不重要6.下載reactjs文件，如果沒有安裝bower命令，可以手動去官網下載react類庫bowerinstall--savereact7.以上環境配置好了,開始寫代碼:創建一個demo.tsx文件(注意這里是tsx,不是ts也不是jsx)創建一個demo.html,添加文件的引用8.demo.tsx寫代碼classMyClassextendsReact.Component{render(){returnhello{this.props.name};}}document.addEventListener('DOMContentLoaded',function(){ReactDOM.render(,document.body);});9.如果保存了demo.tsx後,沒有在目錄下發現自動編譯了demo.js,那麼可能是vs沒配置好,如果你沒有裝vs或者vsc,沒關系,在當前文件夾下命令行運行tsctsc命令會自動根據tsconfig.json裡面配置的情況,自動幫你把代碼編譯成js,這是編譯後的js文件10.打開demo.html可以看到效果了;11.至於題主說怎麼學習,其實跟JS完全沒兩樣,上面demo.tsx的代碼,跟react官網的es6寫法一模一樣多了這兩個prop和states類型約束,僅此而已;11.至於題主說怎麼學習,其實跟JS完全沒兩樣,上面demo.tsx的代碼,跟react官網的es6寫法一模一樣多了這兩個prop和states類型約束,僅此而已;12.下班,有空再寫;－－－－－－時間分割－－－－－－13、繼續寫，對1-12進行潤色，轉入傳教模式；以上的代碼，工廠方法在創建子類的同時，做了一些初始化的動作，這與單純的原型繼承不同，所以在使用class方式進行子類繼承，這樣的寫法是無效的；classMyViewextendsReact.Component{render(){returnhello{this.state.name};//會拋異常,因為state是null}//不起作用的getInitialState:(){return{name:'',age:20};}}需要改成如下方式，下面是官網給出的方案（這里TypeScript和ES6情況是一樣的）classMyViewextendsReact.Component{constructor(props,context){super(props,context);this.state={name:'',};}render(){returnhello{this.state.name};}}16、當組件化遇到強類型：從前寫JS組件，一般復用性比較差，基本寫完就仍，原因如下：1）暴露了太多的Dom結構以及別的實現細節；2）命名挫，缺乏可記憶性，本身編程中變數和方法的命名對於碼農來說就是天坑；3）JS天生缺乏私有和公共成員的約束，不加註釋根本不知道怎麼使用該類庫/組件；React解決了把dom標簽暴露出去的問題，TS則解決了語言層面的問題，並提供了強大的重構能力，你根本不需要記住組件的API，因為工具會列出來；
8. 如何做到先用typescript編譯，再用babel轉
很多項目使用typescript + webpack來搭建項目,但其中的打包順序沒搞明白,一般我們先用tsc將項目打包至es2015,然後使用babel轉。
9. TypeScript 和 JavaScript 的區別
TypeScript 和 JavaScript 是目前項目開發中較為流行的兩種腳本語言，我們已經熟知 TypeScript 是 JavaScript 的一個超集。JavaScript 和 TypeScript 的主要差異：
1、TypeScript 可以使用 JavaScript 中的所有代碼和編碼概念，TypeScript 是為了使 JavaScript 的開發變得更加容易而創建的。例如，TypeScript 使用類型和介面等概念來描述正在使用的數據，這使開發人員能夠快速檢測錯誤並調試應用程序
2、TypeScript 從核心語言方面和類概念的模塑方面對 JavaScript 對象模型進行擴展。
3、JavaScript 代碼可以在無需任何修改的情況下與 TypeScript 一同工作，同時可以使用編譯器將 TypeScript 代碼轉換為 JavaScript。
4、TypeScript 通過類型註解提供編譯時的靜態類型檢查。
5、TypeScript 中的數據要求帶有明確的類型，JavaScript不要求。
6、TypeScript 為函數提供了預設參數值。
7、TypeScript 引入了 JavaScript 中沒有的「類」概念。
8、TypeScript 中引入了模塊的概念，可以把聲明、數據、函數和類封裝在模塊中。
10. 如何評價 TypeScript 1.7
1.7 相對而言並沒有增加很多新的東西, async/await 其實 1.6 的時候就已經有了, 只是之前需要添加選項. 比較重要, 或者比較有意義的更新主要有兩個.
第一個是編譯目標為 ES6 時也可以指定模塊方案, 然而這只是個過渡, 未來很多功能更夠拆分開來配置是否輸出 polyfill, 離 (主要使用 TypeScript 的開發者) 告別 Babel 也就越近了.
第二個是 this 類型, 對於喜歡鏈式調用的同學來說是一大福音, 也為其他場景提供了更多的靈活性.
除開這兩個, 對對象/數組的字面量解構推導也更方便易用, 可以少一些冗餘.
總體來說, 1.7 帶來的特性並不是很多, 其實在 1.6 發布後不久, 1.8 就已經和 1.7 在同時進行開發.
--
另外至於 TypeScript 尚未支持 async/await 編譯到 ES5, 主要原因有兩點:
1. 會影響編譯速度.
2. 生成的代碼幾乎不可讀, 難以調試.