TypeScript 初学者教程：缺失指南 - 第一部分

2025-05-28

TypeScript 初学者教程：缺失指南 - 第一部分

dev.to 的粉丝刚刚突破 5000 了！谢谢大家！真是个很棒的社区！还有谁也在 Twitter 上？快来联系我 =>我在这里。

什么是 TypeScript？为什么你应该使用它？通过这个 TypeScript 初学者教程了解更多信息，并开始为你的 JavaScript 代码添加类型！

最初发表于valentinog.com/blog

在本集中：

  • 什么是 TypeScript 以及它为什么存在？
  • 使用 TypeScript 的第一步
  • 一窥 TypeScript 类型

TypeScript 初学者教程：本指南的目标读者

以下指南是一份TypeScript 教程，面向有兴趣深入了解 TypeScript 的 JavaScript 开发者。这意味着您需要具备一定的“原生”JavaScript 知识，尽管我会在学习过程中为您提供一些基础知识的指导。

如果您想在学习本教程之前或之后刷新您的 JavaScript 技能，请查看我的“Little JavaScript Book”，可在 Github 上免费获取，也可以作为PDF/ePub/Mobi格式获取。

TypeScript 和“初学者”这两个词应该放在同一个教程里吗？在写这篇指南之前我并不确定，但每天都能看到很多初学者对 TypeScript 感兴趣。如果你决定这么做，请注意，在早期学习 TypeScript 和 JavaScript 会比较困难。但从长远来看，这是值得的。坚持下去！如果你也是这样，欢迎继续阅读。

开始之前，请确保您的系统上安装了最新版本的Node.js之一。

现在享受阅读吧！

TypeScript 初学者教程：什么是 TypeScript？

官方网站的定义是：“JavaScript 的类型化超集”，但它假设你已经了解“超集”是什么以及“类型化”的含义。为了简单起见，你可以将TypeScript 视为 JavaScript 的“顶层”。

TypeScript 是一个层，因为你可以在编辑器中编写 TypeScript 代码。编译后，所有 TypeScript 代码都会消失，只剩下简洁的 JavaScript。

如果你对编译步骤的概念感到困惑，请记住 JavaScript 已经被编译并解释执行了。JavaScript引擎会读取并执行你的代码。

但是JavaScript 引擎无法读取 TypeScript 代码，因此任何 TypeScript 文件都必须经过一个“预翻译”过程，称为 编译。只有经过第一步编译后，你才会得到纯 JavaScript 代码，可以在浏览器中运行。稍后你将看到TypeScript 编译是如何完成的。

现在让我们记住TypeScript 是一种特殊的 JavaScript，但它在浏览器中运行之前需要一个“翻译器”。

TypeScript 初学者教程：为什么选择 TypeScript？

一开始你或许无法理解 TypeScript 究竟有何意义，毕竟它在变成 JavaScript 代码之前会被精简。你可能会问：“TypeScript 的意义何在？” 朋友，这个问题问得真好。

实际上，一旦它能捕捉到代码中严重且愚蠢的错误，你就会立即看到它的好处。更重要的是，你的代码库将变得结构良好，几乎可以自我文档化。你还会喜欢编辑器中改进的自动完成功能，但这只是一个不错的副作用。

不管怎样，Twitter 或“橙色网站”上时不时会出现一些新帖子，说 TypeScript 没用（TypeScript 税）或太尴尬。例如：

正如 IT 领域几乎所有事物一样，两边都有支持者。TypeScript 有反对者，也有支持者，但重要的是，TypeScript 是一款可靠的工具，将它纳入你的工具箱不会带来任何损害。

我的目标是展示该工具并帮助您在 TypeScript 上形成自己的想法。

TypeScript 初学者教程：设置 TypeScript

设置？为什么要设置？TypeScript 不就是一门语言吗？某种程度上来说。TypeScript还有一个二进制文件，可以将TypeScript 代码编译为 JavaScript 代码。记住，浏览器不支持 TypeScript。接下来，我们来安装这个二进制文件。在新文件夹中创建一个新的 Node 项目：

mkdir typescript-tutorial && cd $_
npm init -y
Enter fullscreen mode Exit fullscreen mode

然后使用以下命令安装 TypeScript：

npm i typescript --save-dev
Enter fullscreen mode Exit fullscreen mode

接下来配置一个 Node 脚本，以便我们可以轻松运行 TypeScript 编译器：

  "scripts": {
    "tsc": "tsc"
  },
Enter fullscreen mode Exit fullscreen mode

tsc 代表 TypeScript 编译器，每当编译器运行时，它都会在项目文件夹中查找名为tsconfig.json的文件。让我们使用以下命令为 TypeScript 生成一个配置文件：

npm run tsc -- --init
Enter fullscreen mode Exit fullscreen mode

如果一切顺利，你会收到“消息 TS6071：已成功创建 tsconfig.json 文件。”，并且会在项目文件夹中看到新文件。现在，请保持冷静。tsconfig.json是一个令人头疼的配置文件。你不需要了解它的每一个要点。在下一节中，你只会看到一些入门相关的内容。

TypeScript 初学者教程：配置 TypeScript 编译器

在修改文件之前，最好先初始化一个 git 仓库并提交原始的tsconfig.json文件。我们将只保留部分配置选项，删除其他所有内容。稍后您可能需要将自己的版本与原始版本进行比较。首先，打开tsconfig.json 文件，并将所有原始内容替换为以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "strict": true
  }
}
Enter fullscreen mode Exit fullscreen mode

保存并关闭文件。首先，你可能想知道tsconfig.json是做什么用的。这个配置文件会被 TypeScript 编译器以及任何支持 TypeScript 的代码编辑器读取。

TypeScript 编译为“原生” JavaScript。关键target决定了所需的 JavaScript 版本：ES5（或最新版本）。

根据tsconfig.json的“严格性”级别，如果您没有在代码中添加适当的类型注释，编译器和编辑器将会遵守（稍后会详细介绍）。

将strict设置为 true后，TypeScript 会强制执行代码中最高级别的类型检查，其中包括：

  • noImplicitAny true：当变量没有定义类型时，TypeScript 会报错
  • alwaysStrict true：严格模式是 JavaScript 的一种安全机制，它可以防止意外的全局变量、默认的“this”绑定等等。当“alwaysStrict”设置为 true 时，TypeScript 会在每个 JavaScript 文件的最顶部发出“use strict”的提示。

还有更多可用的配置选项。随着时间的推移，你会学到更多，目前上面两个选项已经足够你入门了。不过，顺便问一下，“any” 指的是什么？

关于“类型”的几句话

现在你应该对 TypeScript 的功能有所了解了。一切都围绕着类型展开。这些类型并非JavaScript 中那些经典的“类型”，例如 String、Object、Boolean等等。TypeScript本身还添加了更多类型，例如any（甚至更多）。

特别是“any”，它是一种“松散”的 TypeScript 类型。它的意思是：这个变量可以是任何类型：字符串、布尔值、对象，等等，我不在乎。这实际上就像根本没有类型检查一样。如果将strict设置为 true，你就是在告诉 TypeScript：“我的代码不允许出现歧义”。

因此，我建议 TypeScript 保持最高级别的严格性，即使一开始修复所有错误可能会比较困难。现在，我们几乎可以开始体验 TypeScript 的实际应用了！

TypeScript 初学者教程：TypeScript 实际操作

一切都始于一个合法的（表面上）JavaScript 函数：filterByTerm。在项目文件夹中创建一个名为filterByTerm.js的新文件，并将以下代码复制到其中：

function filterByTerm(input, searchTerm) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("inputArr cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement.url.match(regex);
  });
}

filterByTerm("input string", "java");
Enter fullscreen mode Exit fullscreen mode

如果你现在不明白其中的逻辑，也不用担心。看看这个函数的参数，以及几行代码之后它们的用法。只要看一下代码，你就应该能发现问题所在了（这可不是 Java 的问题）。

我想知道是否有办法在我的 IDE 中检查该函数，而无需运行代码或使用Jest 进行测试。这可能吗？TypeScript 非常适合这样做，事实上它是JavaScript 中静态检查的最佳工具之一，也就是说，在代码运行之前就“测试”其正确性。

因此，请跳转到 TypeScript 世界，将文件扩展名从filterByTerm.js更改为filterByTerm.ts。通过此更改，您将发现代码中的一堆错误：

TypeScript 捕获错误

你能看到函数参数下的红色标记吗？从现在开始，我会以文本形式向你展示错误，但请记住，每当你在 TypeScript 中犯错时，IDE 和文本编辑器都会显示这些红线。

为了确认我们做错了什么，请运行：

npm run tsc
Enter fullscreen mode Exit fullscreen mode

并查看错误：

filterByTerm.ts:1:23 - error TS7006: Parameter 'input' implicitly has an 'any' type.

filterByTerm.ts:1:30 - error TS7006: Parameter 'searchTerm' implicitly has an 'any' type.

filterByTerm.ts:5:32 - error TS7006: Parameter 'arrayElement' implicitly has an 'any' type.
Enter fullscreen mode Exit fullscreen mode

答对了！TypeScript 告诉你函数参数是“any”类型，如果你还记得的话，在 TypeScript 中它可以是任意类型。我们需要在 TypeScript 代码中添加相应的类型注解。

但是等等，类型到底是什么？

什么是类型以及 JavaScript 有什么问题？

JavaScript 有多种类型，如果你之前接触过这门语言，你就会知道它有字符串、布尔值、数字、对象等等。目前，JavaScript 中有七种类型：

  • 细绳
  • 数字
  • 布尔值
  • 无效的
  • 不明确的
  • 目的
  • 符号（ECMAScript 2015 的一部分）

列表中的所有内容都是“原始类型”，除了 Object 是一种类型。每种 JavaScript 类型都有相应的表示形式，可以在我们的代码中使用，例如字符串和数字：

var name = "Hello John";
var age = 33;
Enter fullscreen mode Exit fullscreen mode

JavaScript 的“问题”在于，变量可以随时改变其类型。例如，布尔值可以稍后变为字符串（将以下代码保存在名为types.js的文件中）：

var aBoolean = false;
console.log(typeof aBoolean); // "boolean"

aBoolean = "Tom";
console.log(typeof aBoolean); // "string"
Enter fullscreen mode Exit fullscreen mode

这种转换可能是有意为之，开发人员可能确实想将“Tom”分配给布尔值，但这种错误很有可能意外发生。

现在，从技术上讲，JavaScript 本身并没有什么问题，因为它的“类型动态性”是故意设计的。JavaScript 诞生之初只是一门简单的 Web 脚本语言，而非一门成熟的企业级语言。

然而，JavaScript 宽松的特性可能会给你的代码带来严重的问题，削弱其可维护性。TypeScript 旨在通过向 JavaScript 添加强类型来解决这些问题。事实上，如果你将types.js的扩展名更改为types.ts，你会看到 TypeScript 在 IDE 中报错。

types.ts的编译将产生：

types.ts:4:1 - error TS2322: Type '"Tom"' is not assignable to type 'boolean'.
Enter fullscreen mode Exit fullscreen mode

有了这些知识，让我们更深入地研究 TypeScript 类型。

敬请期待第二部分！

文章来源：https://dev.to/valentinogagliardi/typescript-tutorial-for-beginners-the-missing-guide-part-1-52hj
Devto 翻译
PREV
7 分钟掌握 Git
NEXT
Jest 初学者教程：开始使用 Jest 进行 JavaScript 测试