TypeScript 是具備類型語法的 JavaScript。

TypeScript 是一種強類型程式語言，建構於 JavaScript 之上，在任何規模下都能提供更好的工具。

立即試用 TypeScript
線上或透過 npm
ts
const user = {
  firstName: "Angela",
  lastName: "Davis",
  role: "Professor",
}
 
console.log(user.name)
Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.2339Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.
 
ts
const user = {
  firstName: "Angela",
  lastName: "Davis",
  role: "Professor",
}
 
console.log(user.name)
Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.2339Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.
 

TypeScript 5.4 現已推出

什麼是 TypeScript？

JavaScript 以及更多功能

TypeScript 為 JavaScript 新增額外的語法，以支援與編輯器的更緊密整合。在編輯器中及早發現錯誤。

值得信賴的結果

TypeScript 程式碼會轉換為 JavaScript，而 JavaScript 可以在任何執行 JavaScript 的地方執行：在瀏覽器、Node.js 或 Deno 中，以及在您的應用程式中。

大規模安全性

TypeScript 了解 JavaScript，並使用類型推論在沒有額外程式碼的情況下提供絕佳的工具。

開始使用

手冊
學習語言
遊樂場
在瀏覽器中試用
下載
安裝 TypeScript

逐步採用 TypeScript

逐步將類型套用至您的 JavaScript 專案，每一步驟都能改善編輯器支援並提升您的程式碼庫。

讓我們來看看這段不正確的 JavaScript 程式碼，以及TypeScript 如何在您的編輯器中找出錯誤。

js
function compact(arr) {
    if (orr.length > 10)
        return arr.trim(0, 10)
    return arr
}

JavaScript 檔案中沒有編輯器警告

這段程式碼在執行時會崩潰！

JavaScript 檔案

js
// @ts-check
 
function compact(arr) {
  if (orr.length > 10)
Cannot find name 'orr'.2304Cannot find name 'orr'.
    return arr.trim(0, 10)
  return arr
}

將此程式碼新增至 JS 檔案中，您的編輯器會顯示錯誤

參數是 arr，不是 orr！

具備 TS 檢查的 JavaScript

js
// @ts-check
 
/** @param {any[]} arr */
function compact(arr) {
    if (arr.length > 10)
      return arr.trim(0, 10)
Property 'trim' does not exist on type 'any[]'.2339Property 'trim' does not exist on type 'any[]'.
    return arr
  }

使用 JSDoc 提供類型資訊

現在 TS 已經找到一個錯誤的呼叫。陣列有 slice，沒有 trim。

具備 JSDoc 的 JavaScript

ts
function compact(arr: string[]) {
  if (arr.length > 10)
    return arr.slice(0, 10)
  return arr
}

TypeScript 新增了提供類型的自然語法

TypeScript 檔案

描述您的資料

描述程式碼中物件和函式的形狀。

讓您可以在編輯器中查看文件和問題。

ts
interface Account {
  id: number
  displayName: string
  version: 1
}
 
function welcome(user: Account) {
  console.log(user.id)
}
ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}

TypeScript 會透過 Delete 鍵變成 JavaScript。

ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}
 

TypeScript 檔案.

ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}
 

類型已移除.

js
 
 
function verify(result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}
 

JavaScript 檔案.

TypeScript 見證

首先，我們驚訝於在轉換程式碼時發現的許多小錯誤。

其次，我們低估了編輯器整合的強大功能。

TypeScript 對我們的穩定性和健全性有很大的幫助，因此我們在開始轉換後的幾天內就開始將它用於所有新程式碼。

Slack 的 Felix Rieseberg 在他們的部落格中介紹了他們的桌面應用程式從 JavaScript 轉換到 TypeScript 的過程

閱讀

使用 TypeScript 的開源軟體

Angular

Vue

Jest

Redux

Ionic

Probot

Deno

Vercel

Yarn

GitHub
Desktop

開發人員的最愛

Image of the stack overflow logo, and a graph showing TypeScript as the 2nd most popular language

在 Stack Overflow 2020 開發人員調查 中，票選為第 2 名最受歡迎的程式語言

Logo of the State of JS survey

在 2020 年 JavaScript 狀態 受訪者中，78% 使用 TypeScript，93% 表示他們會再次使用。

TypeScript 根據年成長率，獲得「採用率最高的技術」獎項。

開始使用

手冊
學習語言
遊樂場
在瀏覽器中試用
下載
安裝 TypeScript