Fix or ignore type error

Author: armandabric

.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"]
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
 }

package.json

@@ -28,13 +28,13 @@
     "@babel/cli": "7.15.7",
     "@babel/core": "7.15.5",
     "@babel/preset-env": "7.15.6",
-    "@babel/preset-flow": "7.14.5",
     "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-angular": "8.3.4",
-    "@khanacademy/flow-to-ts": "^0.5.2",
     "@types/enzyme": "^3.10.9",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^27.0.2",
     "@types/react": "^17.0.26",
     "@types/react-is": "^17.0.2",
     "babel-eslint": "10.1.0",
@@ -55,7 +55,6 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "esm": "3.2.25",
     "expect": "27.2.3",
-    "flow-bin": "0.119.1",
     "flow-copy-source": "2.0.9",
     "husky": "3.1.0",
     "jest": "27.2.3",
@@ -72,7 +71,7 @@
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-sourcemaps": "0.6.3",
-    "typescript": "4.2.4"
+    "typescript": "4.4.3"
   },
   "peerDependencies": {
     "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1",
@@ -84,8 +83,6 @@
     "react-is": "17.0.2"
   },
   "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>tests/setupTests.js"
-    ]
+    "setupFilesAfterEnv": ["<rootDir>tests/setupTests.ts"]
   }
 }

src/AnonymousStatelessComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'; // eslint-disable-next-line react/display-name
 
-export default function (props) {
+export default function (props: { children: React.ReactNode }) {
   const { children } = props; // eslint-disable-line react/prop-types
 
   return <div>{children}</div>;

src/formatter/createPropFilter.ts

@@ -5,6 +5,7 @@ export default function createPropFilter(
   if (Array.isArray(filter)) {
     return (key: string) => filter.indexOf(key) === -1;
   } else {
+    // @ts-expect-error: flow to TS
     return (key: string) => filter(props[key], key);
   }
 }

src/formatter/formatFunction.ts

@@ -2,15 +2,21 @@ import type { Options } from './../options';
 
 function noRefCheck() {}
 
-export const inlineFunction = (fn: any): string =>
+type FunctionType = (...args: Array<any>) => any;
+
+export const inlineFunction = (fn: FunctionType): string =>
   fn
     .toString()
     .split('\n')
     .map((line) => line.trim())
     .join('');
-export const preserveFunctionLineBreak = (fn: any): string => fn.toString();
+
+export const preserveFunctionLineBreak = (fn: FunctionType): string =>
+  fn.toString();
+
 const defaultFunctionValue = inlineFunction;
-export default (fn: (...args: Array<any>) => any, options: Options): string => {
+
+export default (fn: FunctionType, options: Options): string => {
   const { functionValue = defaultFunctionValue, showFunctions } = options;
 
   if (!showFunctions && functionValue === defaultFunctionValue) {

src/formatter/formatReactElementNode.ts

@@ -8,7 +8,7 @@ import type { Options } from './../options';
 import type { ReactElementTreeNode } from './../tree';
 
 const compensateMultilineStringElementIndentation = (
-  element,
+  element: any,
   formattedElement: string,
   inline: boolean,
   lvl: number,
@@ -33,7 +33,7 @@ const compensateMultilineStringElementIndentation = (
 };
 
 const formatOneChildren =
-  (inline: boolean, lvl: number, options: Options) => (element) =>
+  (inline: boolean, lvl: number, options: Options) => (element: any) =>
     compensateMultilineStringElementIndentation(
       element,
       formatTreeNode(element, inline, lvl, options),
@@ -42,13 +42,15 @@ const formatOneChildren =
       options
     );
 
-const onlyPropsWithOriginalValue = (defaultProps, props) => (propName) => {
-  const haveDefaultValue = Object.keys(defaultProps).includes(propName);
-  return (
-    !haveDefaultValue ||
-    (haveDefaultValue && defaultProps[propName] !== props[propName])
-  );
-};
+const onlyPropsWithOriginalValue =
+  (defaultProps: Record<string, any>, props: Record<string, any>) =>
+  (propName: string) => {
+    const haveDefaultValue = Object.keys(defaultProps).includes(propName);
+    return (
+      !haveDefaultValue ||
+      (haveDefaultValue && defaultProps[propName] !== props[propName])
+    );
+  };
 
 const isInlineAttributeTooLong = (
   attributes: string[],
@@ -117,7 +119,7 @@ export default (
   let outInlineAttr = out;
   let outMultilineAttr = out;
   let containsMultilineAttr = false;
-  const visibleAttributeNames = [];
+  const visibleAttributeNames: Array<string> = [];
   const propFilter = createPropFilter(props, filterProps);
   Object.keys(props)
     .filter(propFilter)

src/formatter/formatTreeNode.ts

@@ -2,6 +2,7 @@ import formatReactElementNode from './formatReactElementNode';
 import formatReactFragmentNode from './formatReactFragmentNode';
 import type { Options } from './../options';
 import type { TreeNode } from './../tree';
+
 const jsxStopChars = ['<', '>', '{', '}'];
 
 const shouldBeEscaped = (s: string) =>
@@ -53,5 +54,6 @@ export default (
     return formatReactFragmentNode(node, inline, lvl, options);
   }
 
+  // @ts-expect-error: So should never be executed
   throw new TypeError(`Unknow format type "${node.type}"`);
 };

src/formatter/sortObject.ts

@@ -29,11 +29,11 @@ export default function sortObject(value: any): any {
       }
 
       if (key === 'current') {
-        // eslint-disable-next-line no-param-reassign
-        result[key] = '[Circular]';
+        // @ts-expect-error: flow to TS
+        result[key] = '[Circular]'; // eslint-disable-line no-param-reassign
       } else {
-        // eslint-disable-next-line no-param-reassign
-        result[key] = sortObject(value[key]);
+        // @ts-expect-error: flow to TS
+        result[key] = sortObject(value[key]); // eslint-disable-line no-param-reassign
       }
 
       return result;

src/index.ts

@@ -1,10 +1,10 @@
 import formatTree from './formatter/formatTree';
 import parseReactElement from './parser/parseReactElement';
-import type { Element as ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import type { Options } from './options';
 
 const reactElementToJsxString = (
-  element: ReactElement<any>,
+  element: ReactElement<any> | string | number,
   {
     filterProps = [],
     showDefaultProps = true,
@@ -16,13 +16,13 @@ const reactElementToJsxString = (
     sortProps = true,
     maxInlineAttributesLineLength,
     displayName,
-  }: Options = {}
-) => {
+  }: Partial<Options> = {}
+): string => {
   if (!element) {
     throw new Error('react-element-to-jsx-string: Expected a ReactElement');
   }
 
-  const options = {
+  const options: Options = {
     filterProps,
     showDefaultProps,
     showFunctions,
@@ -34,10 +34,12 @@ const reactElementToJsxString = (
     maxInlineAttributesLineLength,
     displayName,
   };
+
   return formatTree(parseReactElement(element, options), options);
 };
 
 export default reactElementToJsxString;
+
 export {
   inlineFunction,
   preserveFunctionLineBreak,

src/options.ts

@@ -1,13 +1,15 @@
-import * as React from 'react';
+import React from 'react';
+
 export type Options = {
   filterProps: string[];
   showDefaultProps: boolean;
   showFunctions: boolean;
-  functionValue: (...args: Array<any>) => any;
+  functionValue?: (...args: Array<any>) => any;
   tabStop: number;
   useBooleanShorthandSyntax: boolean;
   useFragmentShortSyntax: boolean;
   sortProps: boolean;
+
   maxInlineAttributesLineLength?: number;
-  displayName?: (element: React.ReactElement<any>) => string;
+  displayName?: (element: React.ReactElement) => string;
 };