👨‍面试官：你为什么用 TS，别人用你就用？

摘要："你项目里用了 TypeScript？为什么用？别人用你就用？"我笑了笑，心里想："这都被你发现了，TS 这玩意是跟风就能用得转的吗？"

面试官盯着简历看了几秒，说：

"你项目里用了 TypeScript？为什么用？别人用你就用？"

我笑了笑，心里想："这都被你发现了，TS 这玩意是跟风就能用得转的吗？"

先上个例子：

function fetchUser(id) { return fetch(`/api/user/${id}`) #技术分享 .then(res => res.json) .then(data => { console.log(data.name.toUpperCase); });}

看起来正常吧？

但如果后端突然改了字段，把 name 改成了 username ，或者 name 根本是 null ，你就收获了 Cannot read property 'toUpperCase' of null 。

这种问题，JS 根本不会提前告诉你——等你上线才知道错。

换个写法，用 TS：

type User = { id: number; name: string;};function fetchUser(id: number): Promise { return fetch(`/api/user/${id}`).then(res => res.json); }fetchUser(1).then(user => { console.log(user.name.toUpperCase); });

修正点：TS 无法直接感知后端字段变更，但能通过类型系统降低风险

实际作用：

显式契约约束 ：开发者需手动维护 User 类型与后端接口的一致性编译期校验 ：若代码中误写 user.nome （拼写错误），TS 会立即报错类型提示辅助 ：IDE 会提示 name 字段存在，但无法验证后端真实返回

⚠️ 注意：TS 不能自动同步后端字段变更 ，需配合以下方案：

使用 openapi-generator 从 Swagger 自动生成类型定义前后端约定接口变更时同步更新类型文件通过运行时类型校验库（如 Zod）双重保障

JS 写法：

axios.get('/api/user/1').then(res => { console.log(res.data.name);});

TS 写法：

type ApiResponse = { code: number; data: T;};interface User { id: number; name: string; }axios.get>('/api/user/1').then(res => { console.log(res.data.data.name); });

JS 写法：谁知道 props 是啥，靠注释、靠记忆。

TS 写法：

interface ButtonProps { text: string; onClick: => void;}const MyButton: React.FC = ({ text, onClick }) => { return {text}; };

✅ 优势：

如果你以为 TS 只是“JavaScript 加个类型检查”，你就低估它了。

配合 VSCode，开发效率简直离谱地高。

你能自信地“大胆动刀”，而不是“战战兢兢全局搜索”。

TS 类型定义让你：

不用反复翻文档参数写错直接红API 使用一目了然

比如 axios、lodash、dayjs，用 TS 用得飞起。

例如权限系统、表单引擎、配置项类型推导等高级场景：

type Role = 'admin' | 'user' | 'guest';type Menu = { name: string; roles: Role; };