refactor: add reasons why @ts-expect-error is being used

koba04 · koba04 · commit a27cc6cdaae4 · 2022-04-03T22:12:20.000+09:00
diff --git a/src/CSSTransition.tsx b/src/CSSTransition.tsx
@@ -357,35 +357,35 @@ class CSSTransition extends React.Component<Props> {
     }
 
     if (className) {
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Property 'active' does not exist on type '{} | {} | {}'.ts(7053)
       this.appliedClasses[type][phase] = className;
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       addClass(node, className);
     }
   }
 
   removeClasses(node: HTMLElement | null, type: TransitionClassNameKeys) {
     const {
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Property 'base' does not exist on type '{} | {} | {}'.ts(2339)
       base: baseClassName,
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Property 'active' does not exist on type '{} | {} | {}'.ts(2339)
       active: activeClassName,
-      // @ts-expect-error
+      // @ts-expect-error FIMXE: Property 'done' does not exist on type '{} | {} | {}'.ts(2339)
       done: doneClassName,
     } = this.appliedClasses[type];
 
     this.appliedClasses[type] = {};
 
     if (baseClassName) {
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       removeClass(node, baseClassName);
     }
     if (activeClassName) {
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       removeClass(node, activeClassName);
     }
     if (doneClassName) {
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
       removeClass(node, doneClassName);
     }
   }
diff --git a/src/ReplaceTransition.tsx b/src/ReplaceTransition.tsx
@@ -58,17 +58,17 @@ class ReplaceTransition extends React.Component<Props> {
     originalArgs: any[]
   ) {
     const { children } = this.props;
-    // @ts-expect-error
+    // @ts-expect-error FIXME: Type 'string' is not assignable to type 'ReactElement<Props, string | JSXElementConstructor<any>>'.ts(2322)
     const child: ReactElement<TransitionProps> =
       React.Children.toArray(children)[idx];
 
-    // @ts-expect-error
+    // @ts-expect-error FIXME: A spread argument must either have a tuple type or be passed to a rest parameter.ts(2556)
     if (child.props[handler]) child.props[handler](...originalArgs);
     if (this.props[handler]) {
       const maybeNode = child.props.nodeRef
         ? undefined
         : ReactDOM.findDOMNode(this);
-      // @ts-expect-error
+      // @ts-expect-error FIXME: Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.ts(2769)
       this.props[handler](maybeNode);
     }
   }
@@ -85,15 +85,15 @@ class ReplaceTransition extends React.Component<Props> {
       onExited: _onExited,
       ...props
     } = this.props;
-    // @ts-expect-error
+    // @ts-expect-error FIXME: Target requires 2 element(s) but source may have fewer.ts(2322)
     const [first, second]: [
       ReactElement<TransitionProps>,
       ReactElement<TransitionProps>
     ] = React.Children.toArray(children);
 
     return (
+      // @ts-expect-error FIXME: This JSX tag's 'children' prop expects type 'ReactNode[] & ReactNode' which requires multiple children, but only a single child was provided.ts(2745)
       <TransitionGroup {...props}>
-        {/* @ts-expect-error */}
         {inProp
           ? React.cloneElement(first, {
               key: 'first',
diff --git a/src/SwitchTransition.tsx b/src/SwitchTransition.tsx
@@ -44,10 +44,10 @@ type RenderCallbackParameter = {
 
 const leaveRenders = {
   [modes.out]: ({ current, changeState }: RenderCallbackParameter) =>
-    // @ts-expect-error FIXME
+    // @ts-expect-error FIXME: Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.ts(2769)
     React.cloneElement(current, {
       in: false,
-      // @ts-expect-error FIXME
+      // @ts-expect-error FIXME: Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.ts(2345)
       onExited: callHook(current, 'onExited', () => {
         changeState(ENTERING, null);
       }),
@@ -72,10 +72,10 @@ const enterRenders = {
       }),
     }),
   [modes.in]: ({ current, children, changeState }: RenderCallbackParameter) => [
-    // @ts-expect-error FIXME
+    // @ts-expect-error FIXME: Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.ts(2769)
     React.cloneElement(current, {
       in: false,
-      // @ts-expect-error FIXME
+      // @ts-expect-error FIXME: Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.ts(2345)
       onExited: callHook(current, 'onExited', () => {
         changeState(ENTERED, React.cloneElement(children, { in: true }));
       }),
diff --git a/src/Transition.tsx b/src/Transition.tsx
@@ -175,19 +175,19 @@ class Transition extends React.Component<Props, State> {
      *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
      */
     nodeRef: PropTypes.shape({
-      // @ts-expect-error
+      // @ts-expect-error We'll remove the PropTypes definition
       current:
         typeof Element === 'undefined'
           ? PropTypes.any
-          : // @ts-expect-error
+          : // @ts-expect-error We'll remove the PropTypes definition
             (propValue, key, componentName, location, propFullName, secret) => {
               const value = propValue[key];
 
               return PropTypes.instanceOf(
                 value && 'ownerDocument' in value
                   ? value.ownerDocument.defaultView.Element
                   : Element
-                // @ts-expect-error
+                // @ts-expect-error We'll remove the PropTypes definition
               )(propValue, key, componentName, location, propFullName, secret);
             },
     }),
@@ -281,9 +281,9 @@ class Transition extends React.Component<Props, State> {
      */
     timeout: (props: any, ...args: any[]) => {
       let pt = timeoutsShape;
-      // @ts-expect-error
+      // @ts-expect-error We'll remove the PropTypes definition
       if (!props.addEndListener) pt = pt.isRequired;
-      // @ts-expect-error
+      // @ts-expect-error We'll remove the PropTypes definition
       return pt(props, ...args);
     },
 
@@ -633,7 +633,7 @@ class Transition extends React.Component<Props, State> {
       <TransitionGroupContext.Provider value={null}>
         {typeof children === 'function'
           ? children(status, childProps)
-          : // @ts-expect-error FIXME
+          : // @ts-expect-error FIXME: Type 'ReactChildren' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, keyts(2769)
             React.cloneElement(React.Children.only(children), childProps)}
       </TransitionGroupContext.Provider>
     );
diff --git a/src/TransitionGroup.tsx b/src/TransitionGroup.tsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import type { ReactElement, ReactChildren } from 'react';
+import React, { ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import TransitionGroupContext from './TransitionGroupContext';
 
 import {
@@ -20,15 +20,15 @@ const defaultProps = {
 
 type Props = {
   component: any;
-  children: ReactChildren;
+  children: ReactNode[];
   appear: boolean;
   enter: boolean;
   exit: boolean;
   childFactory: (child: ReactElement) => ReactElement;
 };
 
 type State = {
-  children: ReactChildren;
+  children: ReactNode[];
   contextValue: { isMounting: boolean };
   handleExited: (
     child: ReactElement<{ onExited: (node: HTMLElement) => void }>,
@@ -117,7 +117,7 @@ class TransitionGroup extends React.Component<Props, State> {
     const handleExited = this.handleExited.bind(this);
 
     // Initial children should all be entering, dependent on appear
-    // @ts-expect-error
+    // @ts-expect-error FIXME: Property 'children' is missing in type '{ contextValue: { isMounting: true; }; handleExited: (child: React.ReactElement<{ onExited: (node: HTMLElement) => void; }, string | React.JSXElementConstructor<any>>, node: HTMLElement) => void; firstRender: true; }' but required in type 'Readonly<State>'.ts(2741)
     this.state = {
       contextValue: { isMounting: true },
       handleExited,
@@ -154,8 +154,7 @@ class TransitionGroup extends React.Component<Props, State> {
     node: HTMLElement
   ) {
     let currentChildMapping = getChildMapping(this.props.children);
-    // @ts-expect-error
-    if (child.key in currentChildMapping) return;
+    if (child.key && child.key in currentChildMapping) return;
 
     if (child.props.onExited) {
       child.props.onExited(node);
@@ -164,8 +163,10 @@ class TransitionGroup extends React.Component<Props, State> {
     if (this.mounted) {
       this.setState((state) => {
         let children = { ...state.children };
-        // @ts-expect-error
-        delete children[child.key];
+        if (child.key) {
+          // @ts-expect-error FIXME: Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)
+          delete children[child.key];
+        }
         return { children };
       });
     }
@@ -174,6 +175,7 @@ class TransitionGroup extends React.Component<Props, State> {
   render() {
     const { component: Component, childFactory, ...props } = this.props;
     const { contextValue } = this.state;
+    // @ts-expect-error FIXME: Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.ts(2345)
     const children = values(this.state.children).map(childFactory);
     const {
       appear: _appear,
diff --git a/src/utils/ChildMapping.ts b/src/utils/ChildMapping.ts
@@ -1,5 +1,5 @@
 import { Children, cloneElement, isValidElement } from 'react';
-import type { ReactChild, ReactChildren, ReactElement, ReactNode } from 'react';
+import type { ReactChild, ReactElement, ReactNode } from 'react';
 
 /**
  * Given `this.props.children`, return an object mapping key to child.
@@ -8,17 +8,18 @@ import type { ReactChild, ReactChildren, ReactElement, ReactNode } from 'react';
  * @return {object} Mapping of key to child
  */
 export function getChildMapping(
-  children: ReactChildren,
+  children: ReactNode[] | ReactNode,
   mapFn?: (child: ReactElement) => ReactElement
 ) {
   let mapper = (child: ReactNode) =>
     mapFn && isValidElement(child) ? mapFn(child) : child;
 
   let result = Object.create(null);
   if (children)
+    // @ts-expect-error FIXME: Object is possibly 'null' or 'undefined'.ts(2533)
     Children.map(children, (c) => c).forEach((child) => {
       // run the map function here instead so that the key is the computed one
-      // @ts-expect-error: Property 'key' does not exist on type 'ReactChildren'
+      // @ts-expect-error FIXME: Property 'key' does not exist on type 'string'.ts(2339)
       result[child.key] = mapper(child);
     });
   return result;
@@ -98,7 +99,7 @@ function getProp(
 }
 
 export function getInitialChildMapping(
-  props: { children: ReactChildren },
+  props: { children: ReactNode[] },
   onExited: (child: ReactChild) => void
 ) {
   return getChildMapping(props.children, (child: ReactElement) => {
@@ -113,7 +114,7 @@ export function getInitialChildMapping(
 }
 
 export function getNextChildMapping(
-  nextProps: { children: ReactChildren },
+  nextProps: { children: ReactNode[] },
   prevChildMapping: Record<string, ReactChild>,
   onExited: (child: ReactChild) => void
 ) {
