1. React + TypeScript#

1
interface ButtonProps {
2
  label: string;
3
  disabled?: boolean;
4
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
5
}
6
function Button({ label, disabled, onClick }: ButtonProps) {
7
  return <button disabled={disabled} onClick={onClick}>{label}</button>;
8
}

1
function List<T>({ items, render }: { items: T[]; render: (it: T) => React.ReactNode }) {
2
  return <>{items.map(render)}</>;
3
}

1
const [count, setCount] = useState<number>(0);
2
const [user, setUser] = useState<User | null>(null);
3
useEffect(() => { /* deps 类型由数组推断 */ }, [count]);

2. Vue 3 + TypeScript#

1
import { defineComponent, ref, reactive } from "vue";
2

3
export default defineComponent({
4
  props: {
5
    title: { type: String, required: true },
6
    count: { type: Number, default: 0 },
7
  },
8
  setup(props) {
9
    const name = ref<string>("");      // Ref<string>
10
    const state = reactive({ n: 0 });  // 深层响应式
11
    return { name, state };
12
  },
13
});

1
<script setup lang="ts">
2
interface Props { id: number }
3
const props = defineProps<Props>();
4
const emit = defineEmits<{ (e: "change", v: number): void }>();
5

6
const list = ref<number[]>([]); // 显式给 ref 泛型
7
</script>

3. Node + TypeScript#

1
import express, { Request, Response } from "express";
2
const app = express();
3
app.get("/user/:id", (req: Request, res: Response) => {
4
  const id = req.params.id; // string
5
  res.json({ id });
6
});

1
npm install -D tsx
2
npx tsx src/server.ts   # 免编译直接跑

4. 常见坑#

1. 类型与运行时不匹配：as 断言骗过编译器，但运行时不保证。例：JSON.parse 返回 any，要手动收窄成具体类型。
2. 第三方库 any：遇到无类型库，先找 @types；没有就写 .d.ts（第 12 篇），别全局 any 污染。
3. ref 解包：Vue 模板里 ref 自动解包，但 TS 里 .value 才是值，别混。
4. event 默认 any：React 老写法 onClick={(e) => ...} 不标类型时 e 是 any（若关了 noImplicitAny），务必标 React.ChangeEvent<...>。
5. 枚举 vs 联合：库/跨端（如 Vue 模板）里枚举编译后会变对象，模板里访问要注意；新增代码优先字面量联合。

5. 最佳实践清单#

• ✅ 全程 strict，别留 any 死角（用 unknown + 守卫替代 any）。
• ✅ 组件 props、函数参数、导出结构显式注解；局部变量交给推断。
• ✅ 用 import type 隔离类型导入，配合 isolatedModules 安全。
• ✅ 类型从数据来：先定 interface，再写实现，类型即文档。
• ✅ 类型检查与打包分离：tsc --noEmit + Vite/webpack。
• ❌ 别为了”过编译”滥用 as any，那是埋雷。
• ❌ 别手写 .d.ts 维护自己库的类型，用 declaration 自动生成。

6. 路线收官#

走到这里，你已经具备：

• 用 TS 描述任意数据结构（接口/泛型/工具类型）；
• 用类型守卫与可辨识联合写出安全的分支逻辑；
• 用 tsconfig 与工程化手段管理真实项目；
• 把类型系统落地到 React/Vue/Node。

类型系统的终点不是”写更复杂的类型”，而是用刚好够的类型，让 bug 在编译期现形、让代码自我说明。继续在真实项目里打磨手感即可。

小结#

• React：props 用 interface，事件用 React.*Event，泛型组件 function C<T>(...).
• Vue 3：<script setup lang="ts"> + ref<T> + defineProps<T>()。
• Node：路由参数/响应用 Request/Response 类型，tsx 直接跑。
• 通用坑：类型≠运行时、第三方库补类型、别滥用 as any。
• 原则：strict 全程开，类型从数据来，类型检查与打包分离。

练习#

1. 写一个带 interface ButtonProps 的 React 按钮组件，处理 onClick 的 MouseEvent 类型。
2. 用 Vue <script setup lang="ts"> 写计数器：ref<number> + defineProps + defineEmits。
3. 用 Express + TS 写 /api/users 返回 User[]，给 res.json 传类型化数据。
4. 审查你现有项目，找出三处可用 unknown+守卫替换 any 的地方。