type: optimization undefined type (#40241)

* type: optimization undefined type

* fix type

* fix type

* add

* revert

* revert

* revert

.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx

@@ -115,7 +115,7 @@ export default () => {
   return (
     <div css={[styles.affixTabs, fixedId && styles.affixTabsFixed]} ref={containerRef}>
       <Tabs
-        activeKey={fixedId || undefined}
+        activeKey={fixedId}
         onChange={(key) => {
           scrollToId(key);
         }}

components/_util/motion.ts

@@ -29,7 +29,7 @@ const SelectPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as
 
 export type SelectCommonPlacement = typeof SelectPlacements[number];
 
-const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {
+const getTransitionDirection = (placement?: SelectCommonPlacement) => {
   if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
     return `slide-down`;
   }

components/_util/styleChecker.ts

@@ -5,7 +5,7 @@ export const canUseDocElement = () => canUseDom() && window.document.documentEle
 
 export { isStyleSupport };
 
-let flexGapSupported: boolean | undefined;
+let flexGapSupported: boolean;
 export const detectFlexGapSupported = () => {
   if (!canUseDocElement()) {
     return false;

components/affix/utils.ts

@@ -56,7 +56,7 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
     return;
   }
 
-  let entity: ObserverEntity | undefined = observerEntities.find((item) => item.target === target);
+  let entity = observerEntities.find((item) => item.target === target);
 
   if (entity) {
     entity.affixList.push(affix);

components/anchor/demo/targetOffset.tsx

@@ -3,7 +3,7 @@ import { Anchor, Row, Col } from 'antd';
 
 const App: React.FC = () => {
   const topRef = React.useRef<HTMLDivElement>(null);
-  const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
+  const [targetOffset, setTargetOffset] = useState<number>();
 
   useEffect(() => {
     setTargetOffset(topRef.current?.clientHeight);

components/cascader/index.tsx

@@ -45,7 +45,7 @@ export type FilledFieldNamesType = Required<FieldNamesType>;
 
 const { SHOW_CHILD, SHOW_PARENT } = RcCascader;
 
-function highlightKeyword(str: string, lowerKeyword: string, prefixCls: string | undefined) {
+function highlightKeyword(str: string, lowerKeyword: string, prefixCls?: string) {
   const cells = str
     .toLowerCase()
     .split(lowerKeyword)

components/collapse/__tests__/index.test.tsx

@@ -122,9 +122,9 @@ describe('Collapse', () => {
       .spyOn(window, 'requestAnimationFrame')
       .mockImplementation((cb) => setTimeout(cb, 16.66));
 
-    let setActiveKeyOuter: React.Dispatch<React.SetStateAction<React.Key | undefined>>;
-    const Test = () => {
-      const [activeKey, setActiveKey] = React.useState();
+    let setActiveKeyOuter: React.Dispatch<React.SetStateAction<React.Key>>;
+    const Test: React.FC = () => {
+      const [activeKey, setActiveKey] = React.useState<React.Key>();
       setActiveKeyOuter = setActiveKey;
       return (
         <div hidden>

components/config-provider/DisabledContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export type DisabledType = true | false | undefined;
+export type DisabledType = boolean | undefined;
 
 const DisabledContext = React.createContext<DisabledType>(false);
 

components/config-provider/cssVariables.ts

@@ -12,10 +12,7 @@ const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
 export function getStyle(globalPrefixCls: string, theme: Theme) {
   const variables: Record<string, string> = {};
 
-  const formatColor = (
-    color: TinyColor,
-    updater?: (cloneColor: TinyColor) => TinyColor | undefined,
-  ) => {
+  const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
     let clone = color.clone();
     clone = updater?.(clone) || clone;
     return clone.toRgbString();

components/descriptions/index.tsx

@@ -74,7 +74,7 @@ function getRows(children: React.ReactNode, column: number) {
   let rowRestCol = column;
 
   childNodes.forEach((node, index) => {
-    const span: number | undefined = node.props?.span;
+    const span: number = node.props?.span;
     const mergedSpan = span || 1;
 
     // Additional handle last one

components/form/util.ts

@@ -14,7 +14,9 @@ export function toArray<T>(candidate?: T | T[] | false): T[] {
 }
 
 export function getFieldId(namePath: InternalNamePath, formName?: string): string | undefined {
-  if (!namePath.length) return undefined;
+  if (!namePath.length) {
+    return undefined;
+  }
 
   const mergedId = namePath.join('_');
 

components/input/Input.tsx

@@ -221,7 +221,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       prefixCls={prefixCls}
       autoComplete={input?.autoComplete}
       {...rest}
-      disabled={mergedDisabled || undefined}
+      disabled={mergedDisabled}
       onBlur={handleBlur}
       onFocus={handleFocus}
       suffix={suffixNode}

components/message/index.tsx

@@ -84,9 +84,9 @@ interface GlobalHolderRef {
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
   const [prefixCls, setPrefixCls] = React.useState<string>();
   const [container, setContainer] = React.useState<HTMLElement>();
-  const [maxCount, setMaxCount] = React.useState<number | undefined>();
-  const [rtl, setRTL] = React.useState<boolean | undefined>();
-  const [top, setTop] = React.useState<number | undefined>();
+  const [maxCount, setMaxCount] = React.useState<number>();
+  const [rtl, setRTL] = React.useState<boolean>();
+  const [top, setTop] = React.useState<number>();
 
   const [api, holder] = useInternalMessage({
     prefixCls,

components/notification/index.tsx

@@ -59,10 +59,10 @@ interface GlobalHolderRef {
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
   const [prefixCls, setPrefixCls] = React.useState<string>();
   const [container, setContainer] = React.useState<HTMLElement>();
-  const [maxCount, setMaxCount] = React.useState<number | undefined>();
-  const [rtl, setRTL] = React.useState<boolean | undefined>();
-  const [top, setTop] = React.useState<number | undefined>();
-  const [bottom, setBottom] = React.useState<number | undefined>();
+  const [maxCount, setMaxCount] = React.useState<number>();
+  const [rtl, setRTL] = React.useState<boolean>();
+  const [top, setTop] = React.useState<number>();
+  const [bottom, setBottom] = React.useState<number>();
 
   const [api, holder] = useInternalNotification({
     prefixCls,

components/skeleton/Skeleton.tsx

@@ -31,7 +31,7 @@ export interface SkeletonProps {
   round?: boolean;
 }
 
-function getComponentProps<T>(prop: T | boolean | undefined): T | {} {
+function getComponentProps<T>(prop?: T | boolean): T | {} {
   if (prop && typeof prop === 'object') {
     return prop;
   }

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -226,7 +226,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   }, [visible]);
 
   // ======================= Submit ========================
-  const internalTriggerFilter = (keys: Key[] | undefined | null) => {
+  const internalTriggerFilter = (keys?: Key[]) => {
     const mergedKeys = keys && keys.length ? keys : null;
     if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) {
       return null;

components/tree-select/demo/basic.tsx

@@ -34,7 +34,7 @@ const treeData = [
   },
 ];
 const App: React.FC = () => {
-  const [value, setValue] = useState<string | undefined>(undefined);
+  const [value, setValue] = useState<string>();
 
   const onChange = (newValue: string) => {
     setValue(newValue);

components/typography/Base/index.tsx

@@ -85,7 +85,9 @@ function wrapperDecorations(
   let currentContent = content;
 
   function wrap(needed: boolean | undefined, tag: string) {
-    if (!needed) return;
+    if (!needed) {
+      return;
+    }
 
     currentContent = React.createElement(tag, {}, currentContent);
   }

components/upload/UploadList/ListItem.tsx

@@ -35,7 +35,7 @@ export interface ListItemProps {
     customIcon: React.ReactNode,
     callback: () => void,
     prefixCls: string,
-    title?: string | undefined,
+    title?: string,
   ) => React.ReactNode;
   itemRender?: ItemRender;
   onPreview: (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => void;

tests/utils.tsx

@@ -6,7 +6,7 @@ import { render, act } from '@testing-library/react';
 import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
 import { _rs as onEsResize } from 'rc-resize-observer/es/utils/observerUtil';
 
-export function assertsExist<T>(item: T | null | undefined): asserts item is T {
+export function assertsExist<T>(item?: T): asserts item is T {
   expect(item).not.toBeUndefined();
   expect(item).not.toBeNull();
 }