正文

如何一步步搭建typescript项目从零开始适合新手小白亲测有效

/0 浏览量
1031

1. 准备工作

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

  • Node.js 和 npm：TypeScript 是基于 Node.js 的，因此需要安装 Node.js 和 npm 来进行项目的构建和运行。
  • Visual Studio Code：推荐使用 VS Code 作为编辑器，因为它对 TypeScript 有很好的支持。

安装 Node.js 和 npm

  1. 访问 Node.js 官网 下载适用于你操作系统的 Node.js 安装包。
  2. 运行安装程序，选择“Install Node.js and npm”。
  3. 安装完成后，打开命令行工具，输入 node -v 和 npm -v 检查版本号。

安装 Visual Studio Code

  1. 访问 Visual Studio Code 官网 下载适用于你操作系统的 VS Code 安装包。
  2. 运行安装程序，并遵循屏幕上的指示完成安装。

2. 创建项目

创建新文件夹

  1. 打开命令行工具。
  2. 使用 mkdir 命令创建一个新的文件夹，例如 typescript-project。
  3. 切换到新创建的文件夹：cd typescript-project。

初始化 npm 项目

  1. 在命令行中运行 npm init -y，这将创建一个 package.json 文件，并自动填充默认值。
  2. 输入 y 确认。

安装 TypeScript

  1. 运行 npm install --save-dev typescript 安装 TypeScript。
  2. 这将在项目目录中创建一个 node_modules 文件夹和一个 package.json 文件，其中包含了 TypeScript 的依赖。

3. 配置 TypeScript

创建 tsconfig.json

  1. 在项目根目录下创建一个名为 tsconfig.json 的文件。
  2. 使用以下内容初始化配置文件：
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

创建 src 目录

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

4. 编写 TypeScript 代码

创建一个 TypeScript 文件

在 src 目录下创建一个名为 app.ts 的文件。

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

运行 TypeScript 代码

  1. 在命令行中，切换到 typescript-project 目录。
  2. 运行 npx tsc 命令来编译 TypeScript 代码。
  3. 如果没有错误，你将在项目根目录下找到一个名为 app.js 的文件，这是编译后的 JavaScript 文件。

运行编译后的 JavaScript

  1. 在命令行中，运行 node app.js。
  2. 你应该看到控制台输出：“Hello, TypeScript!”

5. 扩展你的项目

现在你已经成功搭建了一个简单的 TypeScript 项目。你可以继续添加更多的 TypeScript 文件、模块和功能，例如：

  • 使用 import 和 export 关键字来导入和导出模块。
  • 使用 TypeScript 的类型系统来为变量和函数添加类型注解。
  • 使用装饰器、接口和类等高级特性来编写更复杂的应用程序。

通过这些步骤，你可以从零开始搭建一个 TypeScript 项目，并逐步学习和掌握 TypeScript 的强大功能。祝你学习愉快！

-- 展开阅读全文 --