TypeScript 基礎：初學者指南 (✅

TypeScript 在開發者中引起了無休止的爭論。有些人將其視為 JavaScript 自由的官僚障礙，而另一些人則將其譽為鬆散類型程式碼戰壕中的燈塔。不管你喜歡還是討厭，TypeScript 都會留下來——一旦你了解它，你可能會發現它不是一種負擔，而是對你的專案的祝福。

在本系列中，我們將探索 TypeScript 並涵蓋基礎知識——以及一些技巧和故障排除提示。

一、簡介

什麼是 TypeScript？

TypeScript 是 JavaScript 的靜態型別超集，可編譯為純 JavaScript。簡單來說，它是具有額外功能的 JavaScript，可幫助您及早發現錯誤並編寫更好、更易於維護的程式碼。

將 TypeScript 視為友好的助手，在您提交工作之前仔細檢查您的工作。它可以讓你：

• 在編碼時發現錯誤，而不是在部署之後。
• 編寫更易於閱讀和理解的程式碼。
• 擴充您的項目，同時又不遺失事物的連結方式。

為什麼要使用 TypeScript？

讓我們實際一點吧。當 JavaScript 已經可以運作時，為什麼還要關心 TypeScript？

真正的好處：

1. 儘早捕獲錯誤：避免常見的陷阱，例如將錯誤的資料類型傳遞給函數。

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

1. 自動完成和文件：現代編輯器（如 VS Code）在您鍵入時提供豐富的自動完成建議和文件。

2. 程式碼可擴充性：TypeScript 的功能在保持一致性是關鍵的大型專案中表現出色。

3. 改進的團隊協作：清晰的類型讓團隊成員更容易一目了然地理解您的程式碼。

我發現 TypeScript 對於規劃更大的應用程式特別有幫助；了解我將處理哪些類型的資料以及我的函數獲取/返回哪些資料。

先決條件

開始之前，請確保您具備基本的 JavaScript 知識。您應該熟悉：

• 變數與資料型態（例如，let、const、字串、數字）
• 功能
• 陣列與物件

如果您還沒有信心，請花一些時間回顧 JavaScript 基礎知識。

---

2. 設定您的環境

安裝 TypeScript

TypeScript 是一個需要安裝才能開始使用的工具。只需幾個步驟，您就可以準備環境以開始使用 TypeScript 進行編碼。操作方法如下：

要開始使用 TypeScript，您需要安裝 Node.js。一旦你有了：

1. 全域安裝 TypeScript：

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

1. 驗證安裝：

   npm install -g typescript

設定 VS 代碼

VS Code 是 TypeScript 開發中最受歡迎的編輯器之一。它提供了一系列功能和擴展，使編碼變得更容易、更有效率。讓我們來設定一下：

VS Code 是 TypeScript 開發人員的首選編輯器。設定方法如下：

1. 安裝 VS Code：在此下載
2. 加入這些有用的擴充：
   • ESLint：用於檢查 TypeScript 程式碼。
   • Prettier：保持程式碼格式一致。
   • TypeScript Hero：提高工作效率。

建立您的第一個 TypeScript 項目

動手實作是學習 TypeScript 的最佳方式。本部分將指導您完成第一個專案的設置，從創建文件到運行程式碼。

1. 為您的專案建立一個新資料夾並導航到其中：

   tsc --version

1. 初始化一個新項目：

   mkdir typescript-starter
   cd typescript-starter

1. 新增打字稿：

   npm init -y

1. 建立 tsconfig.json 檔案：

   npm install --save-dev typescript

1. 寫你的第一個 TypeScript 檔案：

   npx tsc --init

1. 編譯並執行：

   echo "console.log('Hello, TypeScript!');" > index.ts

您剛剛編寫並編譯了您的第一個 TypeScript 程式！

---

3. 基本類型概述

TypeScript 的強大之處在於它的型別系統。讓我們來探索一些基本類型：

原始型

原始型別是 TypeScript 類型系統的建構塊。它們包括基本資料類型，如字串、數字和布林值。以下是如何使用它們的快速瀏覽：

1. 字串：

   npx tsc index.ts
   node index.js

1. 數字：

   let name: string = "Alice";

1. 布林值：

   let age: number = 25;

進階類型

除了基元之外，TypeScript 還支援更複雜的類型，例如陣列、元組，以及特殊類型（例如any 和unknown）。這些類型使您的程式碼靈活，同時保持安全性。

1. 陣列：

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

1. 元組：

   npm install -g typescript

1. 任何（謹慎使用）：

   tsc --version

1. 未知（比任何都安全）：

   mkdir typescript-starter
   cd typescript-starter

1. void（不傳回任何內容的函數）：

   npm init -y

1. null 和未定義：

   npm install --save-dev typescript

---

4. 使用類型註解的第一步

TypeScript 中的類型註解允許開發人員指定變數、參數或函數傳回值的類型。這可以確保程式碼遵循定義的結構，從而更容易在開發過程中捕獲錯誤並保持整個專案的一致性。

當您像平常一樣編寫程式碼時，請注意以下可以整合的功能

基本變數類型

為變數設定類型，以便它們始終設定為正確的值，並且應用程式的其餘部分了解它們是什麼。

   npx tsc --init

函數參數輸入

同樣，對於函數，您可以定義參數的類型，也可以定義傳回的類型。

   echo "console.log('Hello, TypeScript!');" > index.ts

回傳類型註釋

   npx tsc index.ts
   node index.js

實際範例：使用者設定檔

TypeScript 允許您聲明自己的類型，以便更好地建立程式碼並強制執行規則。透過使用類型或接口，您可以為物件、函數甚至聯合定義自訂類型。這不僅使您的程式碼更加健壯，而且還提高了大型專案的可讀性和一致性。

   let name: string = "Alice";

---

5. 介面快速入門

基本文法

TypeScript 中的介面定義了物件的結構，確保它們具有特定的屬性和類型。本節向您展示如何建立和使用它們：

   let age: number = 25;

可選屬性

有時，並非物件中的所有屬性都是必需的。 TypeScript 可讓您在介面中定義可選屬性以優雅地處理此類情況。

   let isStudent: boolean = true;

只讀屬性

當您想要確保某些值在設定後無法變更時，唯讀屬性非常有用。以下是如何在介面中使用它們：

   let scores: number[] = [90, 85, 88];

真實範例：API 回應

使用介面輸入 API 回應可確保您安全有效地處理來自伺服器的資料。這是一個實際的例子：

   let user: [string, number] = ["Alice", 25];

---

6. 練習項目：建立一個簡單的待辦事項列表

實作是掌握 TypeScript 的關鍵。在此專案中，您將創建一個簡單的待辦事項清單應用程序，該應用程式利用您迄今為止學到的功能：

1. 建立一個 Todo 類型：

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

1. 建立一個簡單的待辦事項陣列：

   npm install -g typescript

1. 增加一些功能來新增待辦事項並將待辦事項標記為完成：

   tsc --version

---

7. 後續步驟

現在就是這樣，希望您喜歡本教學。我將致力於一些額外的教程，以更深入地挖掘有用的 TypeScript 功能和用例。

• 接下來：深入探討 TypeScript 函數和進階型別。
• 資源：
  • TypeScript 文件
  • 用於線上練習 TypeScript 的 CodeSandbox。
• 挑戰：為部落格文章建立 TypeScript 接口，並使用它對部落格文章列表進行類型檢查。

下次見！

以上是TypeScript 基礎：初學者指南 (✅的詳細內容。更多資訊請關注PHP中文網其他相關文章！