安装和运行TypeScript编译器的详细指南

在这篇文章中，我们将学习如何在不本地安装TypeScript的情况下运行TypeScript编译器。然后，我们将继续讨论如何在项目中本地安装TypeScript并运行其编译器。

创建项目

我们将从创建一个npm项目开始:

• 在你选择的文件夹中打开Visual Studio Code（或你喜欢的编辑器）。
• 创建一个名为index.ts 的文件并粘贴以下内容。

function firstOrNull<T>(array: T[]): T | null {
  return array.length === 0 ? null : array[0];
}

• 打开终端窗口，输入以下内容以初始化该项目:

npm init

• 当出现提示时，在软件包名称中输入 "program"，并接受其他提示的默认值。

一个package.json ，包含你刚才指定的值。

这样就完成了项目的设置。

在不安装TypeScript到项目中的情况下运行编译器

有一种方法可以在不安装TypeScript的情况下使用TypeScript编译器。该 npx工具可以被用来临时安装TypeScript和运行编译器。

• 在终端窗口，运行以下命令:

npx -p typescript tsc index.ts

让我们把这个命令分解一下:

• 这个命令首先下载并安装了typescript npm包。
• tsc 是TypeScript编译器的可执行名称。所以，一旦 ，TypeScript编译器就会被调用。typescript
• index.ts 是我们要编译的TypeScript文件。
• 编译完成后，typescript npm包将被卸载。

在命令运行后，将存在一个index.js ，其中包含以下转译的代码:

function firstOrNull(array) {
  return array.length === 0 ? null : array[0];
}

在转译过程中，类型注释已被删除:

• 删除index.js 。
• 通过将length 改为count ，改变TypeScript函数以引用一个无效的属性。

function firstOrNull<T>(array: T[]): T | null {
  return array.count === 0 ? null : array[0];}

• 重新运行TypeScript编译器:

npx -p typescript tsc index.ts

在终端窗口中出现了一个类型错误:

注意，即使出现了错误，JavaScript文件仍然被创建。

• 删除index.js 。
• 有一个编译器选项可以在出现错误时停止创建JavaScript文件。这个选项被称为noEmitOnError 。让我们来试试这个。

npx -p typescript tsc index.ts --noEmitOnError

错误还是出现了，但这次没有创建JavaScript文件。

• 在我们进入下一节之前，纠正函数中的问题:

function firstOrNull<T>(array: T[]): T | null {
  return array.length === 0 ? null : array[0];
}

使用TypeScript的本地版本

TypeScript可以像其他依赖项一样作为项目依赖项进行管理。这是在项目中使用TypeScript的比较常见的方法。

• 让我们安装typescript npm包作为开发依赖:

npm install typescript --save-dev

完成后，typescript 将作为开发依赖项出现在package.json 。

• 我们需要在package.json 中添加一个npm脚本来调用TypeScript编译器:

"scripts": {
  ...
  "tsc": "tsc"
},

• 现在我们可以在终端窗口中运行tsc 命令:

npm run tsc index.ts

一个index.js 文件被创建。

• 在继续下一节之前，请删除index.js 。

指定配置选项

TypeScript编译器有很多选项。所有可用选项的细节可以在这里找到。

我们可以将编译器选项传递到tsc ，正如我们所看到的，但有一个更方便的方法。我们可以在一个叫做tsconfig.json 的文件中定义所有的选项。

• 创建一个包含以下内容的tsconfig.json :

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

outDir 选项指定了生成的JavaScript文件所处的文件夹。

• 在终端窗口中运行以下命令:

npm run tsc

生成的JavaScript文件被放置在dist 文件夹中。

很好!

总结

使用npx 是编译TypeScript代码的一个很好的轻量级方法。更常见的方法是将TypeScript作为开发依赖安装到项目中。

TypeScript编译器有很多选项，可以在tsconfig.json 文件中定义。