從 JavaScript 過渡到 TypeScript：我的經驗和想法

當我第一次開始學習 JavaScript 時，我對它的強大和靈活性感到驚訝。我可以編寫小腳本、建立互動式網站，並最終處理更複雜的 Web 應用程式。然而，隨著我的專案規模和複雜性的增長，大約在這個時候，我更多地了解了 TypeScript 以及它如何幫助提高程式碼品質和可維護性 - 特別是在調試和管理大型程式碼庫時。

在我的研究期間，我們的任務是自己學習一門新語言，選擇一種我們用來建立我們的頂點專案的語言 - 這是我們所學的一切的頂峰。我決定使用 TypeScript，它通常被稱為 JavaScript 的超集，因為該語言包含 JavaScript 的所有功能，同時添加了靜態類型、介面和增強的開發人員支援等強大的工具。這些附加功能（我將在本部落格後面詳細介紹）使程式碼更易於編寫、調試和維護 - 特別是在更大或更複雜的專案中。

切換到 TypeScript：其功能如何簡化過渡

1.更聰明的工具和程式碼建議

TypeScript 使用「類型」來理解您正在使用的資料類型。這允許：

更好的自動完成：您的 IDE（例如 VS Code、WebStorm）了解可用於變數的方法和屬性，從而節省時間並減少錯誤。

例如，在處理字串時，編輯器會建議特定於字串的方法，例如 .toUpperCase()、.slice() 或 .substring()。同樣，對於數組，它可能會建議 .map()、.filter() 或 .push()。

早期錯誤偵測： TypeScript 在您編寫程式碼時進行檢查，稱為編譯時檢查。如果您嘗試在需要數字的地方使用字串，TypeScript 會在執行程式之前向您發出警告。

更輕鬆的導航：了解類型意味著您的編輯器可以直接連結到定義變數、函數或物件的位置，幫助您快速了解程式碼如何組合在一起。

2. 儘早發現錯誤

對於 JavaScript，有些錯誤可能只有在程式執行時（也稱為執行時間）才會變得明顯，這可能會非常耗時的偵錯。另一方面，TypeScript：

在開發過程中發現錯誤：當存在類型不匹配時，TypeScript 會提供警告，例如嘗試在需要字串的地方使用數字，幫助您在運行前捕獲潛在的邏輯問題。

防止簡單錯誤： TypeScript 會在變數名稱拼字錯誤或函數參數不正確等問題引發問題之前將其擷取。 這可以節省時間，並允許在投入生產之前修復錯誤。

3.更容易的程式碼維護

TypeScript 讓一切變得更加可預測，讓閱讀、重構和更新程式碼變得更加容易。

清晰的資料流：類型準確地顯示了程式碼的每個部分期望和傳回的資料類型。當在團隊中工作或重新審視舊專案時，這種清晰度是非常寶貴的。隨著程式碼庫的成長，TypeScript 的類型註解使維護和重構程式碼變得更加容易。類型可幫助您了解應用程式的不同部分如何交互，從長遠來看使其更易於管理。

更安全的變更：如果您變更函數的工作方式，TypeScript 會提醒您程式碼中可能受影響的所有位置，這樣您就不會意外破壞

更快的調試：由於 TypeScript 在開發過程中捕獲問題，因此您可以花更少的時間尋找錯誤，而將更多的時間用於構建功能。

4. 非常適合大型專案

隨著專案的成長，管理 JavaScript 可能會變得混亂。 TypeScript 在這些情況下大放異彩：

處理複雜性：透過強制執行一致的資料結構和類型，TypeScript 讓您的程式碼保持井然有序且可擴展。

改善團隊合作：類型讓團隊成員更容易理解彼此的程式碼，減少誤解並加快開發速度。

重點：TypeScript 的主要功能

靜態類型：允許您定義變數應保存的資料類型（如字串、數字或物件）。

介面：定義物件的外觀，使您的程式碼更可預測且更易於理解。

增強的工具： VS Code 等工具可與 TypeScript 無縫協作，為您提供即時回饋和智慧導航選項。

JavaScript 的前向和後向相容性

TypeScript 支援最新的 JavaScript 功能，因此您可以編寫與新標準保持同步的現代程式碼。它還透過將您的程式碼轉換為較舊的 JavaScript 版本來確保向後相容性，使其在遺留系統上運行。

例如，您可以在 TypeScript 中使用 async/await 等現代功能，它會自動將您的程式碼轉換為在不支援它的舊瀏覽器上運行。這樣，您就可以兩全其美：使用新功能，同時確保廣泛的兼容性。

JavaScript 和 TypeScript 之間的差異

類型註釋：

在 JavaScript 中，變數是動態類型的，這意味著它們的類型可以在運行時更改。這種靈活性有時會引入難以追蹤的錯誤。

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

---

TypeScript 透過允許您明確宣告變數的類型來修復此問題。如果您嘗試指派不同類型的值，TypeScript 會在編譯時拋出錯誤。

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

這可以防止意外的類型更改，從而導致大型、複雜的程式碼庫中出現錯誤。

函數類型檢查

在 JavaScript 中，函數是鬆散的類型。您可以將任何類型的參數傳遞給函數，JavaScript 不會抱怨 - 即使它在邏輯上沒有意義。

Typescript Example

let message: string = "Hello, world!";
// message = 77;  // Error: Type 'number' is not assignable to type 'string'
// message = true; // Error: Type 'boolean' is not assignable to type 'string'

---

TypeScript 可讓您明確定義函數參數所需的類型，確保僅傳遞正確的類型。

Javascript Example

function greet(name) {
  return `Hello, ${name}`;
}
greet("Alice");  // Works fine
greet(42);       // Also works, but it's not intended

這可以確保您的函數按預期運行並減少運行時的潛在錯誤。

物件結構的介面

JavaScript 可讓您定義具有靈活結構的對象，但如果物件屬性修改不正確，這種彈性可能會導致不可預測的錯誤。

Typescript Example

function greet(name: string): string {
  return `Hello, ${name}`;
}
greet("Alice");  // Works fine
// greet(42);     // Error: Argument of type 'number' is not assignable to parameter of type 'string'

---

TypeScript 引入了接口，可讓您定義物件的特定結構。這可以確保物件遵循設定的模式，並防止諸如將錯誤的資料類型指派給物件屬性之類的錯誤。

Javascript Example 

let person = { name: "John", age: 30 };
person.age = "thirty";  // No error, but could cause issues later

這有助於防止因資料結構不當而產生的常見錯誤。

類別和繼承

TypeScript 透過類別屬性和方法的類型安全性擴展了 JavaScript 基於類別的結構，提供了更多的清晰度和可預測性。

Typescript Example

interface Person {
  name: string;
  age: number;
}

let person: Person = { name: "John", age: 30 };
// person.age = "thirty";  // Error: Type 'string' is not assignable to type 'number'

---

在 TypeScript 中，您可以定義屬性和方法傳回值的類型，使類別更可預測且不易出錯。

Javascript Example

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

類別中增加的類型清晰度有助於管理使用繼承和物件導向原則的大型專案。

一些個人見解

逐步採用與重新開始

您選擇的方法取決於您的專案和個人目標。如果您正在開發一個小型專案或一個簡單的腳本，TypeScript 的逐步採用模型可能很有意義。由於 TypeScript 是 JavaScript 的超集，因此您可以逐步介紹它，幫助您發現潛在問題，而無需立即重構所有內容。

對於較大的項目或那些旨在長期可擴展性的項目，從新的 TypeScript 項目開始通常是最好的選擇。這使您可以從一開始就充分享受 TypeScript 的優勢，包括靜態類型和改進的程式碼組織。透過重新開始，您可以避免將 TypeScript 整合到現有程式碼庫中的複雜性，並且可以從一開始就應用最佳實踐，確保您的程式碼更乾淨、更易於維護且更不易出錯。

啟用嚴格模式

要充分利用 TypeScript，請在
中啟用嚴格模式 tsconfig.json 檔案。這可確保打開所有嚴格的類型檢查功能，使您的程式碼更加健壯並捕獲更多潛在錯誤。

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

理解 TypeScript 中的任何類型：

any 類型可讓您暫時繞過 TypeScript 對特定變數或函數的嚴格類型。將其視為返回 JavaScript 模式 - 變數可以不受限制地保存任何類型的值。

Typescript Example

let message: string = "Hello, world!";
// message = 77;  // Error: Type 'number' is not assignable to type 'string'
// message = true; // Error: Type 'boolean' is not assignable to type 'string'

雖然這可以幫助您輕鬆掌握這門語言，但過度依賴任何一個都可能會破壞 TypeScript 的核心優勢：類型安全。最好盡快開始使用更具體的類型。這將幫助您充分利用 TypeScript 的類型檢查，避免對任何類型檢查的依賴，並確保以後以更少的重構獲得更順暢的學習體驗。

結論：

TypeScript 對於熟悉 JavaScript 的開發人員來說是一個強大的工具，在型別安全、工具和可維護性方面具有顯著的優勢。透過提高程式碼可預測性和減少錯誤，TypeScript 對於那些希望提高 JavaScript 技能的人來說是一個絕佳的選擇。它無縫整合到現有的 JavaScript 專案中，其漸進的學習曲線可確保任何級別的開發人員順利過渡。

自從過渡到 TypeScript 環境後，我已經習慣了它內建的錯誤捕獲功能，通常認為它們是開發過程中理所當然的一部分。直到我反思了之前使用 JavaScript 的經歷，我才意識到我現在有多依賴 TypeScript 的類型檢查功能。

也就是說，我非常感謝 JavaScript。這是我第一次用來深入 Web 開發的語言，它為我提供了建立簡單應用程式的實務經驗。我早期使用 JavaScript 的經歷，尤其是在處理單次獲取任務等專案時，是我作為開發人員成長的關鍵。對於較小的、靈活的項目，它仍然是我的首選，因為它的簡單性仍然很出色。

謝謝 JavaScript - 你好，TypeScript！

一路上支持我的資源

• https://youtu.be/zQnBQ4tB3ZA?si=38FjZEWGdjCM3END
• https://www.codecademy.com/learn/learn-typescript
• https://www.typescriptlang.org/docs/

查看此博客，深入了解 TypeScript 設定指南

• https://dev.to/sovannaro/typescript-roadmap-2024-step-by-step-9i4

以上是從 JavaScript 過渡到 TypeScript：我的經驗和想法的詳細內容。更多資訊請關注PHP中文網其他相關文章！