function echo<T>(arg: T): T { return arg; } const result = echo(true); function swap<T, U>(tuple: [T: U]): [U: T] { return [tuple[1], tuple[0]]; } const result2= swap(['str', 123])

interface IWithLength { length: number } function echowithLenght<T extends IWithLength>(arg: T): T { console.log(arg.length) return arg }

class Queue<T> {   private data = [];   push(item: T) {     return this.data.push(item);   }   pop(): T {     return this.data.shift();   } } const queue = new Queue<number>(); queue.push(1); // queue.push('str'); console.log(queue.pop().toFixed()); // -------- interface KeyPair<T, U> { key: T; value: U; } let key1: KeyPair<number, string> = {key: 1, value: "str"}

interface IPlus<T> { (a: T, b: T): T; } function plus(a: number, b: number): number { return a + b; } function connect(a: string, b: string): string { return a + b; } const a: IPlus<number> = plus; const b: IPlus<String> = connect;

type NativeButtonProps = React.ButtonHTMLAttributes<HTMLElement>; type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>; export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

// 最简单的测试 test('first react test case', () => { const wrapper = render(<Button>OK</Button>); const element = wrapper.queryByText('OK'); expect(element).toBeTruthy(); });

interface IMenuContent { index: number; onSelect?: SelectCallback; } export const MenuContext = createContext < IMenuContent > { index: 0 }; const Menu: React.FC<MenuProps> = (props) => { const passedContext: IMenuContent = { index: currentIndex ? currentIndex : 0, onSelect: handleClick, }; return ( <ul className={classes} style={style}> <MenuContext.Provider value={passedContext}>{children}</MenuContext.Provider> </ul> ); }; // ---- 曾孙组件 ---- import { MenuContext } from './menu'; const MenuItem: React.FC<MenuItemProps> = (props) => { const context = useContext(MenuContext); };

const renderChildren = () => { return React.Children.map(children, (child, index) => { const childElement = child as React.FunctionComponentElement<MenuItemProps>; const { displayName } = childElement.type; if (displayName === 'MenuItem') { return React.cloneElement(childElement, { index }); } else { console.error('Warning: Menu has a child which is not a MenuItem component'); } }); };

const SubMenu: React.FC<SubMenuProps> = ({ index, title, children, className }) => { const context = useContext(MenuContext); const openedSubMenus = context.defaultOpenSubMenus as Array<string>; const isOpened = (index && context.mode === 'vertical') ? openedSubMenus.includes(index): false; const [menuOpen, setOpen] = useState(isOpened); const classes = classNames('menu-item submenu-item', className, { 'is-active': context.index === index, }); const handleClick = (e: React.MouseEvent) => { e.preventDefault(); setOpen(!menuOpen); } let timer: any; const handleMouse = (e: React.MouseEvent, toggle: boolean) => { clearTimeout(timer); e.preventDefault(); timer = setTimeout(() => { setOpen(toggle); }, 300); } const clickEvents = context.mode === 'vertical' ? { onClick: handleClick } : {} const hoverEvents = context.mode !== 'vertical' ? { onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true)}, onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false)} } : {} const renderChildren = () => { const subMenuClasses = classNames('menu-submenu', { 'menu-opened': menuOpen }) const childComponent = React.Children.map(children, (child, i) => { const childElement = child as FunctionComponentElement<MenuItemProps>; if (childElement.type.displayName === 'MenuItem') { return React.cloneElement(childElement, { index: `${index}-${i}` }); } else { console.error('Warning: Menu has a child which is not a MenuItem component'); } }); return <ul className={subMenuClasses}>{childComponent}</ul>; }; return ( <li key={index} className={classes} {...hoverEvents}> <div className="submenu-title" {...clickEvents}>{title}</div> {renderChildren()} </li> ); };