当前位置：首页 > news >正文

《TypeScript 快速上手：类型、编译与严格模式的简明教程》

news 2025/3/17 13:30:58

一、TypeScript介绍

在引入编程社区 20 多年后，JavaScript 现在已成为有史以来应用最广泛的跨平台语言之一。JavaScript 最初是一种用于向网页添加微不足道的交互性的小型脚本语言，现已发展成为各种规模的前端和后端应用程序的首选语言。虽然用 JavaScript 编写的程序的大小、范围和复杂性呈指数级增长，但 JavaScript 语言表达不同代码单元之间关系的能力却没有。结合 JavaScript 相当奇特的运行时语义，语言和程序复杂性之间的这种不匹配使得 JavaScript 开发成为一项难以大规模管理的任务。

程序员编写的最常见的错误类型可以描述为类型错误：在预期不同类型的值的地方使用了某种类型的值。这可能是由于简单的拼写错误、无法理解库的 API 表面、对运行时行为的错误假设或其他错误。 TypeScript 的目标是成为 JavaScript 程序的静态类型检查器——换句话说，是一个在代码运行之前运行的工具（静态）并确保程序的类型正确（类型检查）。 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

总而言之，ts是js的语言扩展，给js提供了一层类型检查。

二、JS ,ES ,TS的关系

TypeScript 是 JavaScript 的超集，即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了 JavaScript 的语法。相比于JavaScript ，它还增加了静态类型、类、模块、接口和类型注解方面的功能，更易于大项目的开发。

三、TypeScript 与 JavaScript 的区别

四、 TypeScript入门

JavaScript实际中问题

JavaScript 中的每个值都有一组行为，您可以通过运行不同的操作来观察。这听起来很抽象，我们来举一个简单的例子，考虑我们可能对名为 message 的变量运行的一些操作：

// 在 'message' 上访问属性 'toLowerCase'，并调用它
message.toLowerCase();
// 调用 'message'
message();

如果我们分解它，第一行可运行的代码访问一个属性 toLowerCase ，然后调用它。第二个尝试 message 直接调用。

但是假设我们不知道 message 。这很常见——我们无法可靠地说出尝试运行任何这些代码会得到什么结果。每个操作的行为完全取决于我们最初给 message 的赋值。

可以调用 message 吗？
它有 toLowerCase 这个属性吗？
如果能， toLowerCase 可以调用吗？
如果这两个值都是可调用的，它们返回什么？

这些问题的答案通常是我们在编写 JavaScript 时牢记在心的东西，我们必须希望所有细节都正确。

假设 message 按以下方式定义：

const message = "Hello World!";

正如您可能猜到的，如果我们尝试运行 message.toLowerCase() ，我们只会得到相同的小写字符串。那第二行代码呢？如果您熟悉 JavaScript，您就会知道这会失败并出现异常：

TypeError: message is not a function

如果我们能避免这样的错误，那就太好了。

当我们运行我们的代码时，我们的 JavaScript 运行时选择做什么的方式是通过确定值的类型——它具有什么样的行为和功能。这 TypeError就是暗指的一部分- 它说字符串 "Hello World!" 不能作为函数调用。

TypeScript就用诸多特性为我们解决了困扰我们的问题，我接下来将介绍他们：

静态类型检查

回想一下 TypeError 我们之前尝试将 string 作为函数调用的情况。大多数人不喜欢在运行他们的代码时出现任何类型的错误 - 这些被认为是错误！当我们编写新代码时，我们会尽量避免引入新的错误。

理想情况下，我们可以有一个工具来帮助我们在代码运行之前发现这些错误。这就是像 TypeScript 这样的静态类型检查器所做的。静态类型系统描述了当我们运行程序时我们的值的形状和行为。像 TypeScript 这样的类型检查器，告诉我们什么时候事情可能会出轨。

非异常故障

例如，规范说尝试调用不可调用的东西应该抛出错误。也许这听起来像是“明显的行为”，但您可以想象访问对象上不存在的属性也应该抛出错误。相反，JavaScript 给了我们不同的行为并返回值 undefined。

最终，静态类型系统要求必须调用哪些代码，应该在其系统中标记，即使它是不会立即抛出错误的“有效”JavaScript。比如：在 TypeScript 中，以下代码会产生关于 location 未定义的错误：

TypeScript 可以在我们的程序中捕获很多合法的错误。

错别字
未调用的函数
或基本逻辑错误

显式类型

引入一个案例：

hello.ts

function greet(person, date) {console.log(`Hello ${person}, today is ${date}!`);
}greet("hyyyyy");

到现在为止，我们还没有告诉 typescript person 或者 date 是什么类型。当我们编辑代码时会告诉 TypeScript person 是一个 string ，那 date 应该是一个 Date 对象。

有了这个，TypeScript 可以告诉我们其他 greet 可能被错误调用的情况。例如修改一下 hello.ts 代码：

function greet(person: string, date: Date) {console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

但是：

嗯？TypeScript 在我们的第二个参数上报告了一个错误，这是为什么呢？也许令人惊讶的是， Date() 在 JavaScript 中调用会返回一个 string 。可以使用 new Date() 满足我们的期望,快速修复错误：

function greet(person: string, date: Date) {console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}greet("hyyyy", new Date());

降级编译

什么是 TypeScript 降级编译？

TypeScript 降级编译是指将 TypeScript 代码编译为较低版本的 JavaScript 代码（如 ES5、ES3 等），以确保代码可以在旧版浏览器或环境中运行。

为什么需要降级编译？
- 新版 JavaScript（如 ES6+）引入了许多新特性（如箭头函数、类、模块等），但这些特性在旧版浏览器（如 IE11）或某些环境中不被支持。
- 通过降级编译，可以将这些新特性转换为旧版 JavaScript 语法，从而确保代码的兼容性。

ypeScript 编译器（`tsc`）的作用

TypeScript 编译器（tsc）是 TypeScript 的核心工具，负责将 TypeScript 代码编译为 JavaScript 代码。它支持以下功能：

将 TypeScript 语法转换为 JavaScript 语法。
支持将代码降级到指定的 JavaScript 版本（如 ES5、ES3）。
提供类型检查和错误提示。

目标版本（`target`）

在 TypeScript 编译中，target 是一个关键配置选项，用于指定编译后的 JavaScript 目标版本。例如：

es3：将代码编译为 ES3 语法（兼容性最好，但代码体积较大）。
es5：将代码编译为 ES5 语法（兼容大多数旧版浏览器）。
es6（或 es2015）：将代码编译为 ES6 语法（支持现代浏览器）。
esnext：将代码编译为最新版本的 JavaScript。

严格模式

不同的用户使用 TypeScript 在类型检查器中，希望检查的严格程度不同。

有些人正在寻找更宽松的验证体验，它可以帮助仅验证其程序的某些部分，并且仍然拥有不错的工具。这是 TypeScript 的默认体验，其中类型是可选的，推理采用最宽松的类型，并且不检查潜在的 null / undefined 值，就像 tsc 面对错误时如何编译生成JS文件一样。如果你要迁移现有的 JavaScript，这可能是理想的第一步。

相比之下，许多用户更喜欢让 TypeScript 尽可能多地立即验证，这就是该语言也提供严格性设置的原因。这些严格性设置将静态类型检查，从开关（无论您的代码是否被检查）转变为更接近于拨号的东西。你把这个拨盘调得越远，TypeScript 就会为你检查越多。这可能需要一些额外的工作，但总的来说，从长远来看，它是物有所值的，并且可以实现更彻底的检查和更准确的工具。如果可能，新的代码库应该始终打开这些严格性检查。

TypeScript 有几个可以打开或关闭的类型检查严格标志，除非另有说明，否则我们所有的示例都将在启用所有这些标志的情况下编写。在命令行里设置 strict ，或在 tsconfig.json 中配置 "strict": true 将它打开。