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.0 现已可用, 5.1 目前处于测试阶段。

什么是 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 通过 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 推荐

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

深受开发者喜爱

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 年 JS 现状 受访者中，78% 使用了 TypeScript，93% 表示他们会再次使用它。

根据同比增长，TypeScript 获得了“最常采用的技术”奖。

新手上路

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