TypeScript 基础指南：配置一个用于学习的简单项目

文章

因为我们要针对TypeScript进行学习，项目配置过于复杂会影响到我们要学习的最终目的，所以我们将尽可能的简化。

部分

创建一个 npm 项目

创建一个目录

在你的电脑上为你的项目安排一个位置。

打开命令行工具（Terminal）

Windows 11 默认安装了 Terminal 工具，我们只需要：

在文件夹的空白区域单击鼠标右键，弹出右键菜单。

在右键菜单中点击“Open in Terminal”。

初始化 npm 项目

在 Terminal 工具中输入：

npm init -y

打开 VS Code

通过命令打开 VS Code：

code ./

目录第一次被 VS Code 打开时，会被询问“是否信任当前目录的作者”，可以勾选上面的复选框，然后点击“Yes”，这样当同一个目录再次使用 VS Code 打开时就不会被问同样的问题了。

查看初始化生成的文件

上面的步骤只生成了一个文件“package.jon”，这个文件除了包含项目的基本信息外，还会包含第三方包的依赖关系等等，对前端项目来说非常重要。

部分

安装和配置 TypeScript

在 VS Code 中打开 Terminal

在 VS Code 中打开终端有几种方法：

方法 1：使用键盘快捷键

按下 Ctrl + ` 或 Ctrl + J 键盘快捷键可以快速打开 VS Code 中的集成终端。

方法 2：使用鼠标单击

单击 VS Code 的顶部菜单栏中的“查看” > “终端”。

或者，单击 VS Code 的底部面板中的“终端”选项卡。

方法 3：使用命令面板

按下 F1 打开命令面板。

输入“终端：创建新终端”或“终端：选择默认配置”并选择相应的选项来创建或打开一个终端。

安装 TypeScript

在 Terminal 中输入：

npm install typescript --save-dev

命令运行成功之后，当前目录下会多出一个文件（package-lock.json：记录了 Node.js 项目依赖项的确切版本信息）和一个目录（node_modules：是 Node.js 项目中存放依赖项的目录）。

同时，package.json 文件会被修改，多了：

  "devDependencies": {
    "typescript": "^5.4.3"
  }

用于记录安装的版本信息。

配置 TypeScript

运行 TypeScript 初始化命令：

npx tsc --init

上面的命令中，npx 是 Node.js 生态系统中的一个工具，它是 npm 的扩展工具，用于执行 Node.js 包中的可执行文件，而无需全局安装这些包。命令成功后会为当前项目生成 TypeScript 的配置文件“tsconfig.jon”。配置的具体内容可参考链接： https://aka.ms/tsconfig

部分

运行代码

新建代码文件

•

新增“src”目录。

•

在“src”目录中新增“main.ts”文件。

•

在文件中写入“console.log("Hello World!");”。

编译并运行代码

npx tsc ./src/main.ts
node ./src/main.js

部分

监控代码变化，让代码自己运行

在开发过程中，如果每次修改程序后都要重新运行上面的命令来获得最新的结果，显然非常低效。所以这里我们介绍一种方法来消除这种痛苦。虽然解决这个问题的方式多种多样，但这里我们先只介绍一种。

安装需要的第三方包

安装 nodemon 和 ts-node：

npm install nodemon ts-node --save-dev

这里我们需要2个包：

ts-node

用于在无需生成 js 文件的前提下运行代码。

nodemon

监控代码文件并重新生成结果。

配置 npm 脚本

将下面的两行代码加到“package.json”文件中：

    "start": "ts-node ./src/main.ts",
    "watch": "nodemon ./src/main.ts"

# 运行 “main.ts” 文件中的代码。
npm start

# 监视 “main.ts”，如果文件发生变动就重新运行一次。
npm run watch

测试修改

我们可以看到，当输出的内容从“Hello World!”修改成“Hello Wikoding!”时，Terminal 中的内容发生了变化并输出了最终的结果。

TypeScript 基础指南

1.
创建一个 npm 项目
2.
安装和配置 TypeScript
3.
运行代码
4.
监控代码变化，让代码自己运行