TypeScript类型什么时候用

变量定义时明确数据结构

写JavaScript的时候，经常遇到一个变量到底存的是字符串还是数字的问题。比如做购物车功能，price字段到底是字符串'19.99'还是数字19.99？TypeScript这时候就能派上用场。给变量加上类型，一眼就知道该怎么处理。

let price: number = 19.99;
let name: string = '咖啡';
let inStock: boolean = true;

这样别人看代码或者你自己几个月后再打开，不会傻眼。

函数参数和返回值需要约束

写函数最怕传错参数。比如有个计算总价的函数，本来应该接收两个数字，结果调用时传了字符串，运行时才报错，调试起来很麻烦。TypeScript可以在编码阶段就发现问题。

function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}
// 下面这行会提示错误
calculateTotal('20', '3');

开发时编辑器直接标红，省去很多测试时间。

处理接口返回数据

从后端拿数据时，经常不知道字段具体长什么样。比如用户信息接口，可能有id、name、email，但有时候字段是嵌套的。用TypeScript定义接口类型，调用时自动提示字段名，还能防止拼错。

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

const user: User = fetch('/api/user').then(res => res.json());

在写user.profile.email的时候，编辑器会自动补全，避免出现undefined报错。

组件通信中传递复杂数据

在React或Vue项目里，父子组件之间传值很常见。如果父组件传给子组件一个配置对象，包含多个字段，没有类型说明的话，子组件开发者只能靠猜。加上类型之后，谁用谁知道。

interface ModalProps {
    visible: boolean;
    title: string;
    onOk: () => void;
    onCancel: () => void;
}

function Modal({ visible, title, onOk, onCancel }: ModalProps) {
    // 渲染逻辑
}

这样别的同事调用这个组件时，就知道必须传哪些参数，哪些可选。

项目协作和长期维护

一个人写小项目可能觉得类型多余，但多人合作或者项目要持续更新时，类型就是沟通工具。新成员加入不用逐行读代码猜逻辑，看类型就能大概明白数据流向。上线三个月后再改功能，也不会因为忘了某个函数的用法而出问题。

尤其是团队里有人习惯缩写变量名，比如把isLoading写成l，这时候类型能救命。