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

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

一、簡介

什么是 TypeScript？

TypeScript 是 JavaScript 的靜態(tài)類型超集，可編譯為純 JavaScript。簡單來說，它是具有額外功能的 JavaScript，可幫助您及早發(fā)現(xiàn)錯誤并編寫更好、更易于維護的代碼。

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

• 在編碼時發(fā)現(xiàn)錯誤，而不是在部署之后。
• 編寫更易于閱讀和理解的代碼。
• 擴展您的項目，同時又不丟失事物的連接方式。

為什么使用 TypeScript？

讓我們實際一點吧。當 JavaScript 已經(jīng)可以工作時，為什么還要關心 TypeScript？

真正的好處：

1. 盡早捕獲錯誤：避免常見的陷阱，例如將錯誤的數(shù)據(jù)類型傳遞給函數(shù)。

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

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

2. 代碼可擴展性：TypeScript 的功能在保持一致性是關鍵的大型項目中表現(xiàn)出色。

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

我發(fā)現(xiàn) TypeScript 對于規(guī)劃更大的應用程序特別有幫助；了解我將處理哪些類型的數(shù)據(jù)以及我的函數(shù)獲取/返回哪些數(shù)據(jù)。

先決條件

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

• 變量和數(shù)據(jù)類型（例如，let、const、字符串、數(shù)字）
• 功能
• 數(shù)組和對象

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

---

2. 設置您的環(huán)境

安裝 TypeScript

TypeScript 是一個需要安裝才能開始使用的工具。只需幾個步驟，您就可以準備環(huán)境以開始使用 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 開發(fā)中最受歡迎的編輯器之一。它提供了一系列功能和擴展，使編碼變得更容易、更高效。讓我們來設置一下：

VS Code 是 TypeScript 開發(fā)人員的首選編輯器。設置方法如下：

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

創(chuàng)建您的第一個 TypeScript 項目

動手實踐是學習 TypeScript 的最佳方式。本部分將指導您完成第一個項目的設置，從創(chuàng)建文件到運行代碼。

1. 為您的項目創(chuàng)建一個新文件夾并導航到其中：

   tsc --version

1. 初始化一個新項目：

   mkdir typescript-starter
   cd typescript-starter

1. 添加打字稿：

   npm init -y

1. 創(chuàng)建 tsconfig.json 文件：

   npm install --save-dev typescript

1. 編寫你的第一個 TypeScript 文件：

   npx tsc --init

1. 編譯并運行：

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

您剛剛編寫并編譯了您的第一個 TypeScript 程序！

---

3. 基本類型概述

TypeScript 的強大之處在于它的類型系統(tǒng)。讓我們探索一些基本類型：

原始類型

原始類型是 TypeScript 類型系統(tǒng)的構(gòu)建塊。它們包括基本數(shù)據(jù)類型，如字符串、數(shù)字和布爾值。以下是如何使用它們的快速瀏覽：

1. 字符串：

   npx tsc index.ts
   node index.js

1. 數(shù)字：

   let name: string = "Alice";

1. 布爾值：

   let age: number = 25;

高級類型

除了基元之外，TypeScript 還支持更復雜的類型，例如數(shù)組、元組，以及特殊類型（例如any 和unknown）。這些類型使您的代碼靈活，同時保持安全性。

1. 數(shù)組：

   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（不返回任何內(nèi)容的函數(shù)）：

   npm init -y

1. null 和未定義：

   npm install --save-dev typescript

---

4. 使用類型注釋的第一步

TypeScript 中的類型注釋允許開發(fā)人員指定變量、參數(shù)或函數(shù)返回值的類型。這可以確保代碼遵循定義的結(jié)構(gòu)，從而更容易在開發(fā)過程中捕獲錯誤并保持整個項目的一致性。

當您像平常一樣編寫代碼時，請注意以下可以集成的功能

基本變量類型

為變量設置類型，以便它們始終設置為正確的值，并且應用程序的其余部分了解它們是什么。

   npx tsc --init

函數(shù)參數(shù)輸入

同樣，對于函數(shù)，您可以定義參數(shù)的類型，也可以定義返回的類型。

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

返回類型注釋

   npx tsc index.ts
   node index.js

實際示例：用戶配置文件

TypeScript 允許您聲明自己的類型，以便更好地構(gòu)建代碼并強制執(zhí)行規(guī)則。通過使用類型或接口，您可以為對象、函數(shù)甚至聯(lián)合定義自定義類型。這不僅使您的代碼更加健壯，而且還提高了大型項目的可讀性和一致性。

   let name: string = "Alice";

---

5. 接口快速入門

基本語法

TypeScript 中的接口定義了對象的結(jié)構(gòu)，確保它們具有特定的屬性和類型。本節(jié)向您展示如何創(chuàng)建和使用它們：

   let age: number = 25;

可選屬性

有時，并非對象中的所有屬性都是必需的。 TypeScript 允許您在接口中定義可選屬性以優(yōu)雅地處理此類情況。

   let isStudent: boolean = true;

只讀屬性

當您想要確保某些值在設置后無法更改時，只讀屬性非常有用。以下是如何在界面中使用它們：

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

真實示例：API 響應

使用接口輸入 API 響應可確保您安全有效地處理來自服務器的數(shù)據(jù)。這是一個實際的例子：

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

---

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

實踐是掌握 TypeScript 的關鍵。在此項目中，您將創(chuàng)建一個簡單的待辦事項列表應用程序，該應用程序利用您迄今為止學到的功能：

1. 創(chuàng)建一個 Todo 類型：

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

1. 構(gòu)建一個簡單的待辦事項數(shù)組：

   npm install -g typescript

1. 添加一些功能來添加待辦事項并將待辦事項標記為完成：

   tsc --version

---

7. 后續(xù)步驟

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

• 接下來：深入探討 TypeScript 函數(shù)和高級類型。
• 資源：
  • TypeScript 文檔
  • 用于在線練習 TypeScript 的 CodeSandbox。
• 挑戰(zhàn)：為博客文章創(chuàng)建 TypeScript 接口，并使用它對博客文章列表進行類型檢查。

下次見！

以上是TypeScript 基礎知識：初學者指南 (?的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！