正文

TypeScript项目搭建，一步步教你从零开始

/0 浏览量
0418

准备工作

在开始之前，请确保你的电脑上已经安装了以下工具：

  1. Node.js：TypeScript 是基于 Node.js 运行的，所以你需要安装 Node.js。
  2. npm：Node.js 会自带 npm，它是 Node.js 的包管理器。
  3. Visual Studio Code：推荐使用 VS Code 作为代码编辑器，它有很好的 TypeScript 支持。

第一步：初始化项目

  1. 打开命令行工具，进入你想要创建项目的目录。
  2. 输入以下命令创建一个新的 Node.js 项目：
npm init -y

这个命令会创建一个 package.json 文件，记录了项目的基本信息。

第二步：安装 TypeScript

  1. 在项目根目录下，输入以下命令安装 TypeScript：
npm install --save-dev typescript

这个命令会将 TypeScript 添加到 package.json 文件中的 devDependencies 部分，表示它是一个开发依赖。

  1. 创建一个名为 tsconfig.json 的文件，这个文件用于配置 TypeScript 编译器。以下是 tsconfig.json 的一个基本示例：
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

这里我们设置了编译目标为 ES5，模块为 CommonJS，并且开启了严格模式。

第三步：编写 TypeScript 代码

  1. 在项目根目录下创建一个名为 src 的文件夹，用于存放 TypeScript 代码。
  2. 在 src 文件夹下创建一个名为 index.ts 的文件，这是项目的入口文件。
console.log("Hello, TypeScript!");
  1. 在命令行工具中，输入以下命令编译 TypeScript 代码：
tsc

这个命令会编译 src/index.ts 文件，生成一个 index.js 文件，这是 JavaScript 代码。

第四步：运行项目

  1. 在命令行工具中，进入项目根目录。
  2. 输入以下命令运行项目：
node dist/index.js

如果你看到控制台输出了 “Hello, TypeScript!“，说明项目已经成功运行。

第五步：添加依赖

  1. 假设你想要使用 Express 框架来搭建一个简单的 Web 服务器，你可以使用以下命令安装它：
npm install express --save
  1. 在 src/index.ts 文件中，引入 Express 模块并创建一个 Web 服务器：
import express, { Request, Response } from 'express';

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

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, Express!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});
  1. 再次编译 TypeScript 代码：
tsc
  1. 运行项目：
node dist/index.js

现在，当你访问 http://localhost:3000 时，你将看到 “Hello, Express!” 的消息。

总结

通过以上步骤，你已经成功搭建了一个 TypeScript 项目。你可以继续添加更多的功能，比如路由、中间件、数据库连接等。希望这篇教程能帮助你从零开始搭建 TypeScript 项目。

-- 展开阅读全文 --