typescript教學pdf - 什麼是TypeScript,為什麼我會用它來代替JavaScript?




windows typescript (4)

我最初編寫這個答案時,Typescript仍然熱門新聞。 五年後,這是一個好的概述,但請看下面Lodewijk的答案以獲得更深入的了解

1000英尺的視野...

TypeScript是JavaScript的超集,主要提供可選的靜態類型,類和接口。 其中一個很大的好處是可以讓IDE在鍵入代碼時提供更豐富的環境來查找常見錯誤。

要了解我的意思,請觀看微軟關於該語言的介紹性視頻

對於大型JavaScript項目,採用TypeScript可能會產生更強大的軟件,同時仍可在常規JavaScript應用程序運行的位置部署。

它是開源的,但如果您使用受支持的IDE,則只會在鍵入時獲得智能Intellisense。 最初,這只是微軟的Visual Studio(也在Miguel de Icaza的博客文章中提到)。 現在, 其他IDE也提供了TypeScript支持

還有其他的技術嗎?

CoffeeScript ,但這真的有不同的用途。 恕我直言,CoffeeScript為人類提供了可讀性,但TypeScript通過其可選的靜態類型提供了對工具的深度可讀性(請參閱最近的博客文章,以獲得更多評論)。 還有Dart但是它完全取代了JavaScript(儘管它可以生成JavaScript代碼

舉個例子,這裡有一些TypeScript(你可以在TypeScript Playground中使用它

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

這是它會產生的JavaScript

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

注意TypeScript定義了成員變量和類方法參數的類型。 這在轉換為JavaScript時被刪除,但被IDE和編譯器用於發現錯誤,例如將數字類型傳遞給構造函數。

它還能夠推斷未明確聲明的類型,例如,它會確定greet()方法返回一個字符串。

調試打字稿

許多瀏覽器和IDE通過源代碼提供直接調試支持。 有關更多詳細信息,請參閱此堆棧溢出問題: 使用Visual Studio調試TypeScript代碼

想知道更多?

我最初編寫這個答案時,Typescript仍然熱門新聞。 查看Lodewijk針對這個問題的答案 ,了解更多當前細節。

你能否描述一下TypeScript語言?

JavaScript或者可用的庫不能做什麼,這會給我理由去考慮它?


TypeScript Fundamentals ” - 由Dan WahlinJohn Papa編寫的Pluralsight視頻課程非常好,目前已更新(2016年3月25日),以反映TypeScript 1.8,Typescript入門。

對我來說,除了intellisense的好的可能性之外,真正好的功能還包括接口模塊 ,實現AMD的容易程度以及在使用IE調用時使用Visual Studio Typescript調試器的可能性。

總結 :如果按照預期使用,Typescript可以使JavaScript編程更可靠,更容易。 它可以在整個SDLC上顯著提高JavaScript程序員的工作效率。


儘管接受的答案沒有問題,但我覺得現在確實沒有TypeScript正義。 現在不再是早期了。 現在TypeScript正在用TypeScript編寫幾種流行的框架,現在發現更多的採用。 現在你應該選擇TypeScript而不是JavaScript。

與JavaScript的關係

JavaScript通過ECMAScript標准進行了標準化。 並非所有正在使用的瀏覽器都支持新的ECMAScript標準的所有功能(請參閱此table )。 TypeScript支持新的ECMAScript標準,並將它們編譯為您選擇的(較舊的)ECMAScript目標(當前目標為3,5和6 [也就是2015])。 這意味著您可以使用ES2015及更高版本的功能,比如今天的模塊,lambda函數,類,擴展運算符,解構。 它還增加了當然的類型支持,它不是任何ECMAScript標準的一部分,並且可能永遠不會由於解釋性質而不是JavaScript的編譯本質。 TypeScript的類型系統相對豐富,包括:接口,枚舉,混合類型,泛型,聯合和交集類型,訪問修飾符等等。 TypeScript的官方網站給出了這些功能的概述。

與其他JavaScript定位語言的關係

與編譯為JavaScript的其他語言相比,TypeScript具有獨特的理念。 JavaScript代碼是有效的TypeScript代碼; TypeScript是JavaScript的超集。 幾乎可以將.js文件重命名為.ts文件並開始使用TypeScript。 TypeScript文件被編譯為可讀的JavaScript,因此可以回遷,並且理解編譯後的TypeScript並不難。 通過這種方式,TypeScript建立在JavaScript的成功之上,同時改進了其弱點。

一方面,您擁有未來的驗證工具,可以採用現代ECMAScript標準,並將其編譯為較舊的JavaScript版本,其中Babel是最流行的版本。 另一方面,您的語言可能完全不同於JavaScript,比如Coffeescript,Clojure,Dart,Elm,Haxe,ScalaJs以及更多的整體主機(請參閱此list )。 這些語言雖然可能比JavaScript的未來有可能更好,但它們承擔更大的風險是未能為其未來找到足夠的收養來保證。 你可能會遇到更多的麻煩,找一些這些語言的經驗豐富的開發人員,但你會發現,往往會更熱心。 使用JavaScript進行互操作也可能會涉及更多,因為它們遠離JavaScript的實際範圍。

TypeScript位於這兩個極端之間,從而平衡風險。 根據任何標準,TypeScript不是一個有風險的選擇。 如果熟悉JavaScript,只需很少的努力即可熟悉,因為它不是一種完全不同的語言,具有出色的JavaScript互操作性支持,並且最近已經看到了很多采用。

可選靜態類型和類型推斷

JavaScript是動態輸入的。 這意味著JavaScript在運行時實際實例化之前不知道變量的類型。 這也意味著它可能為時已晚。 TypeScript將類型支持添加到JavaScript中。 如果你正確地玩牌,那麼由某些變量屬於某種類型的錯誤假設引起的錯誤可以完全消除; 您輸入代碼的嚴格程度,或者您輸入代碼的方式都取決於您。

通過使用類型推斷,TypeScript使輸入變得更容易,而且更加簡單。 例如:TypeScript中的var x = "hello"var x : string = "hello" 。 這種類型只是從它的使用中推斷出來的。 即使你沒有明確地鍵入類型,它們仍然存在,以免你做某些事情,否則會導致運行時錯誤。

TypeScript默認是可選的。 例如, function divideByTwo(x) { return x / 2 }是TypeScript中的一個有效函數,可以用任何類型的參數調用,即使用字符串調用它也會導致運行時錯誤。 就像你習慣於JavaScript一樣。 這是有效的,因為當沒有明確指定類型並且無法推斷類型時(如divideByTwo示例),TypeScript將隱式指定any類型。 這意味著divideByTwo函數的類型簽名會自動變為function divideByTwo(x : any) : any 。 有一個編譯器標誌禁止這種行為:-- --noImplicitAny 。 啟用此標誌可提高您的安全性,但也意味著您必須進行更多打字。

類型有與他們相關的成本。 首先有一條學習曲線,其次,當然,使用適當的嚴格輸入也會花費更多時間來設置代碼庫。 根據我的經驗,這些成本完全值得您與其他人共享的任何嚴肅的代碼庫。 Github對編程語言和代碼質量的大規模研究表明, “靜態類型語言通常比動態類型的缺陷容易性更低,並且在相同方面,強類型優於弱類型。

值得注意的是,這篇相同的論文發現,TypeScript在JavaScript方面不易出錯:

對於那些係數為正數的人,我們可以預料,語言與其他條件相關聯的是更多的缺陷修復。 這些語言包括C,C ++, JavaScript ,Objective-C,Php和Python。 Clojure,Haskell,Ruby,Scala和TypeScript語言都具有負面係數,這意味著這些語言不太可能導致缺陷修復提交。

增強的IDE支持

使用TypeScript的開發經驗是JavaScript的重大改進。 IDE通過TypeScript編譯器實時通知其豐富類型信息。 這提供了幾個主要優勢。 例如,使用TypeScript,您可以安全地進行重構,比如整個代碼庫中的重命名。 通過代碼完成,您可以獲得關於圖書館可能提供的任何函數的內聯幫助。 不再需要記住它們或在線參考中查找它們。 編譯錯誤直接在IDE中用紅色波浪線報告,而您正忙於編碼。 總之,與使用JavaScript相比,這可以顯著提高工作效率。 人們可以花更多時間編碼,而且調試時間更短。

有很多IDE對TypeScript有很好的支持,比如Visual Studio&VS代碼,Atom,Sublime和IntelliJ / WebStorm。

嚴格的空檢查

表單的運行時錯誤cannot read property 'x' of undefinedundefined is not a function通常是由JavaScript代碼中的錯誤引起的。 開箱即用的TypeScript已經降低了發生這類錯誤的可能性,因為不能使用TypeScript編譯器不知道的變量( any類型變量的屬性除外)。 儘管錯誤地使用設置為undefined的變量仍然是可能的。 但是,使用TypeScript的2.0版本,您可以通過使用不可空類型來消除這些類型的錯誤。 這工作如下:

如果啟用了嚴格的空檢查( --strictNullChecks編譯器標誌),TypeScript編譯器將不允許將undefined分配給變量,除非您明確聲明它為可空類型。 例如, let x : number = undefined將導致編譯錯誤。 這完全符合類型理論,因為undefined不是一個數字。 可以將x定義為number的總和類型,並且可以用undefined來糾正: let x : number | undefined = undefined let x : number | undefined = undefined

一旦一個類型被認為是可空的,意味著它的類型也可以是nullundefined的值,TypeScript編譯器可以通過基於控制流的類型分析來確定您的代碼是否可以安全地使用變量。 換句話說,當你通過例如if語句檢查一個變量是undefinedif ,TypeScript編譯器會推斷出你的代碼控制流的該分支中的類型不再可以為空,因此可以安全地使用它。 這是一個簡單的例子:

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

在構建2016年會議期間,TypeScript Anders Hejlsberg的聯合設計師對此功能進行了詳細的解釋和演示: video (從44:30到56:30)。

彙編

要使用TypeScript,您需要一個編譯過程來編譯為JavaScript代碼。 構建過程通常只需要幾秒鐘,具體取決於項目的規模。 TypeScript編譯器支持增量編譯( --watch編譯器標誌),以便所有後續更改可以更快地編譯。

TypeScript編譯器可以在生成的.js文件中內聯源地圖信息或創建單獨的.map文件。 源地圖信息可以通過諸如Chrome DevTools和其他IDE之類的調試工具來使用,以將JavaScript中的行與在TypeScript中生成它們的行相關聯。 這使您可以在運行時直接在TypeScript代碼上設置斷點並檢查變量。 源地圖信息工作得很好,大約在TypeScript之前,但調試TypeScript通常不如直接使用JavaScript時那麼好。 this關鍵字為例。 由於自ES2015以來圍繞關閉的this關鍵字改變了其語義,因此在運行時可能實際上存在一個名為_this的變量(請參閱此答案 )。 在調試過程中,這可能會讓你感到困惑,但如果你了解它或檢查JavaScript代碼,通常不會有問題。 應該指出的是,巴貝爾遭受同樣的問題。

還有一些TypeScript編譯器可以完成的其他技巧,比如生成基於decorators截取代碼,為不同的模塊系統生成模塊加載代碼並解析JSX 。 但是,除了Typescript編譯器之外,您可能還需要構建工具。 例如,如果你想壓縮你的代碼,你將不得不在你的構建過程中添加其他工具來這樣做。

WebpackGulpGrunt和幾乎所有其他JavaScript構建工具都可以使用TypeScript編譯插件。 TypeScript文檔有一個關於集成所有構建工具的章節。 如果您想要更多的構建時間檢查,還可以使用linter 。 還有大量的種子項目可以讓你開始使用TypeScript和Angular 2,React,Ember,SystemJs,WebPack,Gulp等一系列其他技術。

JavaScript互操作性

由於TypeScript與JavaScript密切相關,因此它具有良好的互操作性能力,但需要額外的工作才能在TypeScript中使用JavaScript庫。 需要TypeScript定義 ,以便TypeScript編譯器明白像_.groupByangular.copy$.fadeOut這樣的函數調用實際上不是非法的語句。 這些函數的定義放置在.d.ts文件中。

定義最簡單的形式是允許以任何方式使用標識符。 例如,使用Lodash ,單行定義文件declare var _ : any將允許您調用_上所需的任何函數,但當然您仍然可以犯錯誤: _.foobar()將是一個合法的TypeScript調用,但在運行時當然是非法調用。 如果你想要正確的類型支持和代碼完成,你的定義文件需要更加確切(見例子的lodash定義 )。

由TypeScript編譯器自動理解由它們自己的類型定義預打包的Npm模塊 (參見documentation )。 幾乎任何其他半流行的JavaScript庫都不包含自己的定義,其中有人已經通過另一個npm模塊提供了類型定義。 這些模塊前綴為“@ types /”,來自Github存儲庫,名為DefinitelyTyped

有一個警告:類型定義必須與運行時使用的庫的版本相匹配。 如果他們不這樣做,TypeScript可能會禁止您調用函數或取消引用存在的變量,或者允許您調用函數或取消引用不存在的變量,這僅僅是因為類型在編譯時與運行時不匹配。 因此,請確保您為正在使用的庫的正確版本加載正確版本的類型定義。

說實話,這有點麻煩,這可能是你不選擇TypeScript的原因之一,而是像Babel那樣不需要獲得類型定義的東西。 另一方面,如果您知道自己在做什麼,則可以輕鬆解決由於定義文件不正確或缺失而導致的任何問題。

從JavaScript轉換到TypeScript

任何.js文件都可以重命名為.ts ,並通過TypeScript編譯器在語法上得到與輸出相同的JavaScript代碼(如果它在語法上正確的話)。 即使TypeScript編譯器遇到編譯錯誤,它仍然會生成一個.js文件。 它甚至可以使用--allowJs標誌接受.js文件作為輸入。 這使您可以馬上開始使用TypeScript。 不幸的是編譯錯誤一開始可能會發生。 其中一個確實需要記住,這些並不是像您可能習慣的其他編譯器那樣的停止顯示錯誤。

TypeScript的本質不可避免地將JavaScript項目轉換為TypeScript項目時遇到的編譯錯誤是不可避免的。 TypeScript檢查所有代碼的有效性,因此它需要知道所有使用的函數和變量。 因此需要對所有類型定義類型定義,否則編譯錯誤必然會發生。 正如在上面的章節中提到的,幾乎任何JavaScript框架都有.d.ts文件,可以通過幾種類型的typings install命令輕鬆獲取.d.ts文件。 但是,您可能已經使用了一些不明顯的TypeScript定義可用的模糊庫,或者您已經填充了一些JavaScript基元。 在這種情況下,您必須為這些位提供類型定義,以免編譯錯誤消失。 只需創建一個.d.ts文件並將其包含在tsconfig.json的files數組中,以便它始終被TypeScript編譯器考慮。 在其中聲明TypeScript不知道的那些類型是any 。 一旦你消除了所有的錯誤,你可以根據你的需要,逐步將這些部分輸入到這些部分。

一些工作(重新)配置您的構建管道也將需要將TypeScript引入構建管道。 正如編譯章節中提到的那樣,我們鼓勵您尋找使用您想要使用的工具組合的種子項目。

最大的障礙是學習曲線。 我鼓勵你先玩一個小型項目。 看看它是如何工作的,它是如何構建的,它使用哪些文件,它如何配置,它在IDE中的功能,它的結構,它使用的工具等。將大型JavaScript代碼轉換為TypeScript是非常可行的知道你在做什麼,但是當你不這樣做時可能會感到沮喪。

採用

TypeScript是開源的(Apache 2許可,請參閱github )並由Microsoft支持。 C#的首席架構師Anders Hejlsberg領導該項目。 這是一個非常活躍的項目; 在過去的幾年中,TypeScript團隊發布了許多新功能,許多重要功能仍在計劃中(請參閱roadmap )。

2017年的開發者調查中, TypeScript是最受歡迎的JavaScript編譯器(總共排名第9),並在最受歡迎的編程語言類別中獲得第三名。


所有瀏覽器都支持並預編譯的Ecma腳本5(ES5)。 ES6 / ES2015和ES / 2016今年出現了很多變化,所以為了彈出這些變化,有一些介於TypeScript之間的東西需要關注。 •TypeScript是類型 - >意味著我們必須定義每個屬性和方法的數據類型。 如果你知道C#,那麼Typescript很容易理解。 •TypeScript的巨大優勢是我們在投入生產之前儘早識別相關的問題。 如果存在任何類型不匹配,這可以使單元測試失敗。







typescript