卧槽，原来我写的代码是有问题啊！-阿南达文事网

卧槽，原来我写的代码是有问题啊！

前言

周末了，分享个这周遇到的一个小问题: ts 中 is 和 as 的区别！

正文

问题

相信大家一定碰到过这样的情况：

根据不同条件生成 columns：

代码语言：javascript代码运行次数：0运行复制

let isCondition = false;

const beforeColumns: DataType[] = [
  isCondition && {
    title: 'name',
    dataIndex: 'name',
    render: (name, record) => name + record.name 
  },
  {
    title: 'age',
    dataIndex: 'age',
    render: (age, record) => age + record.age
  }
];

但是当条件不成立时，数组的类型会从预期的：

ColumnProps<IPerson> ->

boolean | ColumnProps<IPerson>

这是你肯定想到使用 filter 方法作一层过滤：

代码语言：javascript代码运行次数：0运行复制

const afterColumns = beforeColumns
  .filter(item => typeof item !== 'boolean')

然后我们在传给 Table，然而实际情况是，依然会报错：

filter 过滤无效

这是因为 TypeScript 并不知道你排除了 number 和 boolean，它保守地认为 item 可能还是 boolean | ColumnProps<IPerson>!

两种解决方法

这时候，你可能会用 as 作一层处理：

代码语言：javascript代码运行次数：0运行复制

const afterColumns = beforeColumns
  .filter(item => typeof item !== 'boolean') as ColumnProps<IPerson>[];

这样确实不会有 ts 报错了！但是有个很大的隐患，比如以后这个数组中出现了 nubmer 类型，ts 也不会报错了

而正确的做法是使用 is 类型保护函数!

代码语言：javascript代码运行次数：0运行复制

const afterColumns = beforeColumns
  .filter((item): item is ColumnProps<IPerson> 
    => typeof item !== 'boolean');

item is ColumnProps<IPerson> 是一个类型谓词

它会告诉 TypeScript：“如果这个函数返回 true，那 item 就是 ColumnProps<IPerson> 类型”

所以 filter 之后得到的数组，类型就是 ColumnProps<IPerson>[],类型推导是安全且自动完成的

最后

as 是一个强制断言, TypeScript 不会去验证，它只是“相信你说的是对的”，所以开发中尽量避免使用 as!

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-13，如有侵权请联系 cloudcommunity@tencent 删除安全boolean函数开发数组

卧槽，原来我写的代码是有问题啊！