异常教程

TypeScript 安装（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 的世界里，TypeScript 像一位“代码翻译官”，通过静态类型检查和编译时验证，帮助开发者提前发现潜在的错误，提升代码的可维护性。对于编程初学者和中级开发者而言，掌握 TypeScript 的安装与配置是迈向高效开发的第一步。本文将通过 循序渐进 的方式，从环境搭建到实战案例，手把手教你完成 TypeScript 的安装与配置，同时结合形象比喻和代码示例，帮助你轻松理解核心概念。

安装前的准备工作

确认 Node.js 环境

TypeScript 的安装依赖于 Node.js 生态系统，因此第一步需要确保你的电脑已安装 Node.js。你可以将其理解为 TypeScript 的“操作系统”——没有它，TypeScript 就无法运行。

检查 Node.js 版本：
打开终端（Windows 用户使用命令提示符或 PowerShell，Mac/Linux 用户使用终端），输入以下命令：

node -v  
npm -v

如果显示版本号（如 v18.12.1 和 9.5.0），说明环境已就绪；若未安装，请访问 Node.js 官网 下载最新 LTS 版本。

安装 TypeScript 的三种方式

TypeScript 的安装可通过以下三种方式完成，选择最适合你的方式即可：

1. 全局安装（推荐初学者使用）

全局安装允许你在任意项目目录中直接调用 TypeScript 编译器 tsc。

npm install -g typescript

比喻：这就像在电脑上安装一个“通用翻译器”，无论你在哪里编写代码，它都能帮你将 TypeScript 转换为 JavaScript。

2. 局部安装（适合项目级配置）

如果希望 TypeScript 仅在特定项目中使用，可以在项目目录下执行：

npm install typescript --save-dev

此时，TypeScript 编译器会作为开发依赖安装到 node_modules/.bin 目录中，需通过 npx 或 ./node_modules/.bin/tsc 调用。

3. VS Code 扩展（快速上手）

安装 VS Code 的 TypeScript 扩展后，可以直接在编辑器中运行和调试 TypeScript 代码，无需额外配置编译环境。

  • 打开 VS Code，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）。
  • 搜索 “TypeScript” 并安装官方扩展。

配置 TypeScript 项目

安装完成后，你需要通过 tsconfig.json 文件定义项目的编译规则。这个文件就像项目的“说明书”，告诉 TypeScript 如何处理你的代码。

创建 tsconfig.json

在项目根目录执行以下命令自动生成配置文件：

tsc --init

这会生成一个默认的 tsconfig.json，内容如下：

{  
  "compilerOptions": {  
    "target": "ES5",  
    "module": "commonjs",  
    "outDir": "./dist",  
    "strict": true,  
    // ...其他默认配置  
  },  
  "include": ["src/**/*"]  
}

常用配置项解析

以下是一些关键配置项的含义及建议值，可根据需求调整：

配置项作用描述推荐值示例
target指定编译后的 JavaScript 版本（如 ES5、ES2017、ESNext）"ES2017"
module指定模块系统类型（如 CommonJS、ESNext）"ESNext"
outDir指定编译后的文件输出目录"dist"
strict启用所有严格类型检查（推荐开启）true
sourceMap生成 Source Map 文件，方便调试true

编写并运行第一个 TypeScript 程序

编写代码

在项目根目录下创建 src 文件夹，并在其中新建 app.ts 文件，输入以下代码：

// 定义一个函数，计算两个数字的和  
function add(a: number, b: number): number {  
  return a + b;  
}  

console.log(add(3, 5)); // 输出 8  
console.log(add("3", 5)); // 报错：参数 "3" 不符合类型 "number"

类型注解的作用：
a: number 表示参数 a 必须是数字类型，这就像给变量戴上了“身份标识牌”，TypeScript 会严格检查类型是否匹配。

编译并运行

在终端中执行以下命令：

tsc  
node dist/app.js

如果一切正常，终端将输出 8，而第二个 add("3", 5) 会触发编译错误，提示类型不匹配。

高级配置与实战案例

案例 1：配置模块化项目

假设你正在开发一个基于 ES 模块的 Node.js 项目，需要调整 tsconfig.json：

{  
  "compilerOptions": {  
    "module": "ESNext",  
    "moduleResolution": "node",  
    "target": "ESNext",  
    "outDir": "./dist",  
    "strict": true,  
    "esModuleInterop": true  
  },  
  "include": ["src/**/*"]  
}

关键配置解释：

  • moduleResolution: 指定模块解析策略，node 表示遵循 Node.js 的模块查找规则。
  • esModuleInterop: 启用 CommonJS 和 ES 模块的互操作性。

案例 2：配置 Web 项目

若开发前端项目，可配置输出为 ES6 模块：

{  
  "compilerOptions": {  
    "target": "ES6",  
    "module": "ESNext",  
    "outDir": "./build",  
    "lib": ["ESNext", "DOM"],  
    "sourceMap": true  
  }  
}

lib 的作用：
DOM 表示项目中会使用浏览器环境中的 API（如 document），TypeScript 会预加载对应的类型定义。

常见问题与解决方案

问题 1：安装时报错 “EACCES: permission denied”

原因：全局安装时权限不足（常见于 Mac/Linux 系统）。
解决方法：添加 --unsafe-perm=true 参数：

npm install -g typescript --unsafe-perm=true

问题 2：编译后找不到输出文件

原因：未正确配置 outDir 或文件路径错误。
解决方法：检查 tsconfig.json 中的 outDir 路径是否与代码文件夹匹配，并确保执行 tsc 命令时处于项目根目录。

问题 3：类型检查过于严格，导致开发效率降低

原因：strict 模式开启后，TypeScript 会强制执行所有类型规则。
解决方法：暂时关闭部分严格模式，或逐步学习如何优雅地使用类型：

{  
  "compilerOptions": {  
    "strict": false,  
    "noImplicitAny": false  
  }  
}

结论

通过本文的分步指导，你应该已经完成了 TypeScript 的安装与项目配置，并通过实际案例理解了其核心功能。TypeScript 的安装看似简单，但合理配置能显著提升代码质量与团队协作效率。

对于初学者，建议从全局安装入手，逐步熟悉基础配置；中级开发者则可根据项目需求，结合 tsconfig.json 的高级选项优化开发流程。记住，TypeScript 并非“魔法工具”，它需要开发者主动利用类型注解和编译检查，才能发挥最大价值。

现在，是时候动手实践了！尝试在你的项目中引入 TypeScript，感受静态类型带来的开发体验提升。如果你有任何疑问或遇到问题，欢迎在评论区交流讨论。

通过本文，我们不仅完成了“TypeScript 安装”的核心步骤，还深入探讨了配置细节与常见场景的解决方案，为你的 TypeScript 之旅打下坚实基础。

最新发布

查看更多文章