TypeScript 是具有型別語法的 JavaScript。

TypeScript 是一種強型別程式語言，它構建於 JavaScript 之上，可在任何規模的專案中為您提供更好的工具支援。

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; }'.

TypeScript6.0 現已推出

什麼是 TypeScript？

JavaScript 及更多

TypeScript 為 JavaScript 添加了額外的語法，以支援與您的編輯器更緊密的整合。在編輯器中儘早捕獲錯誤。

值得信賴的結果

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

大規模安全性

TypeScript 能夠理解 JavaScript，並利用型別推斷為您提供強大的工具支援，而無需編寫額外的程式碼。

快速開始

逐步採用 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 透過刪除鍵轉換為 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

開發者鍾愛

在 Stack Overflow 2020 開發者調查中，被評為第二受喜愛的程式語言

TypeScript 被 78% 的 2020 State of JS 受訪者使用，其中 93% 的受訪者表示他們會再次使用它。

TypeScript 基於同比增長率被授予“採用率最高的技術”獎項。

快速開始