TypeScript Tutorial

TypeScript 教程

Table of content

本TypeScript 教程專為初學者和工作專業人士設計，幫助他們理解 TypeScript 的基礎到高階概念。它涵蓋了 TypeScript 的大部分重要概念，例如型別系統、控制流、函式、介面、類和物件、高階型別、型別操作、泛型、名稱空間、模組、裝飾器等等。

什麼是 TypeScript？

TypeScript 是 JavaScript 的型別化超集，它編譯成純 JavaScript。TypeScript 是純面向物件的，具有類、介面和靜態型別，類似於 C# 或 Java。流行的 JavaScript 框架Angular 2.0 就是用 TypeScript 編寫的。掌握 TypeScript 可以幫助程式設計師編寫面向物件的程式，並將它們編譯成 JavaScript，無論是在伺服器端還是客戶端。

為什麼要學習 TypeScript？

TypeScript 是開發 Web 應用程式的流行選擇。它也用於遊戲開發和伺服器端開發等其他領域。TypeScript 是一種免費的開源高階程式語言。如果您已經熟悉 JavaScript，那麼它很容易學習。您需要理解型別系統和相關的語法才能將其應用於 JavaScript 程式碼。透過掌握 TypeScript，您將為各種軟體開發角色做好充分準備。

除了上述內容，以下是一些學習 TypeScript 程式語言的更多理由。

  • 它為 JavaScript 添加了帶有可選型別註解的靜態型別。
  • TypeScript 專為大型應用程式的開發而設計。
  • 它幫助開發人員儘早地在程式碼編輯器中捕獲錯誤。
  • 它支援所有最新的 ECMAScript 功能。
  • TypeScript 是使用 Angular 框架建立應用程式的推薦語言。
  • 它也可以用於遊戲開發和伺服器端開發。
  • 所有大型公司，例如 Microsoft、Google、Meta、Amazon 等，都使用 TypeScript。
  • TypeScript 支援 JavaScript 庫。您可以輕鬆地在 TypeScript 專案中使用 JavaScript 庫。
  • 網際網路上擁有龐大的 TypeScript 社群，並且正在快速發展。任何人都可以輕鬆獲得支援。
  • 有很多職位空缺是面向那些瞭解 TypeScript 的人。

TypeScript 的應用

TypeScript 是一種通用的程式語言，可以應用於各種應用程式。

  • Web 開發：TypeScript 廣泛用於構建動態和互動式 Web 應用程式。流行的框架 Angular 完全基於 TypeScript 構建，其他 JavaScript 框架，如 React 和 Vue.js 也支援 TypeScript。TypeScript 使開發人員能夠建立具有增強的型別安全性和更好的工具支援的健壯 Web 應用程式。
  • 伺服器端開發：TypeScript 越來越多地與 Node.js 一起用於伺服器端開發。像 NestJS 這樣的框架使用 TypeScript 來構建伺服器端應用程式。
  • 移動開發：使用 TypeScript，您可以使用 React Native 等框架開發跨平臺移動應用程式。
  • 桌面應用程式開發：TypeScript 也可以透過 Electron 等框架用於開發桌面應用程式。
  • 遊戲開發：TypeScript 用於遊戲開發，特別是基於 Web 的遊戲。
  • 大型開發：TypeScript 非常適合大型應用程式。它的靜態型別、介面和模組化功能有助於保持程式碼庫的有序和可擴充套件性。
  • 庫和框架開發：您可以使用 TypeScript 開發自己的庫或框架。許多流行的框架都是用 TypeScript 編寫的。

TypeScript 程式示例

我們提供了TypeScript 線上編譯器，它可以幫助您直接從瀏覽器中編輯和執行程式碼。嘗試點選圖示 run button 來執行以下 TypeScript 程式碼以列印傳統的“Hello, World！”。

嘗試更改字串變數的值並再次執行它以驗證結果。
var message:string = "Hello World" 
console.log(message)

編譯後，它將生成以下 JavaScript 程式碼。

var message = "Hello World";
console.log(message);

誰應該學習 TypeScript？

來自面向物件世界程式設計師會發現 TypeScript 易於使用。憑藉 TypeScript 的知識，他們可以更快地構建 Web 應用程式，因為 TypeScript 具有良好的工具支援。

學習 TypeScript 的前提條件

作為本教程的讀者，您應該對 OOP 概念和基本的JavaScript 有很好的理解，才能充分利用本教程。

TypeScript 入門

在深入研究 TypeScript 之前，您必須熟悉以下提到的幾個基本概念。

TypeScript 基本型別

您需要能夠使用一些最簡單的單元資料，例如數字、字串、結構、布林值等。

TypeScript 控制流語句

在 TypeScript 中，決策語句用於根據某些條件控制執行流程。所有控制流語句如下所示。

TypeScript 函式

TypeScript 中的函式是可讀、可維護和可重用程式碼的構建塊。函式是一組執行特定任務的語句。

TypeScript 職位和薪資

TypeScript 是開發 Web 應用程式的流行選擇。它也用於遊戲開發和伺服器端開發等其他領域。

  • Typescript 開發人員 - 薪資範圍在每年 40 萬至 42 萬盧比之間，但隨著您在技能集中加入其他庫和框架，薪資會增長。

關於 TypeScript 的常見問題

關於 TypeScript 有些非常常見的疑問 (FAQ)，本節試圖簡要地回答它們。

TypeScript 是一種開源程式語言，它是 JavaScript 的擴充套件版本。它是一種靜態型別語言，構建於現有的 JavaScript 語法和功能之上。TypeScript 可以輕鬆地與 JavaScript 生態系統和現代框架（如 React 和 Angular）整合，使其成為建立和管理大型 Web 應用程式的可靠選擇。

TypeScript 的高階特性包括類、介面和泛型，這些特性有助於為複雜的 Web 應用程式設計模組化程式碼。型別註解和擴充套件的 OOP 特性有助於理解、除錯和維護程式碼。此外，與 JavaScript 不同，TypeScript 執行嚴格的空值檢查，這有助於在編譯期間識別空值或未定義值，從而減少執行時錯誤。

TypeScript 提供以下幾個好處：

  • 型別安全：透過靜態型別檢查儘早發現錯誤。

  • 增強的工具支援：提供更好的程式碼編輯器支援，具有自動完成、導航和重構等功能。

  • 改進的程式碼質量：強制執行編碼標準和最佳實踐。

  • 更好的協作：使程式碼更易於閱讀和維護，尤其是在大型團隊和專案中。

  • 相容性：編譯成純 JavaScript，確保與現有的 JavaScript 庫和框架相容。

您可以使用 npm（Node 包管理器）在您的機器上全域性安裝 TypeScript。在您的終端中執行以下命令：

npm install -g typescript

tsconfig.json 是 TypeScript 專案的配置檔案。它指定了根檔案和編譯專案所需的編譯器選項。這是一個 tsconfig.json 檔案的基本示例：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

是的，您可以在 TypeScript 中使用現有的 JavaScript 庫。為此，您可能需要這些庫的型別定義，這些定義提供了關於庫函式和物件的型別資訊。

TypeScript 中的介面用於定義物件的形狀。它們可以用來定義物件的型別、函式引數和函式返回值。這是一個示例：

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

function greet(person: Person): void {
  console.log(`Hello, ${person.name}`);
}

是的，TypeScript 越來越多地用於後端開發。像 Node.js 和 NestJS 這樣的框架使用 TypeScript 來構建可擴充套件且易於維護的伺服器端應用程式。

TypeScript 透過在編譯時捕獲錯誤來幫助防止錯誤。但是，您仍然可以使用傳統的錯誤處理技術，例如 try/catch 塊。

TypeScript 文章

您可以在 TypeScript 文章 瀏覽一系列 TypeScript 文章。

列印頁面
上一頁
下一頁
廣告