介绍
您可能以前在使用起始项目或 Angular CLI 等工具时使用过 TypeScript. 在本教程中,您将学习如何在没有起始人的帮助下设置 TypeScript 项目。
前提条件
要完成本教程,您将需要以下内容:
- 最新版本的 Node 已安装在您的计算机上. 您可以通过遵循 如何安装 Node.js 和创建本地开发环境 教程
- 熟悉
npm.npm附带 Node. 有关如何使用npm了解更多信息,请参阅此 如何使用 Node.js 模块与npm和package.json教程。
步骤 1 – 启动 TypeScript 项目
要开始您的 TypeScript 项目,您需要为您的项目创建一个目录:
1mkdir typescript-project
现在更改您的项目目录:
1cd typescript-project
随着项目目录的设置,您可以安装 TypeScript:
1npm i typescript --save-dev
包括--save-dev旗帜是很重要的,因为它将TypeScript保存为开发依赖,这意味着TypeScript对于您的项目的发展是绝对必要的。
安装了 TypeScript,您可以使用以下命令初始化您的 TypeScript 项目:
1npx tsc --init
npm还包括一个名为npx的工具,它将运行可执行的包。
这里使用的tsc命令是因为它是内置的TypeScript编译器,当你在TypeScript中写代码时,运行tsc会将你的代码转换或编译成JavaScript。
在上面的命令中使用--init标志将通过在您的typescript-project项目目录中创建一个tsconfig.json文件来初始化您的项目,这个tsconfig.json文件将允许您进一步配置和定制TypeScript和tsc编译器的交互方式。
在您的编辑器中打开tsconfig.json:
1nano tsconfig.json
你,你会找到默认配置. 将有许多选项,其中大多数被评论:
1[label typescript-project/tsconfig.json]
2{
3 "compilerOptions": {
4 /* Visit https://aka.ms/tsconfig.json to read more about this file */
5
6 /* Projects */
7 // "incremental": true, /* Enable incremental compilation */
8 // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
9 // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
10 // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
11 // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
12 // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
13
14 . . .
15 }
16}
你可以自定义你的TypeScript配置. 在tsconfig.json文件中. 例如,你可能会考虑放弃评论outDir条目,并将其设置为"./build,这将把你编译的所有TypeScript文件放入该目录。
安装了TypeScript并安装了tsconfig.json文件,您现在可以继续编码您的TypeScript应用程序并编译它。
<$>[注] **注:**下面的第3步将用合理的默认值代替许多配置,但这些更改会让你立即开始。
步骤 2 – 编译 TypeScript 项目
您现在可以开始编码您的 TypeScript 项目。在 youreditor 中打开一个名为 index.ts 的新文件。在 index.ts 中写下以下 TypeScript 代码:
1[label typescript-project/index.ts]
2const world = 'world';
3
4export function hello(who: string = world): string {
5 return `Hello ${who}! `;
6}
有了这个 TypeScript 代码,您的项目已经准备好编译。
1npx tsc
您会注意到编译的 JavaScript index.js 文件和 index.js.map 源代码文件都已被添加到 build 文件夹中,如果您在 tsconfig.js 文件中指定了该文件。
打开index.js,你会找到以下编译的JavaScript代码:
1[label typescript-project/build/index.js]
2"use strict";
3Object.defineProperty(exports, "__esModule", { value: true });
4exports.hello = void 0;
5const world = 'world';
6function hello(who = world) {
7 return `Hello ${who}! `;
8}
9exports.hello = hello;
运行 TypeScript 编译器每次你进行更改时可能很累。 要修复此问题,你可以将编译器放入观看模式。 将编译器设置为观看模式意味着每次进行更改时,你的 TypeScript 文件都会被重新编译。
您可以使用以下命令激活观看模式:
1npx tsc -w
您已经了解了TypeScript编译器是如何工作的,现在您可以成功编译TypeScript文件,您可以将TypeScript项目带到下一个层次,通过在工作流中引入Linter。
步骤 3 – 使用 Google TypeScript 风格来粘贴和纠正您的代码
在编码时使用灯具将有助于您快速发现代码中的不一致、语法错误和遗漏,此外,风格指南不仅会帮助您确保您的代码形成和一致,还允许您使用额外的工具来执行该风格。
随着您的项目现在的设置,您可以使用TypeScript生态系统中的其他工具来帮助并避免在tconfig.json文件中手动设置链接和配置。 Google TypeScript Style是此类工具之一。 Google TypeScript Style,被称为GTS,是一个风格指南,灯具和自动代码纠正器。使用GTS将帮助您快速启动新的TypeScript项目,避免专注于小型组织细节来设计您的项目。
开始安装 GTS:
1npm i gts --save-dev
从这里开始,使用以下命令启动 GTS:
1npx gts init
上面的命令将生成您需要开始使用 TypeScript 的所有内容,包括一个 tsconfig.json 文件和一个 linting 设置。
运行npx gts init也将为您的package.json文件添加有用的npm脚本,例如,您现在可以运行npm run compile来编译您的TypeScript项目。
<$>[注] **注:**在安装GTS之前安装TypeScript确保您在开发应用程序时拥有最新的TypeScript版本.由于GTS的发展速度比TypeScript慢,您可能会发现它会建议在您的dev依赖中降级TypeScript。
此外,由于 eslint TypeScript linter 具有多种支持的 TypeScript 版本,因此新版本的语言可能不属于该范围。在这种情况下,eslint 会警告您。有很好的可能性它会继续正常工作,但如果您遇到问题,您可以通过在安装时指定 TypeScript 版本来降级。
GTS 现在已安装并正确集成到您的 TypeScript 项目中,在未来的项目中使用 GTS 将允许您快速设置新的 TypeScript 项目,并提供必要的配置。
由于 GTS 提供了一个有观点的,无配置的方法,它将使用其自己的合理的链接和修复规则. 这些遵循许多最佳做法,但如果你发现自己需要以任何方式修改规则,你可以通过扩展默认的eslint规则来做到这一点。
1---
2extends:
3 - './node_modules/gts'
这将允许您添加或修改 GTS 提供的风格规则。
结论
在本教程中,您开始了使用自定义配置的TypeScript项目,您还将谷歌TypeScript风格集成到您的TypeScript项目中,使用GTS将帮助您快速使用新的TypeScript项目。
作为一个额外的步骤,您可能对学习 如何在Visual Studio Code中使用TypeScript感兴趣。 您也可以查看本文以了解 如何使用TypeScript与React)。