轻松上手 TypeScript：项目搭建全攻略详解

环境准备

安装 Node.js 和 npm

首先，你需要安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，npm 是一个包管理器，可以方便地管理项目中的依赖。

访问 Node.js 官网下载适合你操作系统的安装包。
安装完成后，打开命令行窗口，输入 node -v 和 npm -v 检查是否安装成功。

安装 TypeScript

接下来，我们需要安装 TypeScript。TypeScript 是一种由微软开发的编程语言，它是 JavaScript 的一个超集，增加了可选的静态类型和基于类的面向对象编程。

在命令行窗口中，运行以下命令安装 TypeScript：

npm install -g typescript

安装完成后，你可以使用 tsc -v 命令检查 TypeScript 是否安装成功。

项目初始化

创建项目目录

在命令行窗口中，进入你想要创建项目的目录，然后运行以下命令创建一个新的项目文件夹：

mkdir my-typescript-project
cd my-typescript-project

初始化 npm 项目

在项目目录中，运行以下命令初始化一个新的 npm 项目：

npm init -y

这会创建一个 package.json 文件，该文件包含了项目的基本信息和依赖列表。

安装 TypeScript 相关依赖

为了在项目中使用 TypeScript，我们需要安装以下依赖：

typescript：TypeScript 编译器
ts-node：在 Node.js 环境中直接运行 TypeScript 代码
typescript-node：TypeScript 编译器的 Node.js 扩展

在命令行窗口中，运行以下命令安装这些依赖：

npm install --save-dev typescript ts-node @types/node

配置 TypeScript

创建 `tsconfig.json` 文件

在项目根目录中，创建一个名为 tsconfig.json 的文件。这是一个 TypeScript 的配置文件，它定义了编译器如何处理 TypeScript 代码。

以下是 tsconfig.json 文件的示例内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

创建 `src` 目录

在项目根目录中，创建一个名为 src 的目录，用于存放 TypeScript 代码。

创建入口文件

在 src 目录中，创建一个名为 index.ts 的文件，这是项目的入口文件。

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

运行 TypeScript 代码

在命令行窗口中，进入 src 目录，然后运行以下命令编译 TypeScript 代码：

tsc

编译完成后，在项目根目录中会生成一个名为 dist 的目录，其中包含编译后的 JavaScript 代码。

运行 JavaScript 代码

在命令行窗口中，进入 dist 目录，然后运行以下命令运行 JavaScript 代码：

node index.js

扩展功能

安装其他依赖

根据项目需求，你可以安装其他依赖，例如：

express：一个基于 Node.js 的 Web 框架
mongoose：一个用于 MongoDB 的对象模型工具

配置 Web 服务器

如果你需要启动一个 Web 服务器，可以使用以下命令安装 express：

npm install express

然后，在 src 目录中创建一个名为 server.ts 的文件，并编写以下代码：

import * as express from "express";
import * as path from "path";

const app = express();

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "..", "dist", "index.html"));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

编写 TypeScript 代码

在 src 目录中，你可以编写 TypeScript 代码，例如：

interface Person {
  name: string;
  age: number;
}

function greet(person: Person): void {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

const person: Person = {
  name: "Alice",
  age: 30
};

greet(person);

编译和运行项目