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

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

一、簡介

什麼是 TypeScript？

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

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

• 在編碼時(shí)發(fā)現(xiàn)錯(cuò)誤，而不是在部署之後。
• 編寫更易於閱讀和理解的程式碼。
• 擴(kuò)充您的項(xiàng)目，同時(shí)又不遺失事物的連結(jié)方式。

為什麼要使用 TypeScript？

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

真正的好處：

1. 儘早捕獲錯(cuò)誤：避免常見的陷阱，例如將錯(cuò)誤的資料類型傳遞給函數(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）在您鍵入時(shí)提供豐富的自動完成建議和文件。

2. 程式碼可擴(kuò)充性：TypeScript 的功能在保持一致性是關(guān)鍵的大型專案中表現(xiàn)出色。

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

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

先決條件

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

• 變數(shù)與資料型態(tài)（例如，let、const、字串、數(shù)字）
• 功能
• 陣列與物件

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

---

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：提高工作效率。

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

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

1. 為您的專案建立一個(gè)新資料夾並導(dǎo)航到其中：

   tsc --version

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

   mkdir typescript-starter
   cd typescript-starter

1. 新增打字稿：

   npm init -y

1. 建立 tsconfig.json 檔案：

   npm install --save-dev typescript

1. 寫你的第一個(gè) TypeScript 檔案：

   npx tsc --init

1. 編譯並執(zhí)行：

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

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

---

3. 基本類型概述

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

原始型

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

1. 字串：

   npx tsc index.ts
   node index.js

1. 數(shù)字：

   let name: string = "Alice";

1. 布林值：

   let age: number = 25;

進(jìn)階類型

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

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. 任何（謹(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ù)或函數(shù)傳回值的類型。這可以確保程式碼遵循定義的結(jié)構(gòu)，從而更容易在開發(fā)過程中捕獲錯(cuò)誤並保持整個(gè)專案的一致性。

當(dāng)您像平常一樣編寫程式碼時(shí)，請注意以下可以整合的功能

基本變數(shù)類型

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

   npx tsc --init

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

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

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

回傳類型註釋

   npx tsc index.ts
   node index.js

實(shí)際範(fàn)例：使用者設(shè)定檔

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

   let name: string = "Alice";

---

5. 介面快速入門

基本文法

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

   let age: number = 25;

可選屬性

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

   let isStudent: boolean = true;

只讀屬性

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

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

真實(shí)範(fàn)例：API 回應(yīng)

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

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

---

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

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

1. 建立一個(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è)簡單的待辦事項(xiàng)陣列：

   npm install -g typescript

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

   tsc --version

---

7. 後續(xù)步驟

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

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

下次見！

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