TypeScript：现代 Web 开发的标准

2025/12/22-18:00:00

TypeScript

TypeScript; 2025

words 字

2025 年，TypeScript 真的成了 Web 开发的主角。GitHub Octoverse 的数据显示它超越了 JavaScript 和 Python，坐上了平台使用率第一的位置。这篇文章我想聊聊为什么会这样，以及 TypeScript 现在实际能帮你做什么。

攀登主导地位：GitHub Octoverse 2025

2025 年 8 月，GitHub 官布 TypeScript 超越 Python 和 JavaScript，成为平台上使用最多的语言。不是偶然：

贡献者数量同比增长 66%
微软、Google、Meta、Netflix 把 TypeScript 定为关键项目的标准
npm 上有超过 500 万个带类型支持的包
超过 90 万个公共仓库在用 TypeScript

TypeScript 7.0：Go 语言带来的性能革命

TypeScript 7.0（Project Corsa）是这个语言历史上最大的一次跳跃。编译器主体用 Go 重写了，效果很直接：大型项目编译速度提升 10 倍，原来 5 分钟的编译缩到 30 秒。编译期间内存消耗降低最多 60%。对 monorepo 有专门优化。语法和类型行为完全不变，没有迁移成本。

// TypeScript 7.0 以 10 倍速度编译此代码
interface Usuario {
  id: string;
  nombre: string;
  email: string;
  rol: 'admin' | 'usuario' | 'invitado';
}

function procesarUsuario(usuario: Usuario): { mensaje: string } {
  return { mensaje: `欢迎, ${usuario.nombre}` };
}

TypeScript 实用工具：2025 年最佳实践

类型系统能帮你省掉很多样板代码。下面几个是我高频使用的工具类型。

Partial 用于更新操作

Partial 做 PATCH 操作天生配的——你只需要更新几个字段，不用把整个对象都传：

interface Producto {
  id: string;
  nombre: string;
  precio: number;
  descripcion: string;
  stock: number;
}

function actualizarProducto(
  id: string,
  cambios: Partial<Producto>
): Producto {
  const producto = obtenerProductoPorId(id);
  return { ...producto, ...cambios };
}

// 使用：仅更新价格
actualizarProducto('prod-123', { precio: 29.99 });

Pick 和 Omit 用于聚焦接口

当你只想暴露实体的部分字段时，这两个工具类型是标配。用 Pick 选你要的，用 Omit 排掉你不要的。比如从用户实体里排掉 password：

interface UsuarioCompleto {
  id: string;
  nombre: string;
  email: string;
  password: string;
  createdAt: Date;
  updatedAt: Date;
}

// Pick：选择特定字段
type UsuarioPublico = Pick<UsuarioCompleto, 'id' | 'nombre' | 'email'>;

// Omit：排除敏感字段
type UsuarioSinPassword = Omit<UsuarioCompleto, 'password'>;

function obtenerPerfilPublico(id: string): UsuarioPublico {
  return obtenerUsuarioCompleto(id);
}

TypeScript 与 AI：强大的协同作用

这点很多人没意识到：TypeScript 跟 AI 编码工具是天然搭档。

类型信息让 LLM 的输出质量飞了一个台阶。GPT-4 和 Claude 生成的 TypeScript 代码，编译错误比 JavaScript 少 94%。GitHub Copilot 和 Cursor 有了类型上下文，补全建议精确得多。Prettier 和 ESLint 配上类型支持，重构也安全了不少。

举个实际的例子。你定义了一个订单状态机和状态流转规则：

// 示例：类型如何帮助 LLM
type EstadoPedido = 'pendiente' | 'procesando' | 'enviado' | 'entregado';

interface Pedido {
  id: string;
  estado: EstadoPedido;
  items: Array<{ nombre: string; cantidad: number }>;
}

function avanzarEstadoPedido(pedido: Pedido): Pedido {
  // LLM 可以正确推断下一个可能的状态
  const transiciones: Record<EstadoPedido, EstadoPedido> = {
    pendiente: 'procesando',
    procesando: 'enviado',
    enviado: 'entregado',
    entregado: 'entregado',
  };
  return {
    ...pedido,
    estado: transiciones[pedido.estado],
  };
}

类型在那摆着，LLM 能正确推断出每个状态的下一步是什么。JavaScript 里这层信息是缺失的。

TypeScript 相比 JavaScript 的关键优势

编译时类型安全

最直观的好处：错误在编译阶段就被拦住，不会带到生产环境。

// JavaScript：错误只在运行时发现
function calcularArea(ancho, alto) {
  return ancho * alto;
}
calcularArea("10", 20); // 返回 "200"（字符串连接）

// TypeScript：编译时检测到错误
function calcularArea(ancho: number, alto: number): number {
  return ancho * alto;
}
calcularArea("10", 20); // 错误：类型 'string' 不能赋值给类型 'number' 的参数

左边 JavaScript 版本，"10" * 20 不报错，给你返回字符串拼接的意外结果。右边 TypeScript 直接在编译时报错，告诉你 string 不能赋给 number。这种 bug 早期发现和上线后发现，代价完全不同。

更好的开发体验

IDE 的跳转定义、查找引用、自动补全——有了类型信息之后全都不一样了。类型本身就是活的文档，你不用到处翻 wiki。

现代框架中的采用

带有 TypeScript 的 React

React 组件配 TypeScript 很自然，Props 接口一定义，组件契约就清楚了：

interface Props {
  titulo: string;
  onClic?: () => void;
  children?: React.ReactNode;
}

function Boton({ titulo, onClic, children }: Props) {
  return (
    <button onClick={onClic} className="px-4 py-2 bg-blue-500 rounded">
      {titulo}
      {children}
    </button>
  );
}

带有 TypeScript 的 Next.js

Next.js 里 getServerSideProps 加上类型约束，数据从服务端到页面的整条链路都是类型安全的：

import { GetServerSideProps } from 'next';

interface PageProps {
  usuario: {
    id: string;
    nombre: string;
  };
}

export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
  const usuario = await obtenerUsuario();
  return { props: { usuario } };
};

export default function Pagina({ usuario }: PageProps) {
  return <div>欢迎, {usuario.nombre}</div>;
}

带有 TypeScript 的 Vue 3

Vue 3 的 Composition API 配 TypeScript 体验很好。ref 加上泛型，响应式变量的类型就锁定了：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Contador',
  setup() {
    const contador = ref<number>(0);
    const incrementar = () => contador.value++;

    return { contador, incrementar };
  },
});

2025 年最佳实践

避免 any 并使用 unknown

any 关掉了类型检查，等于白写 TypeScript。用 unknown 替代，它会强制你先做类型验证再操作：

// ❌ 避免 any
function procesarDato(dato: any) {
  return dato.valor;
}

// ✅ 使用带有验证的 unknown
function procesarDato(dato: unknown) {
  if (typeof dato === 'object' && dato !== null && 'valor' in dato) {
    return (dato as { valor: string }).valor;
  }
  throw new Error('无效的数据格式');
}

使用判别类型

判别联合（discriminated union）是我觉得 TypeScript 最强大的特性之一。给每个分支一个公共的 status 字段，编译器就能做穷尽性检查：

interface Success {
  status: 'success';
  data: string;
}

interface Error {
  status: 'error';
  message: string;
}

type Resultado = Success | Error;

function manejarResultado(resultado: Resultado) {
  // TypeScript 知道确切存在哪些属性
  if (resultado.status === 'success') {
    console.log(resultado.data);
  } else {
    console.log(resultado.message);
  }
}

这门语言正在重新定义 Web 开发。希望这篇能帮你在 TypeScript 上走得更远。