TypeScript 是 具有类型语法的 JavaScript

TypeScript 是一种基于 JavaScript 构建的强类型编程语言，可为你提供任何规模的更好工具。

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？

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 文件

深受开发者喜爱

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