第 20 章:进阶资源

学习目标

• 知道去哪查官方权威资料
• 掌握常用的 TS 生态库
• 了解 TS 在主流框架里的集成方式
• 建立长期学习路径

一、官方资源(必看)

// TypeScript 官方文档入口
// https://www.typescriptlang.org/docs/handbook/

// 手册章节速查:
// 1. Basic Types       - 基础类型
// 2. Everyday Types    - 日常类型
// 3. Narrowing         - 类型收窄
// 4. More on Functions - 函数进阶
// 5. Object Types      - 对象类型
// 6. Generics          - 泛型
// 7. Keyof Type Operator
// 8. Typeof Type Operator
// 9. Indexed Access Types
// 10. Conditional Types
// 11. Mapped Types
// 12. Template Literal Types
// 13. Classes
// 14. Modules
// 15. d.ts

⚠️ 坑 1:中文翻译有些滞后,遇到不确定看英文原文。

二、TypeScript Playground(在线试)

// https://www.typescriptlang.org/play
// 实时编译,支持 TS 5.x 各版本切换
// 支持 import 第三方库测试

常用配置:

• 切换 target(ES5 / ES2020)
• 切换 strict
• 看 .d.ts 输出
• 看 "isolatedModules" 编译差异

三、必须会的生态库

1. zod(运行时校验)

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string().min(1).max(20),
  email: z.string().email(),
});

// 自动推导类型
type User = z.infer<typeof UserSchema>;

// 校验
const user = UserSchema.parse({ id: 1, name: 'Tom', email: 'a@b.com' });

2. io-ts(fp-ts 风格)

import * as t from 'io-ts';

const User = t.type({
  id: t.number,
  name: t.string,
});

type User = t.TypeOf<typeof User>;

3. tsx(直接运行 TS)

npx tsx ./src/index.ts    # 替代 ts-node,esbuild 驱动,速度快

4. ts-morph(代码生成 / 重构工具)

import { Project } from 'ts-morph';

const project = new Project({ tsConfigFilePath: './tsconfig.json' });
const sourceFile = project.getSourceFileOrThrow('src/index.ts');

sourceFile.addInterface({ name: 'NewType', properties: [...] });
project.saveSync();

四、框架集成

Vue 3 + TS

<script setup lang="ts">
import { ref } from 'vue';

interface User { id: number; name: string }
const user = ref<User>({ id: 1, name: 'Tom' });

defineProps<{
  size?: 'small' | 'large';
}>();
</script>

React + TS

import { useState } from 'react';

interface User { id: number; name: string }
function App(): JSX.Element {
  const [user, setUser] = useState<User | null>(null);
  return <div>{user?.name}</div>;
}

NestJS + TS

import { Controller, Get } from '@nestjs/common';

@Controller('users')
export class UserController {
  @Get()
  findAll(): User[] {
    return [];
  }
}

⚠️ 坑 2:每个框架的 TS 集成姿势不一样,不要硬背,看官方对应文档。

五、TypeScript 5.x 新特性

// 1. const 修饰的类型参数
function identity<const T>(x: T): T { return x; }
const arr = identity([1, 2, 3]);   // 推导为 readonly [1, 2, 3]

// 2. using 声明(资源管理,ES2023)
{
  using file = new FileHandle();   // 自动 dispose
}

// 3. 装饰器稳定
// 4. satisfies 操作符
const config = {
  api: '/users',
  port: 8080,
} satisfies Config;

// 5. 模板字面量增强
type Greet<T extends string> = `hello ${T}`;
type X = Greet<'tom' | 'jerry'>;  // 'hello tom' | 'hello jerry'

六、常用工具速查

工具	用途
tsc	TS 编译器
ts-node / tsx	直接运行 TS
tsc --watch	增量编译
tsc --noEmit	只检查,不输出
tsc --traceResolution	看模块解析
@types/*	第三方库类型
dts-gen	自动生成 .d.ts
ts-morph	AST 操作

七、ESLint + TS

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": "warn"
  }
}

八、学习路径建议

入门(本教程 1-10 章)
  ↓
类型系统(11-14 章,反复读)
  ↓
工程化(15-17 章,配 tsconfig)
  ↓
实战(18-19 章,在真实项目里用)
  ↓
进阶(20 章,查官方文档 + 看库源码)
  ↓
类型体操(utility-types, github.com/type-challenges)

九、推荐 GitHub 仓库

# 类型体操题库
git clone https://github.com/type-challenges/type-challenges.git

# TS 圣经(tsconfig 详解)
# https://github.com/tsconfig/bases

# DefinitelyTyped
# https://github.com/DefinitelyTyped/DefinitelyTyped

十、本章小结

资源	用途
官方手册	权威、完整,所有语法字典
Playground	在线测试,版本切换
zod	运行时校验,推类型
tsx	直接跑 TS,不用编译
ESLint	团队规范、避免 any 蔓延
type-challenges	进阶类型体操训练

动手练习

1. 官方手册:挑一个不熟的章节(比如 Conditional Types)精读一遍
2. 类型体操:在 type-challenges 上做 5 道 Easy 题
3. zod 实战:给已有 API 响应加 zod 校验,自动推导类型

---

下一章:学习路径已结束,可在 Vue 3 / React / Node 章节继续深入。