从头开始创建TypeScript项目

从头开始创建TypeScript项目

TypeScript 是 JavaScript 的超集,用于构建更安全的大型应用程序。 它为语言添加了可选的静态类型,使得在编译之前更容易检测错误。

该语言还引入了一些 JavaScript 中不存在的特性。 这些包括泛型、类、接口、枚举和装饰器。

只需几个步骤,即可了解如何从头开始设置您的第一个 TypeScript 项目。

推荐:如何修复Windows 10/11 Audacity Internal PortAudio Error错误

第 1 步:安装 TypeScript

在您的系统上使用 TypeScript 之前,您必须全局安装 TypeScript 编译器。

从头开始创建TypeScript项目

运行以下命令以全局安装 TypeScript:

npm install -g typescript

第 2 步:设置您的项目

要设置您的 TypeScript 项目,首先在您选择的任何 IDE 中创建一个空的项目目录。

然后,使用 .ts 文件扩展名。 TypeScript 不能在任何环境中运行。 因此,它必须先编译成 JavaScript 才能运行。

要将 TypeScript 文件编译为 JavaScript,请导航到终端上的项目目录。 然后运行 tsc 后跟您的 TypeScript 文件的名称。

例如:

tscindex.ts

该命令将创建一个 index.js 同一目录中的文件 索引.ts 文件驻留。

这种行为可能是不可取的,因为它会使您的项目难以管理多个 .js.ts 同一目录下的文件。

您可以更改此默认行为并使用 tsconfig.json 文件。

在终端中运行以下命令以创建一个 tsconfig.json 项目中的文件:

tsc 

这会生成一个包含 TypeScript 编译器的所有配置设置的文件。

您将仅涵盖开始项目所需的基础知识,但您可以了解更多信息 在 TypeScript tsconfig 文档中。

第 3 步:设置 TypeScript 编译器以获得更好的工作流程

tsconfig.json 文件包含 TypeScript 编译器的配置选项,分为七个部分:


大多数属性默认禁用(它们已被注释掉)。 您可以通过取消注释来激活和修改它们。

以下是更改生成的 JavaScript 文件位置所需执行的步骤:

  1. 打开 tsconfig.json 并找到 发射 部分。
  2. 在里面 发射 部分,取消注释 输出目录 属性并指定要存储已编译的目录 .ts 文件。 现在任何时候你跑 tsc, 您的 .js 文件将在指定的文件夹中。

跑步 tsc 后跟要编译的文件的名称对于您的工作流程来说并不是最佳的,尤其是当您需要编译多个文件时。

为了解决这个问题,TypeScript 编译器提供了一个属性,允许它在一个命令中编译目录中的所有文件。

请按照以下步骤进行设置:

  1. 打开 tsconfig.json 并找到 模块 部分。
  2. 在里面 模块 部分,取消注释 根目录 财产或 根目录 (如果您希望编译器编译多个 .ts 目录到 .js) 并指定文件目录。

这些设置将使您的工作流程更好,文件更易于维护。

TypeScript 的优势

TypeScript 相对于 JavaScript 的主要优势在于它的类型安全性。 TypeScript 使快速检测难以发现的错误成为可能。 此功能使其成为构建安全和大规模应用程序的理想选择

推荐:ACF扩展插件Advanced Custom Fields Extended PRO


发表评论