介绍
您可能已经在使用 TypeScript 时接触过它，例如通过入门项目或 Angular CLI 等工具。在本教程中，您将学习如何在不使用入门项目的情况下搭建 TypeScript 项目。您还将学习 TypeScript 中的编译机制以及如何在 TypeScript 项目中使用代码检查工具 (linter)。.
先决条件
- 设备上已安装最新版本的Node。
- 了解
npm
步骤 1 – 创建一个 TypeScript 项目
要开始你的 TypeScript 项目，你需要为你的项目创建一个目录：
mkdir typescript-project
现在切换到你的项目目录：
cd typescript-project您可以通过设置项目目录来安装 TypeScript：
npm i typescript --save-dev旗帜很重要。 --save-dev 添加 TypeScript，因为它会将 TypeScript 作为开发依赖项存储。这意味着 TypeScript 是项目开发所必需的。.
安装 TypeScript 后，您可以使用以下命令初始化 TypeScript 项目：
npx tsc --initnpm 它还有一个名为“ npx 执行可执行包。. npx 它允许我们运行软件包而无需全局安装。.
命令 tsc 之所以在这里使用它，是因为它是 TypeScript 的内置编译器。当你用 TypeScript 编写代码时，执行过程会…… tsc 它可以将您的代码转换或编译成 JavaScript。.
使用标志 --init 上述命令会通过在 TypeScript 项目目录中创建 tsconfig.json 文件来初始化项目。该 tsconfig.json 文件允许您进行进一步的配置，并定义 TypeScript 和编译器之间的交互方式。 tsc 自定义。您可以根据自身需求，在此文件中删除、添加和修改配置项。.
tsconfig.json 在编辑器中打开它，即可找到默认配置：
nano tsconfig.json将会有很多选择，其中大部分将在下文解释：
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Projects */
// "incremental": true, /* Enable incremental compilation */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
. . .
}
}您可以通过 tsconfig.json 文件自定义 TypeScript 配置。例如，您可以取消注释 outDir 条目并将其设置为“./build”，这样所有编译后的 TypeScript 文件都会放在该目录中。.
通过安装 TypeScript 和安装文件 tsconfig.json现在你可以开始编写 TypeScript 应用程序并进行编译了。.
步骤 2 – 编译 TypeScript 项目
现在你可以开始编写你的 TypeScript 项目了。创建一个名为 `<filename>` 的新文件。 index.ts 在编辑器中打开它。将以下 TypeScript 代码粘贴到其中。 index.ts 写：
const world = 'world';
export function hello(who: string = world): string {
return `Hello ${who}! `;
}有了这段 TypeScript 代码，你的项目就可以编译了。在项目目录下运行 tsc 命令：
npx tsc你会注意到，如果你在 tsconfig.js 文件中指定了 build 文件夹，那么编译后的 JavaScript 文件 index.js 和 sourcemap 文件 index.js.map 都会被添加到该文件夹中。.
index.js 打开它，您将看到以下编译后的 JavaScript 代码：
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hello = void 0;
const world = 'world';
function hello(who = world) {
return `Hello ${who}! `;
}
exports.hello = hello;每次修改代码都运行 TypeScript 编译器可能很繁琐。为了解决这个问题，你可以将编译器设置为监视模式，这样每次代码修改后它都会重新编译。.
您可以使用以下命令启用监视模式：
npx tsc -w您已经了解了 TypeScript 编译器的工作原理，现在可以成功编译 TypeScript 文件。您可以通过在工作流程中引入代码检查工具 (linter) 来提升 TypeScript 项目水平。.
步骤 3 – 使用 Google TypeScript 样式表填写和更正您的代码
在编写代码时使用代码检查工具（linter）可以帮助您快速发现代码中的不一致之处、语法错误和遗漏。此外，代码风格指南不仅可以帮助您确保代码格式良好且一致，还允许您使用其他工具来强制执行这种风格。ESLint 就是一款常用的工具，它与许多集成开发环境（IDE）都能很好地配合使用，从而辅助开发过程。.
项目启动运行后，您可以使用 TypeScript 生态系统中的其他工具来避免手动配置 tsconfig.json 文件。Google TypeScript Style 就是其中之一。Google TypeScript Style（简称 GTS）集样式指南、内联样式表和自动代码纠错器于一体。使用 GTS 可以帮助您快速启动新的 TypeScript 项目，无需担心繁琐的组织细节，从而专注于项目设计。GTS 还提供默认设置，这意味着您无需自定义太多设置。.
首先安装 GTS：
npm i gts --save-dev接下来，使用以下命令初始化 GTS：
npx gts init上述命令将创建您开始使用 TypeScript 所需的一切，包括 tsconfig.json 文件和代码检查配置。如果您还没有 package.json 文件，它还会创建一个。.
运行 `npx gts init` 还会将一些有用的 npm 脚本添加到你的 package.json 文件中。例如，现在你可以运行 `npm run compile` 来编译你的 TypeScript 项目。要检查某些错误，你现在可以运行 `npm run check`。.
GTS 现已安装并正确集成到您的 TypeScript 项目中。在以后的项目中使用 GTS，您可以快速设置新的 TypeScript 项目及其必要的配置。.
由于 GTS 提供了一种无需配置、基于判断的方法，它使用自身合理的规则。这些规则遵循最佳实践，但如果您需要以任何方式更改规则，可以通过扩展默认的 eslint 规则来实现。为此，请在项目目录中创建一个名为 .eslintrc 的文件，并扩展样式规则：
---
extends:
- './node_modules/gts'这样，您就可以添加或修改 GTS 提供的样式规则。.
结果
在本教程中，您创建了一个带有自定义设置的 TypeScript 项目，并将 Google TypeScript Style (GTS) 集成到了您的 TypeScript 项目中。使用 GTS 可以帮助您快速上手新的 TypeScript 项目。借助 GTS，您无需手动设置配置或将代码检查工具集成到您的工作流程中。.
