首頁 > web前端 > js教程 > 為什麼你應該學習 TypeScript 而放棄 JavaScript? TypeScript 與 JavaScript

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

Barbara Streisand
發布: 2024-11-15 00:53:02
原創
522 人瀏覽過

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

嚴格型別 JavaScript

Why you should learn TypeScript and ditch JavaScript? TypeScript vs 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 編寫程式碼。

因為你需要錯誤。

Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript

當我說你需要錯誤時,並不代表我希望你寫錯誤的程式碼,而是你寫的程式碼必須是無錯誤的,為此,你的開發環境有責任為你提供錯誤。而在 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 被認為更可靠的另一個原因。

自動測試並記錄。

Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript

假設你正在使用某個用 JS 寫的函式庫中的函數,你怎麼知道你必須傳遞哪些參數?您將查看文檔,檢查它將採用哪些參數,哪些參數是可選的,然後呼叫該函數。但在 TS 中,不需要記錄這一點,一切都由類型本身解釋。即使它也確保您以正確的方式使用該函數,並且不傳遞任何隨機參數。

例如,您可以參考上面的第二部分。

您可以採取的另一種情況是,假設您正在使用一個庫,該庫為您提供一個帶有嵌套屬性的JS 對象,因此要檢查屬性的名稱到底是什麼,以及其中哪些可以是未定義的,這是一個很大的任務疼痛。您必須深入研究文檔,或者有時透過控制台記錄您的物件以查看它包含哪些內容。這確實是我討厭的,我希望以某種方式,物件本身告訴您它包含哪些屬性,以及某些屬性是否未定義,或者屬性是否具有值字串、數字或陣列或什麼。嗯,願望實現了,再次感謝 TypeScript。如果程式碼是用 TS 編寫的,您將得到確切的行為。讓我們來看一個例子。

let age: number;
age = 25;

登入後複製
登入後複製
登入後複製
登入後複製

現在要檢查用戶將擁有哪些屬性,無需控制台記錄它,也無需在添加 .在用戶之後,它會自動為您提供其擁有的屬性列表,並告訴您其中哪些屬性未定義。見下圖。

Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript

它還會透過檢查所有可能性來自動測試您的程式碼,並告訴您是否有任何可能性失敗。聽起來棒極了,是的,確實如此。此功能可防止開發時出現大量錯誤,您不需要為您的函數編寫測試,也不需要在不同的值下手動測試它,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 幾步

Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript

Typescript 總是比 Javascript 領先幾步。如果JavaScript 中宣布了新功能,並且應該在下一個ECMA 版本中發布,TS 會在正式發布之前發布它,您可以使用它而無需擔心瀏覽器兼容性,因為您可以將TS 編譯到任何以前的版本JavaScript (如ES5)。 TypeScript 具有許多 JavaScript 沒有的功能。

所以我們可以說 TypeScript 也是 JavaScript、ECMA5、ECMA6、ECMA7 和 ECMAnext 的超集,以及一些 JavaScript 中甚至不存在的功能。

結論

Why you should learn TypeScript and ditch JavaScript? TypeScript vs 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板