@alicloud/console-components/demo/demo-select/const/index.ts

Alibaba Cloud React Components

import {
  EIssueType,
  EIssueConsequence
} from '../../enum';
import {
  IFixing
} from '../../types';

export const FIXING_PROP_GENERIC: IFixing = {
  propName: '泛型',
  codeOld: `interface SelectProps {
  dataSource?: Array<any>;
  value?: any;
  defaultValue?: any;
  onChange?: (value: any, actionType: string, item: any) => void;
}`,
  codeNew: `// 单选
interface SelectProps<T, D extends IDataSourceItemBase<T>> {
  mode?: 'single'; // 不设或显式说是 single 的时候，为单选
  dataSource: D[] | T[]; // 可以是纯值，也可以是 DataSourceItem
  value?: T;
  defaultValue?: T;
  onChange?(value: T, source: TSelectChangeSource, item: TDataSourceMixed<T, D>): void;
}
// 多选
interface SelectProps<T, D extends IDataSourceItemBase<T>> {
  mode: 'multiple' | 'tag'; // 当设置这两个值的时候，为多选，下方相关的参数都是数组
  dataSource: D[] | T[]; // 可以是纯值，也可以是 DataSourceItem
  value?: T[];
  defaultValue?: T[];
  onChange?(value: T[], source: TSelectChangeSource, item: TDataSourceMixed<T, D>[]): void;
}
export type TSelectProps<T = string, D extends IDataSourceItemBase<T> = IDataSourceItemBase<T>> = ISelectPropsSingle<T, D> | ISelectPropsMulti<T, D>;`,
  issues: [{
    title: '无法在编译器辨别类型',
    code: `<Select {...{
  dataSource, // 数字数组
  value, // string，实际是 number
  onChange // string => void，实际是 number => void
}} />`,
    type: EIssueType.TYPE_UNPROTECTED,
    error: '可能导致各种运行期问题',
    consequences: [EIssueConsequence.ABNORMAL]
  }, {
    title: '无法在编译器辨别单选或多选',
    code: `<Select {...{
  mode: 'multiple', // tag
  dataSource,
  value, // string，实际是 string[]
  onChange // string => void，实际是 string[] => void
}} />`,
    type: EIssueType.TYPE_UNPROTECTED,
    error: '可能导致各种运行期问题',
    consequences: [EIssueConsequence.ABNORMAL]
  }]
};