正文

从零开始搭建一个TypeScript项目，只需掌握以下关键步骤：环境准备、创建项目、配置编辑器、编写代码与测试。

/0 浏览量
0520

搭建一个TypeScript项目是一项既有趣又有挑战性的任务。在这个过程中，你将学习到如何从环境准备到代码编写与测试的每一个关键步骤。下面，我将带你一步步完成这个过程。

环境准备

在开始之前，确保你的计算机上安装了Node.js和npm（Node.js包管理器）。你可以从Node.js官网下载并安装。安装完成后，可以通过在命令行中运行node -v和npm -v来验证是否安装成功。

创建项目

  1. 打开命令行工具。
  2. 在你想要创建项目的目录下，运行以下命令来初始化一个新的Node.js项目：
npm init -y

这将创建一个名为package.json的文件，其中包含了项目的元数据和依赖关系。

  1. 在package.json中，添加TypeScript作为项目依赖：
npm install --save-dev typescript
  1. 创建一个名为tsconfig.json的文件，用于配置TypeScript编译器：
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

配置编辑器

  1. 如果你使用Visual Studio Code（VS Code），你可以通过以下步骤安装TypeScript扩展：

    • 打开VS Code。
    • 点击左侧的扩展图标。
    • 在搜索框中输入“TypeScript”。
    • 安装第一个结果。

  2. 打开tsconfig.json文件，并确保你的编辑器能够识别TypeScript文件。

编写代码

  1. 在项目根目录下创建一个名为src的文件夹。
  2. 在src文件夹中创建一个名为index.ts的文件。
console.log('Hello, TypeScript!');
  1. 在VS Code中打开index.ts文件，并运行以下命令来编译TypeScript代码：
npx tsc

这将生成一个index.js文件，它是编译后的JavaScript代码。

  1. 打开命令行工具，运行以下命令来运行编译后的JavaScript代码：
node src/index.js

你应该会在命令行中看到“Hello, TypeScript!”的输出。

测试

为了确保你的TypeScript代码质量，你可以使用测试框架，如Jest。

  1. 在项目中安装Jest：
npm install --save-dev jest ts-jest @types/jest
  1. 在package.json中添加一个测试脚本：
"scripts": {
  "test": "jest"
}
  1. 创建一个名为src/test的文件夹，并在其中创建一个名为index.test.ts的文件。
import { sum } from './index';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
  1. 在src/index.ts中添加一个sum函数：
export function sum(a: number, b: number): number {
  return a + b;
}
  1. 运行以下命令来执行测试：
npm test

你应该会看到测试通过的消息。

通过以上步骤，你已经成功搭建了一个TypeScript项目，并学会了如何编写、编译和测试TypeScript代码。继续学习更多TypeScript的高级特性和库，你可以创建出更强大、更可维护的代码。

-- 展开阅读全文 --