介绍
对于开发者而言,TypeScript 编程语言相比 JavaScript 具有诸多优势。TypeScript 提供了更多功能,使开发者能够构建更复杂、更易出错的交互式应用程序和网站。.
TypeScript 还拥有庞大的开发者工具生态系统,提供内联文档和实时代码审查功能,让您在工作时更容易发现编码错误。.
本文解释了 TypeScript 是什么以及它与 JavaScript 的关系,并提供了资源来帮助您开始构建前端和后端应用程序。.
什么是 TypeScript?
TypeScript 是一种编程语言,它为 JavaScript 添加额外的功能。.
JavaScript 最初的设计目的并非驱动复杂的前端和后端应用程序,而是为网站添加简单的交互功能,例如创建可点击的按钮和动画下拉菜单。.
然而,JavaScript 在开发者中流行起来,他们发现了它更广泛的用途,但也因此带来了一些问题:这门语言过于宽容。开发者很容易犯编程错误或误用某些功能,导致应用程序崩溃;此外,JavaScript 还缺少许多其他语言所具备的功能。TypeScript 的开发正是为了解决这些问题,同时还要与现有的 JavaScript 环境兼容。.
TypeScript 是一种静态类型语言,它是 JavaScript 的超集,并基于 JavaScript 现有的语法和功能构建而成。这意味着你可以在 TypeScript 代码中使用 JavaScript,但不能在 JavaScript 代码中使用 TypeScript,因为 TypeScript 代码使用了一些 JavaScript 中不存在的特性和语法。.
TypeScript 必须编译成 JavaScript 才能在 Web 浏览器和 Node.js 等环境中运行(之所以称之为“编译后”,是因为它不会被翻译成底层语言)。TypeScript 代码编译成 JavaScript 后,生成的 JavaScript 代码不能直接编辑。.
构建 TypeScript 应用的工作流程是:先用 TypeScript 编写代码,然后编译成 JavaScript,最后部署。虽然这额外的步骤看似增加了不必要的复杂性,但它的存在自有其道理:如果 TypeScript 是一种全新的语言,它就毫无价值,但由于它可以编译 JavaScript 代码,使其能够在现有系统上运行,因此被广泛接受。.
TypeScript 的文件扩展名是 .ts。下面是一个名为 index.ts 的示例文件,其中包含一些基本的 TypeScript 代码:
let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();请注意,虽然语法与 JavaScript 非常相似,但此示例中可见一些不同之处:message 变量后面跟着一个冒号 (:),并且它的类型(在本例中为 TypeScript)允许我们指定 message 必须是字符串,而不能接受其他类型的值。.
TypeScript 对开发者的主要特性和优势
TypeScript之所以得名,是因为它的主要特性是为JavaScript引入了类型安全。在上面的例子中,message变量被定义为字符串类型,因此不能使用数值或其他任何类型。这看似限制性很强,但实际上对开发者来说是有益的。.
类型安全和编译时检查可以减少编程错误
设想以下场景:你从两个 HTML 文本输入框中获取值,并想将它们相加。JavaScript 会将这些值读取为字符串(毕竟这是一个文本框!)。最终结果如下:
let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"这段代码运行没有任何警告或错误,文本框中的值被视为字符串,这意味着它们不是通过算术运算相加,而是被连接起来,导致结果为«25»而不是7。如果你正在开发一款商业工具,并且想要计算一些货币价值,这可能会非常糟糕——你会向客户收取过高的费用!
这说明了类型安全的重要性。下面,通过给变量添加类型来应用变量的类型:
let a: number = "2";
let b: number = "2";
console.log(a + b);如果你尝试编译并运行这段代码,它将无法正常工作——你会收到一个错误:
类型'string'不能分配给类型'number'。.
这表示您错误地将字符串值赋给了数值变量,您可以进行修正——例如,将字符串显式转换为数字。TypeScript 通过在代码中存在拼写错误时阻止代码编译和运行,使程序调试更加轻松可靠。.
在 TypeScript 中,你不需要指定变量的类型(尽管通常应该这样做):类型推断允许你声明和使用变量而无需指定类型,TypeScript 会根据变量的值和用法推断其类型。这在将未指定类型的 JavaScript 代码导入 TypeScript 项目时非常有用。.
如果你想亲自体验一下,TypeScript Playground 允许你直接在浏览器中编写和测试 TypeScript 代码,而无需编译。.
自定义类型、类和接口可确保数据一致性。
TypeScript 扩展了 JavaScript 对面向对象编程的支持,它不仅支持自定义类型,还改进了类、接口和继承。.
构建自己的对象类型和接口,可以让你在 TypeScript 中对数据进行建模,从而确保数据得到正确的处理和存储。.
类和继承能够实现简洁的代码和 DRY 原则,使你的代码库比传统的 JavaScript 更有条理。.
枚举和字面类型使你的代码更容易理解
枚举通过命名那些原本可能含义模糊的值,使你的代码更易读、更方便。.
例如,假设为了节省空间并加快搜索速度,您将订单状态以数值形式存储在数据库中。您不会使用«待处理»、«已付款»和«已发货»这几个词,而是分别用数字 0、1 和 2 来存储这些值。.
这样做的副作用是,你的代码会变得混乱,因为数字本身并没有提供太多信息。你可能会忘记哪个数字对应哪个条件,从而使用错误的数字。枚举提供了一个便捷的解决方案:
enum OrderStatus {
pending,
paid,
shipped,
}在上面的列表中,“pending”的值为0(枚举和其他编程索引一样,从零开始计数),“paid”的值为1,“sent”的值为2。使用枚举时,通过名称引用其值,并返回索引值:
console.log(OrderStatus.paid); // 将输出 1
字面类型和联合类型为变量分配特定值。例如,你可能有一个函数,它只期望接收值“cat”或“dog”:
function myFunction(pet: "cat" | "dog") {
console.log(pet);
}如果你的代码向此函数传递了除“cat”或“dog”之外的值,将会引发错误。这有助于在开发过程中发现更多问题:你可以编写需要特定输入的函数,因为你知道,如果引入了错误导致函数接收到意外值,程序将无法编译。.
如何安装 TypeScript 并使用 TypeScript 编译器
TypeScript 代码需要编译成 JavaScript 才能在 Web 浏览器和 Node.js 中运行,为此您需要安装 TypeScript 编译器。.
您可以使用以下 npm 命令全局安装 TypeScript。.
npm install -g typescript
安装完成后,您可以使用 npx 从终端中的任何位置运行 tsc TypeScript 编译命令:
tsc index.ts
上述命令编译 TypeScript 文件 index.ts,并输出名为 index.js 的已编译 JavaScript 文件。.
如何使用 TypeScript 编写程序
TypeScript 在构建复杂的多页面应用程序和网站时表现出色。大多数开发者不会用它来做诸如为单个网页添加交互性之类的基础工作,但他们会用它来构建基于 React 或 Angular 的大型应用程序。.
许多开发者使用支持 TypeScript 集成的代码编辑器,以便利用代码补全、内联文档和错误高亮显示等功能来简化开发和调试过程。.
我可以使用我现有的 JavaScript 代码吗?
是的!TypeScript 与 JavaScript 完全兼容。您可以导入之前的 JavaScript 代码,并在 TypeScript 项目中继续使用,并随着时间的推移对其进行修改,以利用 TypeScript 的新功能。.
使用 TypeScript 完成浏览器端的构建
React 是一个库,可以帮助你为前端应用程序创建用户界面。它为你构建可重用组件提供了基础,使你的应用程序开发更加模块化和简单。它还允许你创建动态页面,用户可以通过显示、隐藏、移动和更改页面内容的外观来与之交互。React 应用程序可以使用 TypeScript 编写:这种组合是前端开发人员常用且强大的工具链。.
Angular 是一个完整的框架,它使用 TypeScript 构建组件。它超越了 React:除了提供构建用户界面的工具外,它还提供了一个完整的应用程序框架。Angular 的概念方法允许开发人员更快地构建应用程序,前提是他们的应用程序概念符合 Angular 架构。.
React 和 Angular 都可以用来构建基于 TypeScript 的 Ionic 和 Electron 应用。Ionic 允许你使用 TypeScript 构建 iOS 和 Android 移动应用,而 Electron 则允许你将 Web 应用嵌入到 Windows、Linux 和 macOS 的桌面应用中。.
在服务器上部署 TypeScript 后端
TypeScript 不仅限于构建前端应用程序,它还可以与 Node.js 结合使用,开发后端服务和命令行应用程序。.
您还可以将 TypeScript 与 Fastify Web 框架一起使用,或者使用像 Nest 这样的 TypeScript 专用框架来创建类型安全的 API。.
TypeScript 和 GraphQL
GraphQL 是一种用于从 API 搜索和检索数据的查询语言。与 TypeScript 类似,它也是类型化的,因此能够提供结构化且一致的数据。通过使用支持 GraphQL 的服务在后端实现它,并将 GraphQL 的类型与 TypeScript 代码匹配,您可以确保后端服务中建模的所有数据都能正确反映在前端,并且前端收集的所有数据在上传时都能正确存储,从而显著提高应用程序的质量。.
如果您使用 Contentful 来管理您的可组合内容,我们的社区成员已经创建了应用程序和工具,可以帮助您为内容类型生成类型声明,并将 TypeScript 与您的内容模型同步。.










