TypeScript项目实践之 Omit 特性

前言

入职两个月以来天天都在接触 TypeScript，但其实用的还不是很好，常常踩坑。因此我接下来也会尝试着更新本身该系列文章，目的是除了巩固总结本身的所学以外，也但愿可以帮助到正在学习TypeScript但没有在真实项目实践中使用过TypeScript的人们。

Omit 介绍

Omit的中文意思是 忽略 ，是 TypeScript 3.5 版本推出的特性，如下是官网的介绍

TypeScript 3.5 添加了新的 Omit 辅助类型，这个类型用来建立从原始类型中移除了某些属性的新类型。
复制代码

由于是我想写的主要是在真实项目中对于该特性的实践，所以官网里的例子我就不列举了。

需求介绍

由于我所在小组负责的是偏向企业服务的，相似于后台管理，所以会遇到不少的 Table, 采用的 UI框架是 ant-design, 因此我会列举一个。

如今咱们须要对表格作一个筛选功能，这会用到ant-desigh里Table的filterDropdown属性，以下图所示：

那么如何使用呢，仍是看下面的代码吧：

{
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    filterType: true,
    filterDropdown: ({ confirm, selectedKeys, setSelectedKeys }) => (
      <DropDownList confirm={confirm} selectedKeys={selectedKeys} setSelectedKeys={setSelectedKeys} /> ), } 复制代码

filterDropdown 能够的值能够是一个函数，其中注意到其参数的 props 的类型是 FilterDropdownProps, 这是个什么东西呢，咱们进去源码看看：

export interface FilterDropdownProps {
    prefixCls: string;
    setSelectedKeys: (selectedKeys: React.Key[]) => void;
    selectedKeys: React.Key[];
    confirm: () => void;
    clearFilters?: () => void;
    filters?: ColumnFilterItem[];
    visible: boolean;
}
复制代码

能够看到FilterDropdown有不少的属性, 其中有 selectedKeys 和 setSelectedKeys, 这也就是为何咱们在上面使用 filterDropdown 的时候能够经过解构赋值拿到 selectedKeys 和 setSelectedKeys。

注意点

咱们看到 setSelectedKeys，其参数类型是 React.Key[] 类型的，

经过上图能够发现，这个 setSelectedKeys 只能接收一个 string 或者 number 类型的数组。

那若是咱们在需求里遇到了要用string或者number类型以外的类型怎么办？

Omit 用法

上面介绍的时候提到，Omit 的意思是忽略，在这里，咱们应该理解为 Omit 能够忽略某个类型的某些属性，假设咱们如今想要让 setSelectedKeys 跟 selectedKeys 能接收一个非string 或者 number 类型的数组，那么咱们只需使用 Omit 忽略 这两个属性，而后咱们本身给这两个属性赋值新的类型是否是就能够了？

Omit <T, K>

其中 T 是 type也就是类型的简写， K 是 key 的简写，因此这里的意思就是忽略该类型的key属性

import { FilterDropdownProps } from 'antd/es/table'

type TagProps = {
    slug: string
    name: string
}

type MyFilterDropdownProps = Omit<FilterDropdownProps, 'selectedKeys' | 'setSelectedKeys'> & {
    selectedKeys: TagProps
    setSelectedKeys: (selectedKeys: TagProps[]) => void
}
复制代码

上面这段代码，先看左边 Omit<FilterDropdownProps, 'selectedKeys' | 'setSelectedKeys'>, 这里的意思就是要忽略 FilterDropdownProps 的 selectedKeys 和 setSelectedKeys 属性，而后咱们还作了一步最重要的操做，就是经过 & 符号将咱们本身定义的 selectedKeys 和 setSelectedKeys 和 FilterDropdownProps 剩下的属性组合起来了，最后再赋值给 MyFilterDropdownProps 类型。

那么这个时候，咱们就已经将FilterDropdownProps里的 selectedKeys 和 setSelectedKeys 改形成了咱们但愿可以接收的类型。

还没结束

我相信用过filterDropdown这个属性的同窗，必定都知道该属性是在 column 中使用的，column是一个对象数组，每个对象表明一列，既然filterDropdown是用在column中的，那么咱们最后要作的就是把column中的filterDropdown属性替换成咱们本身定义的类型便可。

在此以前，咱们先看看column里有哪些属性，上源码：

能够看到，这个ColumnType就是column 数组中每一个对象可使用的属性，其中就有 filterDropdown 属性，因此咱们最后一步操做以下代码：

import React, { FC } from 'react'
import { ColumnType, FilterDropdownProps, TableProps } from 'antd/es/table'

type TagProps = {
    slug: string
    name: string
}

type MyFilterDropdownProps = Omit<FilterDropdownProps, 'selectedKeys' | 'setSelectedKeys'> & {
    selectedKeys: TagProps
    setSelectedKeys: (selectedKeys: TagProps[]) => void
}

// 注意这里原来的 FilterDropdownProps 已经被替换成咱们自定义的 MyFilterDropdownProps
type MyColumnType<T> = Omit<ColumnType<T>, 'filterDropdown'> & {
    filterDropdown?: React.ReactNode | ((props: MyFilterDropdownProps) => React.ReactNode);
}

// 又由于 column 是 Table 的属性
type MyTableProps<T> = Omit<TableProps<T>, 'column'> & {
    columns?: MyColumnType<T>;
}

type User = {
    //
}

// MyTable 能够像普通的Table 同样使用, 由于其类型是咱们改造过的 TableProps
// 所以 Table 能够接收的属性 MyTable 也一样能够接收
const MyTable: FC<MyTableProps<User>> = (props) => {
    const { xxx, xxx, xxx, ...restProps } = props
    
    const columns: MyColumnType<User>[] = [{
        //,
        //,
        filterDropdown: ({selectedKeys, setSelectedKeys}) => {
            // 此时的 selectedKeys 跟 setSelectedKeys 接收的类型已经被改形成 TagProps 了
            // 而不是 antd table 定义的类型了
        })
    }]
    
    return <Table {...restProps} columns={columns} /> } 复制代码

其实到这里，关于 Omit的用法就讲完了，我想经过上面这几段代码，应该能够很好的说明Omit在实践当中是如何使用的。

谢谢观看小弟的文章，但愿对各位有帮助。
复制代码