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 运行的任何地方运行**：在浏览器中，在 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 通过删除键变为 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 开发者调查 中被评为 **第二受欢迎的编程语言**。

Logo of the State of JS survey

在 2020 State of JS 的受访者中，**78%** 使用了 TypeScript，**93%** 表示他们会再次使用它。

TypeScript 凭借其同比增长获得了 **“最受欢迎的技术”** 奖。

入门

手册
学习语言
游乐场
在您的浏览器中尝试
下载
安装 TypeScript