為什麼你應該學習 TypeScript 而放棄 JavaScript？ TypeScript 與 JavaScript

你還沒有與 JavaScript 結婚，無論你有多喜歡它，你都必須嘗試 TypeScript。也許你沒有理由搬家，但我會帶你踏上一段旅程，讓你想嚐嚐 TypeScript。我可以給你超過13 個理由為什麼你應該轉向TypeScript，但現在，我將嘗試用5 點來說服你轉向TypeScript，其中我會告訴你為什麼TypeScript 比JavaScript 更適合開發，並且為什麼你應該為你的下一個專案選擇TypeScript。

嚴格型別 JavaScript

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;

始終領先 JavaScript 幾步

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中文網其他相關文章！