TypeScript 初学者入门概述和设置

在本文中，我们将在本地环境中概述和设置 TypeScript。

TypeScript

它是一种在 JavaScript 上添加一些额外功能而形成的开源语言，也称为 JavaScript 的超集。

它也可以被称为JavaScript + 一些其他功能 （静态类型是主要原因）。

TypeScript 有何不同？

TypeScript 具有以下多种优势：

• 它通过静态类型为 JavaScript 提供附加功能。
• 使用类型是完全可选的。
• 编译为常规 JavaScript。
• 也可以用于前端 JavaScript 以及带有 Node.JS 的后端。
• 包括 ES6、ES7 的大多数功能（类、箭头函数等）。
• 可以使用类型定义添加来自第三方库的类型。

这些就是 Vanilla TypeScript 可以提供的基本 TypeScript 优势。

编程语言的类型

在编程中，有两种类型的编程语言：

• 动态类型语言
• 静态类型语言

动态类型语言

在此，类型与运行时值相关联，并且在代码中没有明确命名。

动态类型语言的示例：JavaScript、Python、Ruby、PHP

静态类型语言

在此，类型被明确分配给变量、函数、参数、返回值等。

静态类型语言的示例：Java、C、C++、Rust、Go。

但是使用 TypeScript 代替常规 JavaScript 的利弊是什么？

因此，使用 TypeScript 代替常规 JavaScript 有很多优点和缺点

优点如下：-

• 它比常规 JavaScript 更强大
• 轻松发现错误
• 可预测性
• 可读性
• 受欢迎的

每当好事发生时，也会有一些坏事随之而来。

缺点如下：-

• 要编写更多代码。
• 更多内容
• 所需汇编
• 不是真正的静态类型（根据一些程序员的说法）

编译 TypeScript

因此，编译 TypeScript 是您在使用 TypeScript 时必须面对的主要难题之一，因此，以下是您可能认为在使用 TypeScript 时会派上用场的好处。

• TypeScript 的使用.ts和.tsx扩展。
• TSC （TypeScript 编译器）用于编译.ts或.tsx将文件编译为.js
• TSC 可以监视文件并在编译时报告错误。
• 它可能.ts默认包含编译。
• 大多数 IDE 都对 TypeScript 提供了很好的支持。
• 用于tsconfig.json配置 TypeScript 的工作方式。

因此，让我们编写真正的 JavaScript（不是使用幻灯片，而是实际代码）。

让我们安装 TypeScript

因为我使用的是 Windows，所以让我们全局安装它，因为 TypeScript 是我所有项目的必要部分。

让我们尝试执行这个命令

在 Windows 中 =>npm i --global typescript

在 Mac OS 中 =>sudo npm i --global typescript

您可以在Linux中尝试与 Mac OS 相同的命令，但我不确定什么命令适用于 Linux。

成功安装 TypeScript 后，您可以运行此命令来检查它是否已成功安装。

tsc -v

输出应该类似于Version 4.4.2as of on Date 10 September 2021。

这就是针对您的本地环境的 TypeScript 的基本设置。

现在让我们编写 JavaScript + 类型安全，也就是 TypeScript

安装成功后，创建一个名为 typescript Learning 的新目录（您可以随意命名）

然后创建一个新的文件名应该是这样的<desiedNameHere>.ts（输入您想要的任何名称来代替“desiedNameHere”）

因此，我们在这里编写普通的 JavaScript
let id = 5;

然后启动终端，您现在可以输入此命令将常规 JavaScript 转换为常规 JavaScript（截至目前）。

tsc filename.ts（文件类型不是强制性的，只需指定名称）

它基本上会将.ts文件类型格式的代码编译为常规 JavaScript 或ES5（默认设置）。

现在您可以在同名但带有.js扩展名的文件中检查编译下来的 JavaScript 代码。

现在您可以看到 TypeScript 将代码编译为默认设置的ES5 ，并且因为 let 和 arrow 函数是随ES6发布的，所以它不会使用它（目前）。

您还可以使用这个 TypeScript 编译器来查看此代码，并将我们编写的任何 TypeScript 代码编译为常规 JavaScript。

您可以通过点击此命令来执行此操作

tsc --watch <fileName>.ts

现在让我们尝试将 TypeScript 代码转换为 ES6 JavaScript

设置 tsconfig.json

让我们设置 TypeScript 并编辑 TypeScript 代码将 TypeScript 代码编译为常规 JavaScript 的方式。

要进行设置，您必须首先在终端中输入此命令

tsc --init

这基本上会创建一个 tsconfig.json 文件，并允许您设置任何可能在 TypeScript 中有用的设置，并且 TypeScript 将仅基于此文件进行工作。

现在打开 tsconfig.json 并找出目标写在哪里（基本上你会在第 7 行找到它）

如果需要，将目标更改为ES6 。

因此，根据我的偏好，我尝试将已编译的常规 JavaScript 定位到另一个目录，并将 TypeScript 文件定位到另一个目录。

所以我要更改 outDir 设置（您会在第 17 行找到它）。

并将该设置更改为./dist

并在其后添加一个新行并将其设为 rootDir 并将其值设置为./src。

根目录基本上是为了获取源 TypeScript 文件。

因此现在将 t=your previous TypeScript 文件移动到名为的目录中，srcTypeScript 编译器将在该目录中查找 TypeScript 文件。

现在让我们编译 TypeScript 文件，但这次我们将编译所有文件而不指定任何特定文件。

在终端中输入此命令

tsc --watch

这个命令的作用基本上就是监视 SRC 目录内的每个文件，如果发现它们是 TypeScript 文件，就将它们转换为常规 JavaScript。

您也可以直接运行，tsc它只会编译文件，而不会监视其中的任何进一步更改。

结论

所以现在，这是 Vanilla TypeScript 的基本设置（正如我的导师所说），这是适合完全初学者的 TypeScript 的基本文件结构。

现在我们将更深入地探讨 TypeScript，但那是另一篇文章的内容。

在此之前，我将只在此平台上编写开发日志，以确保检查这一点。

顺便说一句，您可以订阅我的官方博客平台codeitdown并获得订阅，我将确保每当我在那里获得一篇好文章时，我都会亲自向您发送电子邮件，而不会发送任何垃圾邮件。