引言

TypeScript 项目工具集核心包含 tsc 编译器与配套配置文件。通过 tsc 命令可将 TypeScript 代码编译为 JavaScript 代码，实现跨浏览器兼容；tsconfig.json 配置文件用于定义编译规则与参数。该工具集具备强大的静态类型检查、模块化支持等核心能力，是 TypeScript 项目开发的基础。

工具包安装

Node.js 与浏览器仅能识别 JavaScript 代码，无法直接运行 TypeScript 代码。因此必须先通过 TypeScript 编译器将 .ts 文件转换为 .js 文件，才能正常执行。

前置依赖

安装前需确保本地已安装 Node.js（自带 npm 包管理工具），这是使用 npm 安装 TypeScript 的必要前提。

安装编译器

typescript 是官方提供的核心工具包，内置 tsc 编译命令，支持全局安装和本地项目安装两种方式：

• 全局安装（推荐新手使用，全系统项目可通用）

注意：初学时，请全局安装

npm install -g typescript

• 本地项目安装（推荐团队项目使用，锁定版本避免环境冲突）

npm install -D typescript

验证安装结果

执行版本查看命令，若终端输出版本号，即代表安装成功：

tsc -v

示例输出：Version 5.6.2（版本号随实际安装版本变化）

代码编译

创建 TS 文件

TypeScript 源码文件统一使用 .ts 作为后缀名，创建 hello.ts 文件，编写带类型注解的代码：

// 增加了类型注解
let username: string = "";
const sayHi = (username: string) => {
  console.log(`Hi ${username}`);
};

sayHi("刃");

export default {
  username,
  sayHi,
};

手动编译代码

在终端执行 tsc 命令，将 TypeScript 代码编译为标准 JavaScript 代码：

tsc hello.ts

编译完成后，同级目录会自动生成同名的 hello.js 文件。

运行编译后的 JavaScript 代码

通过 Node.js 执行编译生成的 JS 文件：

node hello.js

简易开发流程

每次修改代码后重复执行「编译 + 运行」命令会大幅降低效率，ts-node 工具可直接运行 TypeScript 代码，内部自动完成编译和执行流程。

初始化项目

先初始化 package.json 文件，用于管理项目依赖：

npm init -y

安装 ts-node

ts-node 依赖 typescript 运行，推荐本地项目安装（规范团队开发环境）：

npm install -D typescript
npm install -D ts-node

也可选择全局安装（全局任意目录均可调用）：

注意：初学时，请全局安装

npm install -g typescript
npm install -g ts-node

生成配置文件

执行命令自动生成项目核心配置文件 tsconfig.json：

tsc --init

该文件内置了编译目标、模块化规范、文件过滤等完整编译规则，无需手动编写基础配置。

直接运行代码

使用 ts-node 命令直接执行 .ts 文件，省略手动编译步骤：

ts-node hello.ts

该方式可极大简化开发和测试流程，有效提升开发效率。

注意事项

1. 语法兼容：所有合法的 JavaScript 代码都是 TypeScript 代码，有 JavaScript 基础的开发者只需重点学习 TypeScript 类型系统。

2. 类型擦除：由 TypeScript 编译生成的 JavaScript 文件会完全移除类型信息，类型仅在开发阶段提供校验能力。

3. 配置生效：项目中存在 tsconfig.json 时，tsc 命令会自动读取配置；无配置文件时，使用编译器默认规则。

4. 后缀规范：普通 TypeScript 文件用 .ts，React 场景的 TS 代码用 .tsx，区分使用避免编译异常。

总结

1. TypeScript 工具集核心是 tsc 编译器 + tsconfig.json 配置，负责 TS 转 JS 与编译规则管理；

2. 全局安装 typescript 适合快速开发，本地安装适合团队协作，ts-node 是开发阶段简化流程的必备工具；

3. TypeScript 类型仅作用于开发校验，编译后会被擦除，不影响 JavaScript 运行时。