TypeScript 常见坏习惯 Top 10，看看你中了几个
整理了10个TS的常见坏习惯，第1个我敢说90%的人都中过。
1. 滥用 any 类型
觉得TS的类型校验麻烦，啥都标any，美其名曰"快速开发"。
错误写法：
// ❌ any让TS形同虚设
function handleData(data: any) {
return data.name.toUpperCase(); // data没有name？运行时直接崩
}正确写法：
// ✅ 明确定义类型
interface User { name: string; age: number }
function handleData(data: User) {
return data.name.toUpperCase(); // 编译期就能发现问题
}
// ✅ 真的不确定类型，用unknown
function handleUnknown(data: unknown) {
if (typeof data === 'object' && data !== null && 'name' in data) {
return (data as User).name.toUpperCase();
}
return '';
}any等于白写TS，编译器帮你挡bug的能力直接归零。
2. 用类型断言代替类型校验
不管类型对不对，直接as强行断言，暴力绕过校验。
错误写法：
// ❌ 强行断言，万一元素不存在就炸
const input = document.getElementById('input') as HTMLInputElement;
console.log(input.value);正确写法：
// ✅ 先校验再使用
const input = document.getElementById('input');
if (input instanceof HTMLInputElement) {
console.log(input.value); // 安全！
}类型断言是告诉TS"我确定"，而不是让TS帮你验证。断言越少，代码越稳。
3. 同一个对象结构重复写类型
改一处要改十处，维护起来纯属浪费时间。
错误写法：
// ❌ 到处复制粘贴
function getUser(): { id: number; name: string; email: string } { ... }
function updateUser(user: { id: number; name: string; email: string }) { ... }正确写法：
// ✅ 抽成interface，改一处全生效
interface User { id: number; name: string; email: string }
function getUser(): User { ... }
function updateUser(user: User) { ... }4. 不写函数返回值类型
让TS自动推导看似省事，但一旦逻辑有漏洞，返回了非预期类型，TS也不会提醒你。
错误写法：
// ❌ 漏了return，返回undefined，TS不会报错
function calculate(a: number, b: number) {
if (a > b) return a - b;
// 忘了else分支...
}正确写法：
// ✅ 显式声明返回值，漏了return直接报错
function calculate(a: number, b: number): number {
if (a > b) return a - b;
return b - a; // 必须返回number
}5. 到处写字面量，不用枚举管理
固定值散落在代码各处，拼错字母只能在运行时才发现。
错误写法：
// ❌ 字面量多了容易记混拼错
function setStatus(status: 'success' | 'error' | 'loading') { ... }
setStatus('succes'); // 少一个s，报错正确写法：
// ✅ 枚举统一管理，IDE自动提示
enum Status { Success = 'success', Error = 'error', Loading = 'loading' }
function setStatus(status: Status) { ... }
setStatus(Status.Success); // 不可能拼错6. 不用可选链和空值合并
写一堆if判断处理null/undefined，代码又臭又长。
错误写法：
// ❌ 层层判断，看着就累
let city = '';
if (user && user.info && user.info.address) {
city = user.info.address.city;
}正确写法：
// ✅ 一行搞定
const city = user?.info?.address?.city ?? '';TS支持这些语法，不用白不用。
7. 用any代替泛型
写通用函数时，为了省事直接any，丢失了类型信息。
错误写法：
// ❌ 返回值是any，后续调用没有类型提示
function getFirst(arr: any[]): any { return arr[0]; }
const first = getFirst(['a', 'b']); // first是any正确写法：
// ✅ 泛型保留类型，自动推导
function getFirst<T>(arr: T[]): T { return arr[0]; }
const first = getFirst(['a', 'b']); // first是string泛型是TS的核心能力之一，用any写通用函数等于放弃了TS。
8. 不知道什么时候用interface，什么时候用type
简单原则：对象类型优先interface，需要联合/交叉类型用type。
错误写法：
// ❌ 扩展对象只能用交叉类型，语法繁琐
type User = { id: number; name: string };
type UserWithAge = User & { age: number };正确写法：
// ✅ interface天生支持extends
interface User { id: number; name: string }
interface UserWithAge extends User { age: number }
// type适合这种场景
type Status = 'active' | 'inactive';9. async函数不指定Promise返回类型
fetch返回的数据默认是any，不指定类型，后续取值全靠猜。
错误写法：
// ❌ 返回值是any，data.xxx全没校验
async function fetchUser() {
const res = await fetch('/api/user');
return res.json();
}正确写法：
// ✅ 明确类型，数据结构不对直接编译报错
interface User { id: number; name: string }
async function fetchUser(): Promise<User> {
const res = await fetch('/api/user');
return await res.json();
}10. 不用Utility Types，手写一堆重复类型
TS内置了Partial、Pick、Omit、Record等工具类型，不用等于重复造轮子。
错误写法：
interface User {
id: number;
name: string;
email: string;
age: number;
}
// ❌ 想要"更新用户"的类型，手写一遍
interface UpdateUser {
name?: string;
email?: string;
age?: number;
}正确写法：
// ✅ 一行搞定，还不容易漏字段
type UpdateUser = Partial<Pick<User, 'name' | 'email' | 'age'>>;
// 常用工具类型速查：
// Partial<T> → 所有字段变可选
// Required<T> → 所有字段变必填
// Pick<T, K> → 只取部分字段
// Omit<T, K> → 排除部分字段
// Record<K, V> → 快速定义键值对类型本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
