正文

从零开始搭建TypeScript项目：环境配置、初始化、构建与测试全攻略

/0 浏览量
0418

环境配置

选择合适的编辑器

在开始之前，选择一个合适的编辑器是非常重要的。Visual Studio Code（简称VS Code）是一款功能强大的代码编辑器，它拥有丰富的插件库，能够很好地支持TypeScript的开发。

  • 安装VS Code：访问VS Code官网下载并安装。
  • 安装TypeScript插件：在VS Code的扩展商店中搜索“TypeScript”并安装。

安装Node.js和npm

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。npm（Node Package Manager）是Node.js的包管理器。

  • 下载并安装Node.js：从Node.js官网下载适用于你操作系统的安装包。
  • 检查Node.js和npm版本：打开命令行工具，输入node -v和npm -v来确认安装成功。

安装TypeScript编译器

TypeScript需要使用tsc命令进行编译，因此我们需要安装TypeScript编译器。

  • 全局安装TypeScript：在命令行中运行npm install -g typescript。

项目初始化

创建项目文件夹

首先，你需要为你的TypeScript项目创建一个文件夹。

  • 创建文件夹：在命令行中输入mkdir mytypescriptproject来创建一个名为mytypescriptproject的文件夹。
  • 进入文件夹：运行cd mytypescriptproject来进入这个文件夹。

初始化npm项目

在你的项目文件夹中，初始化一个新的npm项目。

  • 运行npm初始化：在命令行中运行npm init -y，这将快速创建一个package.json文件。

创建TypeScript配置文件

在项目根目录下，创建一个名为tsconfig.json的文件，这是TypeScript项目的配置文件。

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

这个配置文件定义了编译选项，比如目标JavaScript版本、模块系统等。

构建项目

编写TypeScript代码

在你的src文件夹中，创建一个index.ts文件，并编写一些TypeScript代码。

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

使用tsc编译TypeScript代码

在命令行中，运行tsc命令来编译你的TypeScript文件。

  • 编译命令：tsc

这将生成一个dist文件夹，里面包含编译后的JavaScript文件。

测试项目

安装测试框架

TypeScript项目通常使用Jest作为测试框架。

  • 安装Jest：在命令行中运行npm install --save-dev jest ts-jest @types/jest.

配置测试

编辑package.json文件，添加一个测试脚本。

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

编写测试用例

在src文件夹中创建一个名为test的文件夹，并在这个文件夹中创建一个index.test.ts文件来编写测试用例。

test('TypeScript says hello', () => {
  expect(console.log).toHaveBeenCalledWith("Hello, TypeScript!");
});

运行测试

在命令行中，运行npm test来运行测试用例。

通过以上步骤，你已经从零开始搭建了一个TypeScript项目，并配置了环境、初始化了项目、构建了项目，并添加了测试。这是TypeScript项目开发的基础，后续你可以根据自己的需求进一步扩展和优化。

-- 展开阅读全文 --