正文

从零开始搭建一个TypeScript项目：详细步骤指南

/0 浏览量
1108

准备工作

在开始之前，请确保您的电脑上已安装以下软件：

  1. Node.js 和 npm：TypeScript 是基于 JavaScript 的，因此需要 Node.js 环境。同时，npm 是 Node.js 的包管理器，用于安装 TypeScript 和其他依赖项。
  2. Visual Studio Code：虽然可以使用任何代码编辑器，但 Visual Studio Code 是一个功能强大的编辑器，它提供了对 TypeScript 的良好支持。

步骤 1：创建项目文件夹

打开终端或命令提示符，进入您想要创建项目的目录，然后执行以下命令创建一个新文件夹：

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

步骤 2：初始化 npm 项目

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

npm init -y

这将创建一个名为 package.json 的文件，其中包含了项目的基本信息。

步骤 3：安装 TypeScript

接下来，安装 TypeScript。运行以下命令：

npm install --save-dev typescript

这将安装 TypeScript 并将其添加到项目的 devDependencies 部分。

步骤 4：创建 TypeScript 配置文件

TypeScript 需要一个配置文件来设置编译选项。在项目目录中创建一个名为 tsconfig.json 的文件，内容如下：

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

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

步骤 5：创建源文件目录

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

步骤 6：编写 TypeScript 代码

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

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

步骤 7：编译 TypeScript 代码

在终端中，运行以下命令编译 TypeScript 代码：

npx tsc

如果一切顺利，您会在项目目录中看到一个名为 dist 的文件夹，其中包含了编译后的 JavaScript 代码。

步骤 8：运行编译后的代码

在终端中，运行以下命令运行编译后的 JavaScript 代码：

node dist/index.js

您应该会在终端中看到 “Hello, TypeScript!” 的输出。

总结

恭喜您，您已经成功搭建了一个简单的 TypeScript 项目！您可以继续在 src 文件夹中添加更多 TypeScript 文件，并使用 npx tsc 编译和运行它们。随着项目的不断扩展，您还可以添加更多的 TypeScript 配置选项和依赖项。

-- 展开阅读全文 --