preface

I’ve been working with TypeScript every day for the past two months, but I’m still not using it very well. So I’m going to try to update this series as well. In addition to consolidating what I’ve learned, I hope to help people who are learning TypeScript but haven’t used it in real-world projects.

Omit to introduce

Omit is a TypeScript version 3.5 feature

TypeScript 3.5 adds a new Omit type that creates new types that remove attributes from the original type.Copy the code

Since I wanted to write about this feature in real projects, I will not list the examples on the official website.

Demand is introduced

Because my group is in charge of enterprise services, similar to background management, we will encounter many tables and the UI framework adopted is Ant-Design, so I will list one.

Now we need to filter the Table using the filterDropdown property of the Table in ant-desigh, as shown below:

So how to use, or look at the following code:

  {
    title: 'Age'.dataIndex: 'age'.key: 'age'.filterType: true.filterDropdown: ({ confirm, selectedKeys, setSelectedKeys }) = > (
      <DropDownList
        confirm={confirm}
        selectedKeys={selectedKeys}
        setSelectedKeys={setSelectedKeys}
      />),}Copy the code

The value of filterDropdown can be a function, in which the props parameter is of type FilterDropdownProps.

export interface FilterDropdownProps {
    prefixCls: string;
    setSelectedKeys: (selectedKeys: React.Key[]) = > void;
    selectedKeys: React.Key[];
    confirm: (a)= > void; clearFilters? :(a)= > void; filters? : ColumnFilterItem[]; visible: boolean; }Copy the code

As you can see, FilterDropdown has a number of properties, including selectedKeys and setSelectedKeys, That’s why we can get selectedKeys and setSelectedKeys by destructing assignments when we use filterDropdown above.

Pay attention to the point

SetSelectedKeys, whose arguments are of type react. Key[],

setSelectedKeys
string
number

What if we have a requirement that requires a type other than string or number?

Omit the usage

8. Omit Omit Omit Omit properties of a particular type Suppose we want setSelectedKeys and selectedKeys to receive an array that is not string or number, then we just Omit the properties and assign new types to them.

Omit <T, K>

Where T is type, K is key, so ignore the key property of that type

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

type TagProps = {
    slug: string
    name: string
}

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

So this code up here, Look at the left Omit < FilterDropdownProps, ‘selectedKeys’ |’ setSelectedKeys >, We’re going to ignore the selectedKeys and setSelectedKeys properties of FilterDropdownProps, and then we’re going to do the most important thing, We’re going to use the ampersand to combine our selectedKeys and setSelectedKeys and FilterDropdownProps properties, and then assign to MyFilterDropdownProps.

At this point, we’ve changed the selectedKeys and setSelectedKeys in FilterDropdownProps to the types we want to receive.

Isn’t over

I’m sure those of you who have used filterDropdown know that it’s used in column, and column is an array of objects, and each object represents a column, and since filterDropdown is used in column, So the last thing we need to do is replace the filterDropdown property in column with our own type.

Before we do that, let’s take a look at the attributes in column.

ColumnType = filterDropdown ColumnType = filterDropdown ColumnType = filterDropdown ColumnType = 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
}

// Notice that the FilterDropdownProps has been replaced with MyFilterDropdownProps
type MyColumnType<T> = Omit<ColumnType<T>, 'filterDropdown'> & { filterDropdown? : React.ReactNode |((props: MyFilterDropdownProps) = > React.ReactNode);
}

// Column is an attribute of Table
type MyTableProps<T> = Omit<TableProps<T>, 'column'> & { columns? : MyColumnType<T>; } type User = {//
}

// MyTable can be used like a normal Table because the type of MyTable is our modified TableProps
// So the attributes MyTable can receive can also receive
const MyTable: FC<MyTableProps<User>> = (props) = > {
    const{ xxx, xxx, xxx, ... restProps } = propsconst columns: MyColumnType<User>[] = [{
        / /,
        / /,
        filterDropdown: ({selectedKeys, setSelectedKeys}) = > {
            // The type received by selectedKeys and setSelectedKeys has been modified to TagProps
            // Instead of antd table defined type})}]return <Table {. restProps} columns={columns} />
}
Copy the code

In fact, that’s all about the use of Omit Omit. I think the above codes can well explain how to use Omit Omit in practice.

Thank you for watching the little brother's article, I hope to help you.Copy the code