TypeScript 簡介

什麼是 TypeScript

TypeScript 是由微軟維護和開發的一門開源語言。

基本上，TypeScript 為 JavaScript 添加了額外的語法，以支援與編輯器的更緊密整合。在編輯器或 CI/CD 管道中儘早發現錯誤，並編寫更易於維護的程式碼。

我們稍後可以討論 TypeScript 的其他優點，現在讓我們看一些例子！

第一個 TypeScript 程式碼

請看下面的程式碼片段，然後我們可以一起進行解析。

type User = {
  name: string;
  age: number;
};

function isAdult(user: User): boolean {
  return user.age >= 18;
}

const justine = {
  name: 'Justine',
  age: 23,
} satisfies User;

const isJustineAnAdult = isAdult(justine);

第一部分（帶有 type 關鍵字）負責宣告我們自定義的表示使用者的物件型別。之後，我們利用這個新建立的型別來建立函式 isAdult，它接受一個型別為 User 的引數並返回一個 boolean 值。在此之後，我們建立了 justine，這是我們的示例資料，可用於呼叫先前定義的函式。最後，我們建立一個新變數，用於儲存 justine 是否是成年人的資訊。

關於這個例子，還有一些額外的事情需要了解。首先，如果我們不遵守宣告的型別，TypeScript 會通知我們出錯了並防止誤用。其次，並非所有東西都必須顯式地指定型別——TypeScript 會為我們推斷型別。例如，變數 isJustineAnAdult 的型別是 boolean，即使我們沒有明確地指定它，並且 justine 對於我們的函式來說是一個有效的引數，儘管我們沒有將這個變數宣告為 User 型別。

TypeScript 由什麼組成？

TypeScript 由兩個主要部分組成：程式碼本身和型別定義。

TypeScript 程式碼

程式碼部分是常規的 JavaScript，並帶有用於型別註解的 TypeScript 特定語法。當 TypeScript 程式碼被編譯時，所有 TypeScript 特定的部分都會被移除，從而產生可以在任何環境中執行的純淨 JavaScript。例如：

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

型別定義

型別定義描述了現有 JavaScript 程式碼的結構。它們通常儲存在 .d.ts 檔案中，並且不包含任何實際的實現——它們只描述型別。這些定義對於與 JavaScript 的互操作性至關重要：程式碼通常不以 TypeScript 的形式分發，而是被轉譯為包含附帶型別定義檔案的 JavaScript。

例如，當你在 Node.js 中使用 TypeScript 時，你需要 Node.js API 的型別定義。這可以透過 @types/node 獲得。使用以下命令安裝它：

npm add --save-dev @types/node

這些型別定義讓 TypeScript 能夠理解 Node.js 的 API，並在你使用像 fs.readFile 或 http.createServer 這樣的函式時提供正確的型別檢查和自動補全。例如：

import { resolve } from 'node:path';

resolve(123, 456);
Argument of type 'number' is not assignable to parameter of type 'string'.

許多流行的 JavaScript 庫的型別定義都可以在 @types 名稱空間下找到，由 DefinitelyTyped 社群維護。這使得現有的 JavaScript 庫能夠與 TypeScript 專案無縫整合。

轉換能力

TypeScript 還包含強大的轉換能力，特別是對於 JSX（在 React 和類似框架中使用）。TypeScript 編譯器可以將 JSX 語法轉換為常規的 JavaScript，類似於 Babel 的工作方式。雖然我們在這些文章中不會涉及這些轉換特性，但值得注意的是，TypeScript 不僅僅是一個型別檢查工具——它還是一個用於將現代 JavaScript 語法轉換為適用於不同環境的相容版本的構建工具。

如何執行 TypeScript 程式碼

好的，我們現在有了一些 TypeScript 程式碼。那麼我們該如何執行它呢？有幾種可能的方法可以執行 TypeScript 程式碼，我們將在接下來的文章中逐一介紹。