TypeScript 完整配置指南 - 从零到英雄
欢迎各位开发者！如果您正准备踏入 TypeScript 的世界，或者希望优化开发流程，那么本指南就是您的最佳选择。从项目初始化到运行测试和调试，我们面面俱到。
本文是我们在YouTube 上的教程的配套文章，请务必观看该教程以获取实际操作演示。
目录
- 初始化新项目
- 安装和构建 TypeScript
- 配置 tsconfig.json
- 使用 Nodemon 和 ts-node 运行应用程序
- 为 TypeScript 设置 ESLint
- 集成 Jest 进行测试
- 在 VSCode 中进行调试
初始化新项目
首先创建一个新项目。打开终端并运行：
npm init
您将被问到几个问题。此命令会初始化一个新的 Node.js 项目并package.json为您创建一个文件。
现在创建一个名为 `and` 的文件夹，并在该文件夹内src创建一个文件，内容如下：index.tssrc
const message: string = 'Hello world by Ahsan!'
console.log(message)
目前为止，您的项目结构应该如下所示：
- package.json
- src
-- index.ts
安装和构建 TypeScript
接下来，我们来安装 TypeScript。运行以下命令：
npm install typescript --save-dev
要构建 TypeScript 代码，请使用：
tsc
配置 tsconfig.json
要自定义 TypeScript 设置，您需要一个tsconfig.json配置文件。您可以使用以下命令生成该文件：
tsc --init
打开tsconfig.json文件并根据项目需求进行设置。例如：
{
...
"compilerOptions": {
"target": "ESNext",
"module": "commonjs",
...
}
}
针对我们的用例，我们设置并更新以下属性：
{
...
"compilerOptions": {
...
"target": "ESNext",
...
},
"rootDir": "./src",
"outDir": "./dist",
...
}
我们将更新package.json文件以创建一个用于构建应用程序的脚本。请package.json按如下方式更新文件：
{
...,
"scripts": {
...,
"build": "tsc"
}
}
使用 Nodemon 和 ts-node 运行应用程序
要运行您的应用而无需每次都显式构建，请使用 `<app-build>`nodemon和 `<app-install> ts-node`。使用以下命令安装它们：
npm install nodemon ts-node --save-dev
在项目根文件夹中创建一个名为 `.htm` 的文件nodemon.json，并将以下代码添加到该文件中：
{
"execMap": {
"ts": "ts-node"
}
}
将以下脚本添加到您的package.json：
"scripts": {
"dev": "nodemon src/index.ts"
}
现在，您可以使用以下命令运行您的应用程序：
npm run dev
为 TypeScript 设置 ESLint
代码检查（Linting）对于维护代码质量至关重要。请安装 ESLint 及其 TypeScript 解析器：
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
创建.eslintrc.js配置文件并添加：
/* eslint-env node */
module.exports = {
env: {
node: true,
},
extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
}
添加一个新的脚本用于package.json代码检查，如下所示：
{
...,
"scripts": {
...,
"lint": "eslint ./src/**/.ts"
}
}
注意：您可能需要忽略该
dist文件夹，因为编辑器的 ESLint 插件可能仍然会高亮显示其中的错误。为此，请创建一个.eslintignore文件并将该条目添加dist到其中。
集成 Jest 进行测试
Jest 非常适合测试 TypeScript 项目。运行以下命令即可安装：
npm install jest ts-jest @types/jest --save-dev
运行以下命令创建 Jest 配置：
npx ts-jest config:init
上述命令允许 Jest 与 TypeScript 一起使用。
index.test.ts在文件夹内创建一个名为 `<filename>` 的文件src。将以下代码添加到该文件中：
import { getMessage } from './index'
describe('getMessage()', () => {
it('should return the correct message when called', () => {
expect(getMessage()).toBe('Hello world by Ahsan!')
})
it('should be super smart', () => {
expect(true).toBe(true)
})
})
为了让 eslint 正确识别你的测试文件，你需要.eslintrc.js按如下方式更新文件：
/* eslint-env node */
module.exports = {
env: {
node: true,
jest: true, // <-- Add this
},
extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
root: true,
}
请按如下方式更新文件test中的脚本package.json：
{
...,
"scripts": {
...,
"test": "jest",
"test:watch": "jest --watch"
}
}
现在你可以运行测试了：
npm run test
# OR
npm run test:watch
在 VSCode 中进行调试
在 VSCode 中调试 TypeScript 非常简单。只需在正确F5配置后按下 `<command>` 键即可launch.json。您可以进入调试面板编辑 `<file>` 文件launch.json。或者.vscode在项目中创建一个名为 `<file>` 的新文件夹。然后在该.vscode文件夹内创建一个launch.json文件，并添加以下内容：
{
"version": "0.2.0",
"configurations": [
{
"name": "dev",
"request": "launch",
"runtimeArgs": ["run", "dev"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"type": "node"
}
]
}
完成后，您的调试面板应如下所示：
结论
以上就是关于如何搭建、测试和调试 TypeScript 项目的完整指南。无论你是 TypeScript 新手，还是希望精进技能的资深开发者，本指南都能为你提供帮助。
如果你对 Angular 特别感兴趣，那么集成 TypeScript 对你来说应该是轻而易举的事。Angular 和 TypeScript 就像花生酱和果冻一样——天作之合！🅰️
别忘了观看配套的 YouTube 视频，里面有演示视频。源代码也已上传至 GitHub。如果您觉得本指南有用，欢迎订阅我们的YouTube 频道，获取更多内容。
文章来源：https://dev.to/codewithahsan/the-complete-typescript-setup-from-zero-to-hero-398h注：本文最初发表于codewithahsan.dev