TypeScript类型什么时候用（实战经验分享）

TypeScript类型什么时候用

在日常开发中，尤其是写前端项目时，很多人会遇到要不要用 TypeScript 类型的问题。其实不是每个变量都得标注类型，关键看场景。

比如你写一个简单的工具函数，只在当前文件里用一次，参数明显是字符串，返回也是字符串，这时候不写类型也没问题，TypeScript 自己能推断出来：

function greet(name) {
  return "Hello, " + name;
}

这种情况下加类型反而显得啰嗦。

当函数被多人调用时加上类型

但如果你这个函数是要给团队其他人用的，或者会被多个模块引用，那就最好明确标出类型。不然别人传个数字进来，运行时报错，排查起来就费劲。

function greet(name: string): string {
  return "Hello, " + name;
}

这样别人一看就知道只能传字符串，编辑器也会立刻提示错误。

处理接口数据时一定要用类型

和后端对接的时候，数据结构复杂，字段多，还可能嵌套。这时候不用类型，很容易把 user.name 写成 user.username，运行才发现错了。

定义好接口类型，不仅能避免拼写错误，还能在代码里直接点出来有哪些字段可用：

interface User {
  id: number;
  name: string;
  email?: string;
}

然后函数接收这个用户对象时，字段有没有、对不对，一目了然。

状态管理中类型很实用

在写 React 或 Vue 的状态时，如果状态结构稍复杂，比如一个表单有十几项，每项还有是否必填、校验规则等，用类型能帮你少犯错。

type FormField = {
  value: string;
  touched: boolean;
  error?: string;
}

定义清楚之后，操作 form.username.value 还是 form.email.touched 都不会搞混。

第三方库返回值不确定时补类型

有些老项目或第三方工具函数没有类型注解，返回值是 any，这时候你可以根据实际使用情况手动加一层类型约束，让后续逻辑更安全。

比如你从某个旧插件拿到用户配置，知道它一定有主题颜色和字体大小，就可以这样包装一下：

const config = getLegacyConfig() as {
  themeColor: string;
  fontSize: number;
};

虽然用了 as 强制断言，但至少你在使用时有了明确预期。

总的来说，TypeScript 类型不是为了炫技，而是用来减少沟通成本、提升协作效率的。该省的地方不加，该严的地方一点都不能松。