你還沒有與 JavaScript 結婚,無論你有多喜歡它,你都必須嘗試 TypeScript。也許你沒有理由搬家,但我會帶你踏上一段旅程,讓你想嚐嚐 TypeScript。我可以給你超過13 個理由為什麼你應該轉向TypeScript,但現在,我將嘗試用5 點來說服你轉向TypeScript,其中我會告訴你為什麼TypeScript 比JavaScript 更適合開發,並且為什麼你應該為你的下一個專案選擇TypeScript。
TypeScript 只是一個嚴格型別的 javascript。我討厭JavaScript 的原因之一(是的,我討厭它)是這種語言有太多的靈活性,沒有任何規則和規定,你可以寫任何廢話,它不會給你一個錯誤(例外是有的) ,例如,如果你創建了一個變量並給它一些數字作為值,比如6,稍後你可以將一些函數分配給同一個變量,甚至可以調用該變量,這對我來說有點有趣,無論如何,讓我們看看是什麼TypeScript 與它。
在 typescript 中,定義變數時,必須寫出它的類型,就像變數將儲存數字、陣列、字串或其他任何內容一樣。一旦你這樣做了,你就不能在其中儲存任何其他東西,否則 TypeScript 不會讓你繼續,而 TypeScript 對此很嚴格。
let age: number; age = 25;
即使你沒有提及變數的類型並為其分配一些值,它也太聰明了,它會自動從給定的值中找出類型並記住它。
let age = 10; age = "Donald Trump" ~~~ // Type '"Donald Trump"' is not assignable to type 'number'.(2322)
如果你了解像 C/C 這樣的語言,那麼類型被定義為 int Age;類似地,在 TypeScript 中,我們在冒號後的變數名稱後定義類型,例如 letage:number;。這樣我們就可以在不改變 JavaScript 語法的情況下填入 TypeScript。這就是我一開始告訴你的,TypeScript 不只是 JavaScript,只有型別。我不會關注 typescript 的語法,它不在本文的討論範圍。
現在,如果是JS,你可以對年齡做任何事情,比如你的名字,或者一些數組,甚至一些函數,但在TS 中,一旦它作為數字誕生,它將仍然是一個數字,沒有別的。如果你這樣做,它會立即給你一個錯誤,但在 JS 中,只要你不做非法的事情,它就會容忍它,例如調用age而不給它分配一個函數或訪問 .length 屬性。一個函數。
起初,你可能覺得從 JS 切換到 TS 不值得,但是一旦你完全理解它,你就不會因為這個功能而想用 JS 編寫程式碼。
當我說你需要錯誤時,並不代表我希望你寫錯誤的程式碼,而是你寫的程式碼必須是無錯誤的,為此,你的開發環境有責任為你提供錯誤。而在 JS 中,它只是不這樣做,這也是人們喜歡它的原因之一,同時也討厭它。當我說錯誤時,我指的是除語法錯誤之外的所有錯誤。當你寫錯東西時,JS 不會報錯,但當發生錯誤時,它會給你報錯。因此,如果您的程式碼的某些部分在測試時未執行,那麼請準備好應對生產中的一些痛苦。 :)
讓我們來看一個例子
我正在編寫一個程式碼來將兩個數字相乘,我將在 JS 和 TS 中執行此操作,您將看到 JS 如此不可靠,並且可能會在很多方面破壞您的應用程式。
let age: number; age = 25;
你可以用任何方式呼叫multiply,沒有任何限制,而且它總是會給你意想不到的結果,這是JS最糟糕的事情,假設現在你必須在某個地方使用這些回傳值,這會導致多少不一致和意想不到的結果在您的應用程式中。
但感謝TypeScript,它非常嚴格,如果你不遵守規則,它不會讓你繼續,如果函數期望的是,那麼你必須傳遞數字,它說兩者都應該是數字,然後你必須傳遞兩個參數,而且都必須是數字。讓我們看看 TypeScript 中的相同程式碼。如果您不了解 TS 語法,請不要擔心,它與 JS 類似,只是傳回類型位於左大括號之前,參數類型及其名稱位於前面。
let age = 10; age = "Donald Trump" ~~~ // Type '"Donald Trump"' is not assignable to type 'number'.(2322)
所以在TS這裡,從來沒有不可預測的結果,只有排除所有錯誤才能繼續,這就是讓我愛上TS
TS 不僅會告訴您所寫的程式碼中的錯誤,還會告訴您錯誤可能出現在哪裡的可能性。讓我們來看一個簡單的例子。
function multiply (num1, num2 ) { return num1 * num2; } console.log(multiply(3, 4)); // returns 12 console.log(multiply(3)); // return NaN console.log(multiply(3, null)); // returns 0 console.log(multiply()); // returns NaN
現在如您所見,social 屬性是可選的,這意味著可能存在 Social 未定義的情況,TS 知道這一點,並且在您處理它之前它不會讓您繼續。
function multiply (num1:number, num2:number) :number{ return num1 * num2; } console.log(multiply(3, 4)); // returns 12 console.log(multiply(3)); // ~~~~~~~~~~~ // Expected 2 arguments, but got 1.(2554) // input.tsx(1, 33): An argument for 'num2' was not provided. console.log(multiply(3, null)); // ~~~~ // Argument of type 'null' is not assignable to parameter of type 'number'. console.log(multiply()); // ~~~~~~~~~~~ // Expected 2 arguments, but got 0.(2554) // input.tsx(1, 20): An argument for 'num1' was not provided.
因此,這會被 JS 默默地忽略,並且會導致不同情況下的錯誤,這也是 TS 被認為更可靠的另一個原因。
假設你正在使用某個用 JS 寫的函式庫中的函數,你怎麼知道你必須傳遞哪些參數?您將查看文檔,檢查它將採用哪些參數,哪些參數是可選的,然後呼叫該函數。但在 TS 中,不需要記錄這一點,一切都由類型本身解釋。即使它也確保您以正確的方式使用該函數,並且不傳遞任何隨機參數。
例如,您可以參考上面的第二部分。
您可以採取的另一種情況是,假設您正在使用一個庫,該庫為您提供一個帶有嵌套屬性的JS 對象,因此要檢查屬性的名稱到底是什麼,以及其中哪些可以是未定義的,這是一個很大的任務疼痛。您必須深入研究文檔,或者有時透過控制台記錄您的物件以查看它包含哪些內容。這確實是我討厭的,我希望以某種方式,物件本身告訴您它包含哪些屬性,以及某些屬性是否未定義,或者屬性是否具有值字串、數字或陣列或什麼。嗯,願望實現了,再次感謝 TypeScript。如果程式碼是用 TS 編寫的,您將得到確切的行為。讓我們來看一個例子。
let age: number; age = 25;
現在要檢查用戶將擁有哪些屬性,無需控制台記錄它,也無需在添加 .在用戶之後,它會自動為您提供其擁有的屬性列表,並告訴您其中哪些屬性未定義。見下圖。
它還會透過檢查所有可能性來自動測試您的程式碼,並告訴您是否有任何可能性失敗。聽起來棒極了,是的,確實如此。此功能可防止開發時出現大量錯誤,您不需要為您的函數編寫測試,也不需要在不同的值下手動測試它,TS 會為您做這件事,並告訴您是否遺漏了某些內容這可能會在以後引起問題。
在下面的程式碼中,我編寫了一個函數,它接受兩個參數,並透過將每個參數添加到數組(如果它們不是未定義的)來傳回一個字串數組。第一個參數是必需的,而第二個參數是可選的。
let age = 10; age = "Donald Trump" ~~~ // Type '"Donald Trump"' is not assignable to type 'number'.(2322)
上面的程式碼是我很容易犯錯的場景。 Array.push 不傳回更新後的陣列,而是傳回數組的新長度。所以如果上面的程式碼是用JS編寫的,不會有任何錯誤,我的程式碼只是運行並給出了預期的結果,我必須在這裡調試並找到錯誤,如果我通過了,我的函數將返回2第二個論點也是。但在 TS 中,您可以清楚地看到 TypeScript 自動運行該情況,並告訴您在該特定情況下,您的函數將無法傳回字串陣列。
還有另一個錯誤,如果您不傳遞第二個參數,您仍然不會傳回任何內容(未定義),這也違反了函數的行為,因為它必須傳回字串陣列。因此,在這裡我對函數進行了一些更改,TS 給了您一個綠色標誌,這意味著函數永遠不會給您帶來意外的結果。見下文。
let age: number; age = 25;
Typescript 總是比 Javascript 領先幾步。如果JavaScript 中宣布了新功能,並且應該在下一個ECMA 版本中發布,TS 會在正式發布之前發布它,您可以使用它而無需擔心瀏覽器兼容性,因為您可以將TS 編譯到任何以前的版本JavaScript (如ES5)。 TypeScript 具有許多 JavaScript 沒有的功能。
所以我們可以說 TypeScript 也是 JavaScript、ECMA5、ECMA6、ECMA7 和 ECMAnext 的超集,以及一些 JavaScript 中甚至不存在的功能。
是的,遲早你必須接受 TypeScript。你就是無法逃避它。每個用 JavaScript 編寫的 npm 套件也必須提供其類型,或首選另一個支援 typescript 的套件。現在,大多數大型函式庫、套件和框架都是用 TypeScript 編寫的。
一開始,套件也使用了 JavaScript,並且支援 TypeScript,但現在情況已經發生了轉變,套件使用了 TypeScript,並且支援 JavaScript。每個人都承認 TypeScript 相對於 JavaScript 的強大功能和需求,並接受它。
你永遠無法學習 Angular,因為它迫使你只寫 TS 程式碼,與環回 4 的情況相同。 NestJS 主要語言是 TypeScritpt,它們也提供對 JavaScript 的支援。以下是NestJs的話
我們熱愛 TypeScript,但最重要的是 - 我們熱愛 Node.js。這就是 Nest 與 TypeScript 和純 JavaScript 相容的原因。 Nest 利用了最新的語言功能,因此要將其與普通 JavaScript 一起使用,我們需要一個 Babel 編譯器。
如果您對我給您的理由仍然不滿意,並且有一些反問,您可以隨時聯繫我們,相信我,值得一試,您不會後悔的。
以上是為什麼你應該學習 TypeScript 而放棄 JavaScript? TypeScript 與 JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章!