天天看點

TypeScript介紹TypeScript介紹

javascript that scales。typescript is a typed superset of javascript that compiles to plain javascript

出自anders hejlsberg之手(c#,delphi作者)

相容es規範,同時也有自己的一些規範(如namespace)

自帶編譯器,也是ts寫的

語言即服務(ide,第三方庫的方法聲明等)

執行<code>tsc</code>編譯:

localcompare這種輸入手誤在沒有智能提示的情況下是較為常見的,如果這個函數是原生js,那會等到運作時才會報錯。如果使用支援ts的ide,則輸入localcompare後會直接标紅,避免運作時這塊代碼被執行到然後報錯再debug。

可以看到<code>for (const line of text) {</code>這行中的text變量是有可能為undefined的(<code>?:</code>是ts文法,表示存在不存在都有可能)。這種缺少非空判斷到時的js運作時錯誤在工作中也是容易出現的。

person中name屬性是protected類型,隻能在自己類中或者子類中使用,這和java是一樣的。

robot類實作多個接口時,必須實作每個接口的所有抽象方法,這也是實作多繼承的一種方法。

ts适合大規模js應用,正如他的官方宣傳語<code>javascript that scales</code>。

類型系統+靜态分析+智能感覺/提示,使大規模的應用代碼品質更高,更好維護。

有類似vscode這樣配套的ide支援,友善的檢視引用關系,并進行重構,再也不用全局搜尋,一個個修改了。

資料結構(應用配置、前後端接口等json格式資料)的類型校驗,和強類型的後端配合更為無縫、健壯,友善後期前後端整體疊代、重構。

由于相容es規範,是以可以比較友善的更新現有的js代碼,逐漸的加類型注解。漸進式(容我盜個詞)增強代碼健壯性。不過這個也是理論上的,我目前維護的一個項目有比較重的曆史包袱,子產品管理是commonjs/es6 modules混雜的,我嘗試将編譯系統從babel完全遷移到ts,折騰後并沒有成功(babel還是很強大的= =)。

對于曆史包袱比較多的老項目,不建議完全替換babel,但是可以曲線引入ts,用ts編譯到es6,再用babel來編譯到es5。

大型前端應用如何兼顧<code>開發疊代&amp;持續傳遞</code>的速度和<code>線上運作時</code>的的品質,近期思考後認為很重要的一點就是增強應用資料結構或者說是結構化資料(配置、前後端後接口等json格式資料)的穩定性、健壯性。引入強類型系統,增加編譯期檢查,減少運作時錯誤,可以顯著的改善這個點。很多問題可以在編碼時發現,而不是出現運作時錯誤時再debug。

typescript 是推薦套餐,babel 系列是自助餐。

typescript自帶編譯器,包含es最新規範,還有自己的features和類型校驗;flow是一個類型校驗工具。在類型校驗這塊兩者目前已經相差不大。

babel、flow是facebook在推,typescript是microsoft在推,都有不錯的生态,但我個人感覺flow目前還不夠成熟(聽說fb最近招了一些lisp大牛來做這個事,沒有考證過),ts出自一位大牛(c#、delphi作者)之手,目前生态發展的非常好,社群口碑也很不錯,感覺更靠譜些(并不是說flow不靠譜)。

ide智能提示/糾錯,對于疊代、重構、減少bug提升代碼品質會有幫助,同時也可以提升開發效率。

提示:

TypeScript介紹TypeScript介紹

校驗:

TypeScript介紹TypeScript介紹

運作<code>tsc -init</code>可以快速生成工程的ts配置檔案<code>tsconfig.json</code>,預設的三個選項是分别是:

<code>"target":"es5"</code>: 編譯後的邏輯代碼的es版本,還有es3,es2105等選項。

<code>"module":"commonjs"</code>:編譯後的子產品化組織的代碼,還有amd,umd,es2015等選項。

<code>"strict":true</code>:嚴格校驗,包含不能有沒意義的any,null校驗等選項。

社群回報

<a href="http://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript">http://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript</a>

<a href="https://slack.engineering/typescript-at-slack-a81307fa288d">https://slack.engineering/typescript-at-slack-a81307fa288d</a>

<a href="https://blog.asana.com/2014/11/asana-switching-typescript/">https://blog.asana.com/2014/11/asana-switching-typescript/</a>

<a href="https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88">https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88</a>

<a href="https://insights.stackoverflow.com/survey/2017#technology-most-loved-dreaded-and-wanted-languages">https://insights.stackoverflow.com/survey/2017#technology-most-loved-dreaded-and-wanted-languages</a>

基于ts的知名開源項目

<a href="https://github.com/desktop/desktop">https://github.com/desktop/desktop</a>

<a href="https://github.com/driftyco/ionic">https://github.com/driftyco/ionic</a>

<a href="https://github.com/microsoft/vscode">https://github.com/microsoft/vscode</a>

<a href="https://github.com/ant-design/ant-design">https://github.com/ant-design/ant-design</a>

<a href="https://github.com/mobxjs/mobx">https://github.com/mobxjs/mobx</a>

<a href="https://github.com/cyclejs/cyclejs">https://github.com/cyclejs/cyclejs</a>

<a href="https://github.com/palantir/blueprint">https://github.com/palantir/blueprint</a>

<a href="https://github.com/tastejs/todomvc/tree/gh-pages/examples/typescript-react">https://github.com/tastejs/todomvc/tree/gh-pages/examples/typescript-react</a>

ts+react

<a href="https://github.com/microsoft/typescript-react-starter">https://github.com/microsoft/typescript-react-starter</a>

<a href="https://github.com/microsoft/typescript-react-conversion-guide">https://github.com/microsoft/typescript-react-conversion-guide</a>

作者視訊

<a href="https://channel9.msdn.com/posts/anders-hejlsberg-introducing-typescript">https://channel9.msdn.com/posts/anders-hejlsberg-introducing-typescript</a>

<a href="https://channel9.msdn.com/events/build/2017/b8088?ocid=player">https://channel9.msdn.com/events/build/2017/b8088?ocid=player</a>

和babel、flow的對比

<a href="https://www.zhihu.com/question/34867499">https://www.zhihu.com/question/34867499</a>

<a href="https://djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/8">https://djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/8</a>

繼續閱讀