写了很久TypeScript,才发现这些写法不对

摘要:很多人用TypeScript用得不爽,不是不会语法。是经常遇到这种情况:代码能跑,但心里没底,类型写了,但还是出Bug,看别人代码,类型一大坨,看不懂

很多人用TypeScript用得不爽,不是不会语法。

是经常遇到这种情况:

  • 代码能跑,但心里没底

  • 类型写了,但还是出Bug

  • 看别人代码,类型一大坨,看不懂

问题不在TypeScript本身,是类型没贴着业务写。


1. 接口返回不稳定,别直接用any

后端接口返回用户信息,但有时候字段不全,甚至返回null。

很多人第一反应是:

function formatUser(user: any) {
  return user.name.toUpperCase();
}

这段代码的问题是:TypeScript已经帮不上任何忙了。

换个写法:

function formatUser(user: unknown) {
  if (
    typeof user === 'object' &&
    user !== null &&
    'name' in user
  ) {
    const name = (user as { name: string }).name;
    return name.toUpperCase();
  }

  return '--';
}

不复杂,但有两个好处:接口异常时不会直接炸,一眼就能看出哪里做了兜底。


2. 状态码要限制范围

接口返回状态码:1成功,2失败,3处理中。

很多人这样写:

function getStatusText(status: number) {
  if (status === 1) return '成功';
  if (status === 2) return '失败';
  if (status === 3) return '处理中';
  return '未知';
}

问题是传99,TypeScript也不会拦。

改成联合类型:

type Status = 1 | 2 | 3;

function getStatusText(status: Status) {
  const map: Record<Status, string> = {
    1: '成功',
    2: '失败',
    3: '处理中'
  };

  return map[status];
}

现在调用getStatusText(4)会直接报错。


3. 配置和枚举要加as const

写了一个权限配置:

const ROLE = {
  ADMIN: 'admin',
  USER: 'user'
};

想在别的地方用'admin' | 'user'这个类型,但TypeScript只会给string。

正确写法:

const ROLE = {
  ADMIN: 'admin',
  USER: 'user'
} as const;

type Role = typeof ROLE[keyof typeof ROLE];
// 'admin' | 'user'

这个在函数参数里特别好用。


4. 列表映射用Record比interface清楚

接口返回的是一个对象列表:

{
  "1001": { "name": "Tom", "age": 18 },
  "1002": { "name": "Jerry", "age": 20 }
}

推荐写法:

type User = {
  name: string;
  age: number;
};

type UserMap = Record<string, User>;

一眼就知道:key是string,value是User。


5. 表单编辑页用Partial

新增用户需要全部字段,编辑用户只改一部分。

type User = {
  id: number;
  name: string;
  age: number;
};

// 编辑接口参数
type UpdateUserParams = Partial<User>;

现在这样写是合法的:

updateUser({
  id: 1,
  name: 'Tom'
});


6. 不同页面用不同字段用Pick

列表页只展示name和id,详情页展示全部。

type User = {
  id: number;
  name: string;
  age: number;
  address: string;
};

// 列表类型
type UserListItem = Pick<User, 'id' | 'name'>;

少写一套类型,也不会不一致。


7. 返回值不确定时让TypeScript自己推断

接口可能返回用户,也可能返回null。

function getUser() {
  if (Math.random() > 0.5) {
    return { name: 'Tom' };
  }
  return null;
}

TypeScript推断结果是:{ name: string } | null。

使用时:

const user = getUser();

if (user) {
  console.log(user.name);
}

不用自己手写联合类型,反而更安全。


8. 少写断言,多写判断

接口字段类型不确定:

function handle(value: unknown) {
  // 不推荐
  // (value as string).toUpperCase();
}

推荐写法:

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function handle(value: unknown) {
  if (isString(value)) {
    return value.toUpperCase();
  }
}


9. 枚举不是不能用,但普通项目没必要

const STATUS = {
  SUCCESS: 1,
  FAIL: 2
} as const;

type Status = typeof STATUS[keyof typeof STATUS];

调接口、看日志都更直观,值就是数字,不用再查对应关系。


最后

TypeScript真正难的,不是语法,是知道什么时候该严,什么时候该放。

如果你现在写TypeScript还有点别扭,其实很正常。说明你已经开始关心代码质量了。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_13387