正文

从零开始搭建一个TypeScript项目：步骤详解，新手必看

/0 浏览量
0528

准备工作

在开始搭建TypeScript项目之前，我们需要做一些准备工作：

  1. 安装Node.js和npm：TypeScript是基于Node.js的，因此我们需要安装Node.js环境。同时，npm（Node Package Manager）也将是我们管理项目依赖的工具。

  2. 安装Visual Studio Code：VS Code是一个功能强大的代码编辑器，它拥有对TypeScript的良好支持。

  3. 安装TypeScript：通过npm安装TypeScript编译器。

npm install -g typescript

创建项目文件夹

首先，创建一个用于存放项目的文件夹：

mkdir mytypescriptproject
cd mytypescriptproject

初始化项目

在项目文件夹中，初始化一个npm项目：

npm init -y

这将创建一个package.json文件，用于存储项目依赖和脚本。

安装TypeScript类型定义

在项目文件夹中，安装TypeScript的类型定义：

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

这里安装了Node.js和Jest的类型定义，Jest是一个流行的JavaScript测试框架。

配置TypeScript

创建一个tsconfig.json文件，它是TypeScript编译器配置的入口：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

这个配置文件定义了编译选项，例如输出目录、源目录、模块系统等。

创建项目结构

在项目文件夹中，创建以下目录结构：

mytypescriptproject/
  src/
    - index.ts
  dist/

在src目录中创建一个index.ts文件，这是我们的主文件。

编写代码

在src/index.ts中，我们可以开始编写TypeScript代码：

console.log("Hello, TypeScript!");

编译TypeScript

使用TypeScript编译器编译我们的代码：

tsc

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

运行项目

在项目文件夹中，运行编译后的JavaScript代码：

node dist/index.js

你应该会在控制台看到“Hello, TypeScript!”的消息。

添加测试

为了确保我们的TypeScript代码是可测试的，我们可以添加一些测试用例。首先，安装Jest：

npm install --save-dev jest ts-jest

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

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

在src目录中创建一个tests文件夹，并在其中创建一个index.test.ts文件，编写测试用例：

import { sum } from './index';

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

再次运行测试：

npm test

这将运行我们的测试，并确保我们的代码按预期工作。

总结

通过上述步骤，你已经成功搭建了一个TypeScript项目，并编写了简单的TypeScript代码。接下来，你可以根据需要添加更多的功能和测试，使你的项目更加完善。记住，TypeScript是一个强大的工具，可以帮助你编写更安全、更可靠的JavaScript代码。

-- 展开阅读全文 --