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

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

一、簡(jiǎn)介

什么是 TypeScript？

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

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

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

為什么使用 TypeScript？

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

真正的好處：

1. 盡早捕獲錯(cuò)誤：避免常見的陷阱，例如將錯(cuò)誤的數(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. 自動(dòng)完成和文檔：現(xiàn)代編輯器（如 VS Code）在您鍵入時(shí)提供豐富的自動(dòng)完成建議和文檔。

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

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

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

先決條件

開始之前，請(qǐng)確保您具備基本的 JavaScript 知識(shí)。您應(yīng)該熟悉：

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

如果您還沒有信心，請(qǐng)花一些時(shí)間回顧一下 JavaScript 基礎(chǔ)知識(shí)。

---

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

安裝 TypeScript

TypeScript 是一個(gè)需要安裝才能開始使用的工具。只需幾個(gè)步驟，您就可以準(zhǔn)備環(huán)境以開始使用 TypeScript 進(jìn)行編碼。操作方法如下：

要開始使用 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. 驗(yàn)證安裝：

   npm install -g typescript

設(shè)置 VS 代碼

VS Code 是 TypeScript 開發(fā)中最受歡迎的編輯器之一。它提供了一系列功能和擴(kuò)展，使編碼變得更容易、更高效。讓我們來設(shè)置一下：

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

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

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

動(dòng)手實(shí)踐是學(xué)習(xí) TypeScript 的最佳方式。本部分將指導(dǎo)您完成第一個(gè)項(xiàng)目的設(shè)置，從創(chuàng)建文件到運(yùn)行代碼。

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

   tsc --version

1. 初始化一個(gè)新項(xiàng)目：

   mkdir typescript-starter
   cd typescript-starter

1. 添加打字稿：

   npm init -y

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

   npm install --save-dev typescript

1. 編寫你的第一個(gè) TypeScript 文件：

   npx tsc --init

1. 編譯并運(yùn)行：

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

您剛剛編寫并編譯了您的第一個(gè) TypeScript 程序！

---

3. 基本類型概述

TypeScript 的強(qiáng)大之處在于它的類型系統(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;

高級(jí)類型

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

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. 任何（謹(jǐn)慎使用）：

   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ā)過程中捕獲錯(cuò)誤并保持整個(gè)項(xiàng)目的一致性。

當(dāng)您像平常一樣編寫代碼時(shí)，請(qǐng)注意以下可以集成的功能

基本變量類型

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

   npx tsc --init

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

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

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

返回類型注釋

   npx tsc index.ts
   node index.js

實(shí)際示例：用戶配置文件

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

   let name: string = "Alice";

---

5. 接口快速入門

基本語法

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

   let age: number = 25;

可選屬性

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

   let isStudent: boolean = true;

只讀屬性

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

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

真實(shí)示例：API 響應(yīng)

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

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

---

6. 練習(xí)項(xiàng)目：建立一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表

實(shí)踐是掌握 TypeScript 的關(guān)鍵。在此項(xiàng)目中，您將創(chuàng)建一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表應(yīng)用程序，該應(yīng)用程序利用您迄今為止學(xué)到的功能：

1. 創(chuàng)建一個(gè) 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)建一個(gè)簡(jiǎn)單的待辦事項(xiàng)數(shù)組：

   npm install -g typescript

1. 添加一些功能來添加待辦事項(xiàng)并將待辦事項(xiàng)標(biāo)記為完成：

   tsc --version

---

7. 后續(xù)步驟

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

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

下次見！

以上是TypeScript 基礎(chǔ)知識(shí)：初學(xué)者指南 (?的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！