TypeScript

Pro uses TypeScript as the default development language. The benefits of TypeScript need not be described in detail. Both development and maintenance costs can be greatly reduced, and it is a must for mid- and back-end development. Here are a few maintenance to talk about the best practices for TypeScript in Pro.

Define interface data

Any project is inseparable from the processing of data and interfaces. Splicing data and interfaces is one of the main tasks of forming business logic and front-end. Defining the TypeScript type of data returned by the interface can reduce a lot of maintenance costs and query API time.

In Pro, it is recommended to define the type of interface data in src/services/API.d.ts. Taking user basic information as an example:

declare namespace API {
  // Basic user information
  export interface CurrentUser {
    avatar?: string;
    name?: string;
    title?: string;
    group?: string;
    signature?: string;
    tags?: {
      key: string;
      label: string;
    }[];
    userid?: string;
    access?: 'user' | 'guest' | 'admin';
    unreadCount?: number;
  }
}

In many projects, there is no type definition. Here we recommend json2ts and other websites to automatically convert.

When using it, we can use it very easily. The files ending in d.ts will be imported into the world by TypeScript by default, but theimport syntax cannot be used. If you need to quote, you need to use three slashes.

export async function query() {
  return request<API.CurrentUser[]>('/ api/users');
}

// props
export interface UserProps {
  userInfo: API.CurrentUser;
}

Add parameters for Window

The front-end development is very large program is dealing with Window, sometimes we have to add parameters to Window, such as various statistical code. Provide a way to add parameters in TypeScript. Define the following in / src/typings.d.ts:

interface Window {
  ga: (command: 'send', hitType: 'event' | 'view', fieldsObject: GAFieldsObject | string) => void;
  reloadAuthorized: () => void;
}

If you don't want to add it in Window, but want to use it globally, for example, parameters injected through define, we inject it in / src/typings.d.ts through thedeclare keyword.

declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;

These examples can be seen in / src/typings.d.ts.

Types of components

Antd is a very convenient set of UI library, in order to use it better, we need to understand some of its types.

Form

There are many common types in Form, most of which can be exported from 'antd/es/form, here are a few of the most commonly used ones.

The form type generated in antd @ 4 using Form.useForm () is FormInstance. FormItemProps is also a commonly used type. We can use this type to encapsulate FormItem and add our own logic.

import { FormInstance, FormItemProps } from 'antd/es/form';

const [form] = Form.useForm();

// save ref
const ref = useRef<FormInstance>();
ref.current = form;

Due to the variability of form, the values ​​returned by form.getFieldsValue (); are all of type Store, and we can directlyas for the parameters we want.

const user = form.getFieldsValue() as API.CurrentUser;

Table

ProTable is recommended here, the type is relatively clear, and examples of commonly used types.

import { ProColumns, ActionType } from '@ ant-design/pro-table';

const columns: ProColumns<API.CurrentUser>[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    hideInSearch: true,
  },
];

const actionRef = useRef<ActionType>();

export default <ProTable actionRef={actionRef} />;

In addition, TablePaginationConfig andTableRowSelection are more commonly used. Special care should be taken when these two are generic types.

import { TablePaginationConfig } from 'antd/es/table/Table';
import { TableRowSelection } from 'antd/es/table/interface';

const pagination: TablePaginationConfig = {
  pageSize: 20,
  total: 2000,
  onChange: (current) => {},
};

const rowSelection: TableRowSelection = {
  selectedRowKeys: [],
  onChange: (keys, rows) => {},
};

Some small pits

React.ReactText[]

string[] | number[] is not the same as (string | number)[], in this case, just use React.ReactText[] just fine.

React.forwardRef

If we use the function component, we may report an error that ref cannot be found. At this time, we need to use React.forwardRef, but it should be noted that the type also needs to be modified accordingly.

- React.FC <CategorySelectProps>
+ React.ForwardRefRenderFunction <HTMLElement, CategorySelectProps>

Dynamic increase

Sometimes I need to dynamically update the key of an Object. For convenience, we can set the key to any, so that any key can be used, excess JSON.parse

interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
}

Value can be null or undefined

In 3.8 it is already very simple, just obj?.Xxx.

There is no typescript definition for a library

We can directly define it as any.

declare module 'xxx';

import xxx from 'xxx';

@ ts-ignore

Sometimes the type error is component, but it looks very uncomfortable. Will always compile and report errors, here you can use @ts-ignore to temporarily ignore it.

// @ts-ignore
xxxx;

After all, TypeScript is a markup language. You do n’t have to be stingy with any when you need to use any. When you encounter more dynamic code, you might as well use as unknown as XXX.