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; }'.

TypeScript6.0 现已推出

什么是 TypeScript？

JavaScript 及更多

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

值得信赖的结果

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

大规模安全性

TypeScript 能够理解 JavaScript，并利用类型推断为您提供强大的工具支持，而无需编写额外的代码。

快速开始

逐步采用 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 用户评价

首先，在转换代码时发现的小错误数量之多让我们感到惊讶。

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

TypeScript 对我们的稳定性和心态大有裨益，以至于在开始转换后的几天内，我们就开始将它用于所有新代码。

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

阅读

使用 TypeScript 的开源项目

Angular

Vue

Jest

Redux

Ionic

Probot

Deno

Vercel

Yarn

GitHub
Desktop

开发者钟爱

在 Stack Overflow 2020 开发者调查中，被评为第二受喜爱的编程语言

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

TypeScript 基于同比增长率被授予“采用率最高的技术”奖项。

快速开始