TypeScript 学习笔记（八）：TypeScript 的测试与调试技巧

原创

g201909 2024-06-08 17:30:29 ©著作权

文章标签 typescript 学习笔记 json Source 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者g201909的原创作品，请联系作者获取转载授权，否则将追究法律责任

1. 引言

在前几篇学习笔记中，我们探讨了 TypeScript 的基础知识、高级类型系统、异步编程、以及与前端和后端框架的结合应用。本篇将重点介绍 TypeScript 的测试与调试技巧，包括如何使用常见的测试框架（如 Jest 和 Mocha）以及调试工具（如 VSCode 内置调试器），帮助你编写高质量、可维护的代码。

2. 测试 TypeScript 代码

测试是软件开发过程中不可或缺的一部分。TypeScript 的静态类型检查可以捕获许多错误，但单元测试和集成测试能够确保你的代码按预期工作。

2.1 使用 Jest 测试 TypeScript 代码

Jest 是一个广泛使用的 JavaScript 测试框架，支持 TypeScript。

2.1.1 安装 Jest 和相关依赖

首先，安装 Jest 及其 TypeScript 支持库。

npm install jest ts-jest @types/jest --save-dev

2.1.2 配置 Jest

创建一个 jest.config.js 文件，配置 Jest 以支持 TypeScript。

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

2.1.3 编写测试

创建一个简单的函数和对应的测试文件。

// src/sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}

// src/sum.test.ts
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

2.1.4 运行测试

在 package.json 中添加一个测试脚本，然后运行测试。

{
  "scripts": {
    "test": "jest"
  }
}

npm test

2.2 使用 Mocha 和 Chai 测试 TypeScript 代码

Mocha 是一个灵活的 JavaScript 测试框架，Chai 是一个断言库。它们可以一起使用来测试 TypeScript 代码。

2.2.1 安装 Mocha、Chai 和相关依赖

首先，安装 Mocha、Chai 及其 TypeScript 支持库。

npm install mocha chai ts-node @types/mocha @types/chai --save-dev

2.2.2 配置 Mocha

在 package.json 中添加 Mocha 配置。

{
  "scripts": {
    "test": "mocha -r ts-node/register src/**/*.test.ts"
  }
}

2.2.3 编写测试

创建一个简单的函数和对应的测试文件。

// src/sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}

// src/sum.test.ts
import { expect } from 'chai';
import { sum } from './sum';

describe('sum function', () => {
  it('should add 1 and 2 to make 3', () => {
    expect(sum(1, 2)).to.equal(3);
  });
});

2.2.4 运行测试

使用 npm test 运行测试。

npm test

3. 调试 TypeScript 代码

调试是软件开发中发现和修复问题的重要环节。TypeScript 的调试工具可以帮助你高效地找到并解决问题。

3.1 使用 VSCode 调试 TypeScript 代码

VSCode 是一个流行的代码编辑器，内置了强大的调试功能。

3.1.1 配置 VSCode 调试

在 VSCode 中创建一个调试配置文件 .vscode/launch.json。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/app.ts",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "preLaunchTask": "tsc: build - tsconfig.json"
    }
  ]
}

3.1.2 编写 TypeScript 代码

确保你的项目中有一些 TypeScript 代码。例如，一个简单的 Express 应用。

// src/app.ts
import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, TypeScript with VSCode Debugger!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

3.1.3 设置断点并开始调试

在 VSCode 中打开 src/app.ts 文件，设置断点，然后按 F5 开始调试。

3.2 使用 Source Maps

Source Maps 使得在调试时能够查看 TypeScript 源代码，而不是编译后的 JavaScript 代码。

3.2.1 配置 TypeScript 生成 Source Maps

在 tsconfig.json 文件中启用 Source Maps。

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "./dist",
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

3.2.2 编译 TypeScript 代码

使用 TypeScript 编译器编译代码，生成 Source Maps。

npx tsc

3.2.3 调试生成的代码

在调试工具中加载生成的 JavaScript 文件和 Source Maps，然后开始调试。

4. 实战示例：调试和测试综合应用

综合使用上述测试和调试技巧，开发一个完整的 TypeScript 应用。

4.1 创建项目结构

创建一个新的项目结构，包括测试和调试配置。

mkdir my-ts-app
cd my-ts-app
npm init -y
npm install typescript ts-node express jest ts-jest @types/jest @types/node --save-dev

4.2 配置 TypeScript 和 Jest

创建 tsconfig.json 和 jest.config.js 文件。

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["src"]
}

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

4.3 编写代码和测试

创建一个简单的 Express 应用和相应的测试文件。

// src/app.ts
import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, TypeScript with Express and Jest!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

// src/app.test.ts
import request from 'supertest';
import express from 'express';

const app = express();
app.get('/', (req, res) => {
  res.send('Hello, TypeScript with Express and Jest!');
});

test('GET /', async () => {
  const response = await request(app).get('/');
  expect(response.text).toBe('Hello, TypeScript with Express and Jest!');
});