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.6 已经发布, 5.7 目前在 beta 测试中。

什么是 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
}

No editor warnings in JavaScript files

This code crashes at runtime!

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
}

Adding this to a JS file shows errors in your editor

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
  }

Using JSDoc to give type information

Now TS has found a bad call. Arrays have slice, not trim.

带有 JSDoc 的 JavaScript

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

TypeScript adds natural syntax for providing types

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 Testimonials

First, we were surprised by the number of small bugs we found when converting our code.

Second, we underestimated how powerful the editor integration is.

TypeScript was such a boon to our stability and sanity that we started using it for all new code within days of starting the conversion.

Felix Rieseberg at Slack covered the transition of their desktop app from JavaScript to TypeScript in their blog

Read

TypeScript 开源项目

Angular

Vue

Jest

Redux

Ionic

Probot

Deno

Vercel

Yarn

GitHub
Desktop

TypeScript 为开发者所喜爱

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 被授予 “Most Adopted Technology” 奖项。

快速开始

手册
学习这门语言
演练场
在浏览器中尝试
下载
安装 TypeScript