# TypeScriptCourse

**Repository Path**: sky0535/TypeScriptCourse

## Basic Information

- **Project Name**: TypeScriptCourse
- **Description**: TypeScript 入门教程
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-26
- **Last Updated**: 2026-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript

## README

# TypeScript 入门教程

本项目是一个用于学习 TypeScript 核心特性的基础教程示例集。每个模块都包含可运行的代码示例与详尽的中文注释。

## 🚀 快速开始

1. **安装依赖**
   ```bash
   npm install
   ```

2. **运行教程入口**
   运行默认的入口文件，查看学习路线指引：
   ```bash
   npm run dev
   ```

3. **运行特定章节的示例代码**
   项目中包含多个分主题的 TypeScript 文件。请使用 npm 脚本运行，例如：
   ```bash
   npm run ts01
   ```

4. **类型检查与构建**
   ```bash
   npm run typecheck  # 仅执行类型检查，不生成编译产物
   npm run build      # 编译 TypeScript 代码到 dist 目录
   ```

## 🧠 `ts01` 命令说明（ESM 运行方式）

项目中的 `ts01` 脚本是：

```json
"ts01": "node --loader ts-node/esm src/01_basic_types.ts"
```

这条命令可以拆成 3 部分理解：

- `node`：启动 Node.js 运行时
- `--loader ts-node/esm`：给 Node 注册 ESM 加载器，让 `.ts` 文件在运行时由 `ts-node` 即时转译
- `src/01_basic_types.ts`：要执行的 TypeScript 入口文件

### 与 `ts-node src/01_basic_types.ts` 的区别

- **模块语义不同**
  - `node --loader ts-node/esm ...`：走 Node 的 ESM 流程（`import/export`、ESM 解析规则）
  - `ts-node ...`：默认更偏 CommonJS 执行（除非额外启用 ESM 模式）
- **和本项目配置更匹配**
  - 本项目使用 `type: "module"` 与 `module: "NodeNext"`，因此 loader 写法更一致、更稳定
- **执行入口不同**
  - 前者是 Node 主导执行，`ts-node` 作为加载器参与
  - 后者是 `ts-node` 直接主导执行入口

### 一句话结论

在当前项目配置下，优先使用：

```bash
node --loader ts-node/esm src/01_basic_types.ts
```

如果希望使用 `ts-node` 直跑，建议显式开启 ESM：

```bash
ts-node --esm src/01_basic_types.ts
```

## ts-node 详细介绍

`ts-node` 是一个可以直接运行 TypeScript 文件的执行器。它会在运行时把 `.ts` 即时转译为 JavaScript，再交给 Node.js 执行，因此在学习和开发阶段通常不需要每次先 `tsc` 再 `node`。

### ts-node 在本项目中的作用

- 快速运行单个示例文件（如 `src/01_basic_types.ts`）
- 结合 Node ESM loader 支持当前项目的 `NodeNext` 模块配置
- 在不生成 `dist` 的前提下进行开发调试

### 两种常见运行方式

1. **Node + ts-node ESM Loader（本项目推荐）**

```bash
node --loader ts-node/esm src/01_basic_types.ts
```

- 与 `type: "module"`、`module: "NodeNext"` 配置更一致
- 由 Node 主导模块加载，`ts-node` 负责转译

2. **ts-node 直接执行**

```bash
ts-node --esm src/01_basic_types.ts
```

- 命令更短，适合快速试验
- 在 ESM 项目中建议显式加 `--esm`，避免模块语义不一致

### ts-node 与 tsc 的关系

- `ts-node`：偏“开发执行”，即时转译，不默认产出构建文件
- `tsc`：偏“工程构建”，输出 `dist`、声明文件、source map 等产物
- 推荐流程：
  - 学习/调试：`npm run ts01` ~ `npm run ts05`
  - 构建发布：`npm run build`
  - 静态校验：`npm run typecheck`

### 常用参数速查

- `--esm`：以 ESM 模式执行 TypeScript（ESM 项目常用）
- `--transpile-only`：只转译不做类型检查（启动更快）
- `--project tsconfig.json`：指定 tsconfig 文件
- `--files`：按 tsconfig 的 include/files 预加载文件

### 常见问题与排查

- **报模块相关错误（import/export）**
  - 检查 `package.json` 是否为 `type: "module"`
  - 检查 `tsconfig.json` 是否使用 `module: "NodeNext"` 与 `moduleResolution: "NodeNext"`
  - ESM 场景优先使用 `node --loader ts-node/esm ...` 或 `ts-node --esm ...`
- **运行能过但类型问题未及时发现**
  - 运行 `npm run typecheck` 做完整类型检查
- **脚本内联事件无法调用模块内函数**
  - `type="module"` 下函数不会自动挂到 `window`，优先使用 `addEventListener`

## 教程目录与学习路线

源码统一存放在 `src/` 目录下，按照学习路线划分为以下几个核心模块：

- [**01_basic_types.ts**](./src/01_basic_types.ts): 基础类型（字符串、数字、布尔、数组、元组、枚举、Any 与 Unknown、Void 等）
- [**02_interfaces.ts**](./src/02_interfaces.ts): 接口与类型别名（对象结构描述、可选属性、只读属性、联合类型与交叉类型等）
- [**03_functions.ts**](./src/03_functions.ts): 函数（参数类型、返回值、可选参数、默认参数、剩余参数、函数重载等）
- [**04_classes.ts**](./src/04_classes.ts): 类与面向对象（类的定义、访问修饰符 public/private/protected、继承、接口实现等）
- [**05_generics.ts**](./src/05_generics.ts): 泛型（泛型函数、泛型接口、泛型类、泛型约束等）

建议按编号顺序阅读源码文件，每个文件都可以独立运行测试结果。

## 学习资源

-   [TypeScript 入门教程](https://ts.xcatliu.com/)
-   [深入理解 TypeScript](https://jkchao.github.io/typescript-book-chinese/)
-   [TypeScript 官方文档](https://www.typescriptlang.org/zh/docs/)
-   [重学 TypeScript](https://github.com/aimingoo/jike2)