Typescript vs Javascript – 了解差异

作者
Tweet
Share
Share
Pin
0 Shares

JavaScript 与 TypeScript：深入比较

一个我经常被问到的问题是：JavaScript 和 TypeScript 之间有什么区别？ 让我们一起来探索一下这两个编程语言。

JavaScript (JS) 自您开始编写代码以来就一直是所有前端项目的重要组成部分。如果您对 JS 有一些了解，那么可以将 TypeScript 看作是 JS 的增强版本，它添加了一些额外的特性，使您的应用程序更加规范且具有类型定义。TypeScript 是微软开发的一个开源项目，其主要目标是提高 JS 开发的效率，并在编译阶段尽早发现错误。

在本文中，我们将深入探讨 JavaScript 和 TypeScript 的一些关键特性，并对比分析这两种脚本语言之间的差异。

什么是 JavaScript?

JavaScript 主要用于客户端脚本编写。您可以在 HTML 页面中直接嵌入脚本，或者创建扩展名为 .js 的文件，然后在 HTML 文件中引用它。JavaScript 的一个典型应用场景是登录页面验证，例如，当您输入的用户名或密码不正确时，页面会显示错误提示。

让我们来看一个简单的 JS 代码示例，并在浏览器中运行它：

首先，创建一个名为 example.html 的文件，并在其中添加以下代码：

<script>
feeling = 'happy';
feeling = 23;
</script>

这段简单的代码声明了一个变量，并首先赋予它一个字符串值 “happy”。 随后，我们又为同一个变量赋予了一个数字值。JavaScript 不会对此报错，我们可以在任何浏览器上运行这段代码，而不会遇到任何问题。接下来，我们尝试从用户获取 feeling 的值：

我们的 HTML 代码可能如下所示：

<input type="textbox" id="howyoufeel">

相应的 JavaScript 代码如下：

feeling = document.getElementById("howyoufeel").value;

除非我们在脚本中进行明确的类型检查，否则 JS 将接受用户输入的任何值并将其赋予变量。这意味着用户可以将任何内容，例如 234，@.#$% 等，放入 feeling 变量中。

JavaScript 的主要特点

从以上例子中，我们可以总结出 JavaScript 的以下几个主要特点：

  • 弱类型脚本语言
  • 可用于客户端和服务器端脚本（通过 Node.js）
  • 灵活且动态
  • 所有主流浏览器均支持
  • 轻量级且为解释型语言

如果您有兴趣深入学习 JavaScript，可以参考这个 Udemy 课程.

什么是 TypeScript?

真实世界的应用程序通常包含大量的验证和动态检查。对于此类应用程序，JavaScript 代码在某些情况下会变得难以测试和维护，这主要是由于缺乏类型检查机制。在从用户获取数据的同时，确保数据的正确性至关重要。这正是 TypeScript 发挥作用的地方。

TypeScript 是一种强类型语言。如果您没有明确定义变量的类型，TypeScript 编译器将报错。

JavaScript 和 TypeScript 都遵循 ECMAScript 规范。TypeScript 可以运行所有 JavaScript 代码并支持所有的 JS 库，因此它被认为是 JavaScript 的超集。

TypeScript 的安装

要在 TypeScript 中执行我们之前的代码示例，我们需要使用 npm 包安装 TypeScript 编译器 (如果您的环境中已安装 Node.js):

npm install -g typescript

您还可以从官方 微软下载页面 直接下载安装。 此外，您可以使用 TS Playground 来查看代码从 ts 文件编译成 js 文件的过程。

完成安装后，您可以在 tsconfig.json 文件中配置项目设置，然后使用任何 IDE 或文本编辑器编写 TypeScript 代码，并将文件保存为 .ts 扩展名。

尽管如此，您仍然可以通过不显式定义变量类型来规避 TypeScript 的类型检查，因为 TypeScript 可以推断出数据类型。但是，如果您在编译过程中赋予了变量与其初始类型不符的值（例如，在我们的例子中，第一次使用时被推断为字符串类型），则会收到 “feeling” 错误提示。

通过类型注释来提高代码的可维护性和易读性总是一个不错的选择：

var feeling: string = “happy”;

TypeScript 提供了许多其他功能，可以使开发人员的工作更加轻松。

TypeScript 的主要特点

TypeScript 拥有丰富的功能集，每个新版本都会引入新的特性，使其开发过程更加便捷。例如，在最新的 4.0 版本中，一些新增功能 包括可变元组类型，自定义 JSX 工厂，以及从构造函数推断类属性等等。 TypeScript 的一些典型特点包括：

  • 支持面向对象的编程概念，如接口，继承，类和泛型
  • 能够在编译阶段及早发现错误
  • 对 IDE 提供语法检查和智能提示
  • 在类型检查的帮助下，调试代码更加容易
  • 能够编译为 JavaScript 代码
  • 可用于服务器端和客户端应用程序开发
  • 支持跨平台和跨浏览器运行
  • 支持所有 JavaScript 库和扩展

为什么我们需要 TypeScript？（TypeScript 相对于 JavaScript 的优势）

在 2012 年正式公开之前，微软已经将 TypeScript 开发并使用于其内部项目长达两年。他们创建了这种类型化的 JavaScript，以方便测试生产级企业应用程序代码。您仍然可以使用动态类型，但也可以在必要时为变量添加类型约束。

考虑以下代码：

var mynum  = //从用户获取;
addten(number){
return number + 10;
}

我们希望结果始终是一个数值。但是，如果用户输入了 “羊” 呢？输出将会是 “sheep10″。理想情况下，我们应该告诉用户这个操作是不可行的！

此外，当您有可用的类型信息时，文本编辑器和 IDE 会更加智能且易于使用，并有助于避免运行时错误。在后期重构代码也会变得更加容易。

这是否意味着我们不再需要 JavaScript？（TypeScript 相对于 JavaScript 的缺点）

您可以将 TypeScript 看作是 JavaScript 的扩展，而不是 JavaScript 的替代品。

对于较小的代码块，TypeScript 可能会造成额外的开销，因为需要进行安装，编译和反编译等步骤。而使用 JavaScript，您只需在 HTML 文件中直接编写脚本即可。调试代码也更加方便，因为每次修改代码后，您只需简单地刷新浏览器即可。

正面对比

现在我们已经了解了 TypeScript 和 JavaScript 的特性和优势，让我们来做一个更详细的对比：

TypeScript JavaScript
一种能够在编译时及早发现错误的类型化语言 错误在运行时才会被发现
适用于大型项目，因为它提高了代码的可维护性和可读性 随着代码量的增加，测试和调试变得困难，因此 JS 更适合小型项目
是 JS 的超集，具备面向对象和类型检查等功能 一种支持动态 Web 内容创建的脚本语言
需要安装编译器并配置设置 无需任何安装，可以直接在浏览器中使用 <script> 标签编写 JS 代码
所有的 .ts 文件在执行前都会被编译成 .js 文件，这个过程称为反编译 开发人员可以将 .js 文件直接通过 <src> 标签引入到 HTML 文件中执行
功能强大且直观，具有丰富的功能，如模块，泛型和接口 适用于不需要高级功能的简单 Web 应用程序
可用于服务端和客户端脚本 易于用于客户端脚本，但对于服务器端脚本来说变得繁重且复杂
由于编译步骤，执行速度较慢 无需编译，因此执行速度更快
支持静态和动态类型 仅支持动态类型
可以指定类型注释，如：
var feeling: string = "happy";		 无法指定类型注释，因为不能定义变量类型。

结论

从学习角度来看，JavaScript 可能是你的入门首选。你只需要打开一个文件，在 <script></script> 标签中输入一些代码，将它保存为 HTML 文件，就能看到运行结果！然后，你可以在此基础上创建更多动态内容。

此外，掌握 JavaScript 知识对于开发大型应用程序，并轻松过渡到 TypeScript 都非常有用。

然而，从职业和薪资的角度来看，作为一名 TypeScript 开发人员，你将能够更灵活，更熟练地处理 JS 和 TS 项目，因此在就业市场中更有竞争力。一般来说，TypeScript 开发人员的年薪在 11 万美元至 14.7 万美元之间，而 JS 开发人员的年薪约为 6.3 万美元至 11.8 万美元。