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

在浏览器中
通过 Playground 试用
在本地
通过 npm 安装

TypeScript 7.0 现已发布，7.1 目前处于 Beta 阶段。

TypeScript 是什么？

JavaScript 及更多

TypeScript 为 JavaScript 增加了额外的语法，以提供与编辑器更紧密的集成。在编辑器中尽早发现错误。

值得信赖的结果

TypeScript 代码会转换成 JavaScript，而后者可以在任何运行 JavaScript 的地方运行：浏览器、Node.js、Deno、Bun 以及你的应用中。

大规模下的安全性

TypeScript 理解 JavaScript，并利用类型推断为你提供出色的工具支持，无需额外的代码。

快速上手

手册
学习这门语言
Playground
在浏览器中试用
下载
安装 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 用户评价

首先，在转换代码时，我们发现的小 bug 数量之多令人惊讶。

其次，我们低估了编辑器集成的强大程度。

TypeScript 对我们的稳定性和开发者的心智健康帮助极大，以至于在开始转换的几天内，我们就把它用于所有新代码。

Slack 的 Felix Rieseberg 在博客中介绍了他们桌面应用从 JavaScript 迁移到 TypeScript 的过程

阅读

使用 TypeScript 的开源项目

Angular

Vue

Jest

Redux

Ionic

Probot

Deno

Vercel

Yarn

GitHub
桌面版

深受开发者喜爱

Stack Overflow 标志图片，以及展示 TypeScript 为第二受欢迎语言的图表

在 Stack Overflow 2020 开发者调查中被评为第二受欢迎的程序语言

State of JS 调查的标志

TypeScript 曾被 2020 State of JS 调查中78% 的受访者使用，其中93% 表示会再次使用。

TypeScript 因逐年增长而获得“最受欢迎技术”奖项。

快速上手

手册
学习这门语言
Playground
在浏览器中试用
下载
安装 TypeScript