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 4.9 现在可用

什么是TypeScript?

JavaScript 和更多

TypeScript 为 JavaScript 添加了额外的语法，以支持 与编辑器更紧密的集成. 及早在编辑器中捕获错误.

您可以信赖的结果

TypeScript 代码转换为 JavaScript，它 可以在 JavaScript 运行的任何地方运行: 在浏览器中、在 Node.js 或 Deno 上以及在您的应用程序中.

规模安全

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 文件会显示编辑器中的错误

the param is arr, not 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 开发人员调查 中被评为第二大最受欢迎的编程语言

Logo of the State of JS survey

78% 的 2020 年 JS 状态 受访者使用了TypeScript, 其中 93% 的人表示他们会再次使用它.

TypeScript 因同比增长而获得 “最受采用技术”奖.

开始

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