## Usage

```bash
$ npx types-react-codemod

Positionals:
codemod [string] [required] [choices: "context-any", "deprecated-legacy-ref",
"deprecated-prop-types-types", "deprecated-react-child",
"deprecated-react-fragment", "deprecated-react-node-array",
"deprecated-react-text", "deprecated-react-type", "deprecated-sfc-element",
"deprecated-sfc", "deprecated-stateless-component",
"deprecated-void-function-component", "implicit-children",
"no-implicit-ref-callback-return", "preset-18", "preset-19",
"react-element-default-any-props", "refobject-defaults", "scoped-jsx",
"useCallback-implicit-any", "useRef-required-initial"]
paths [string] [required]

Options:
--version Show version number [boolean]
--help Show help [boolean]
--dry [boolean] [default: false]
--ignore-pattern [string] [default: "**/node_modules/**"]
--yes Automatically accepts all prompts. Useful when no user input
is available or desired. [boolean] [default: false]
--verbose [boolean] [default: false]

Examples:
types-react-codemod preset-18 ./ Ignores `node_modules` and `build`
--ignore-pattern folders
"**/{node_modules,build}/**"
```

## Available transforms

The transforms are meant to migrate old code.
The transformed code is not intended to be used as a pattern for new code.

Some transforms change code they shouldn't actually change.
Fixing all of these requires a lot of implementation effort.
When considering false-positives vs false-negatives, codemods opt for false-positives.
The reason being that a false-positive can be reverted easily (assuming you have the changed code in Version Control e.g. git) while a false-negative requires manual input.

- `preset-18`
- `deprecated-react-type`
- `deprecated-sfc-element`
- `deprecated-sfc`
- `deprecated-stateless-component`
- `context-any`
- `implicit-children`
- `useCallback-implicit-any`
- `preset-19`
- `deprecated-prop-types-types`
- `deprecated-legacy-ref`
- `deprecated-react-child`
- `deprecated-react-text`
- `deprecated-void-function-component`
- `no-implicit-ref-callback-return` (off by default)
- `react-element-default-any` (off by default)
- `refobject-defaults`
- `scoped-jsx`
- `useRef-required-initial`

### `preset-18`

This codemod combines all codemods for React 18 types.
You can interactively pick the codemods included.
By default, the codemods that are definitely required to upgrade to `@types/react@^18.0.0` are selected.
The other codemods may or may not be required.
You should select all and audit the changed files regardless.

### `context-any` (React 18)

```diff
class Component extends React.Component {
+ context: any
render() {
return this.context.someContextProperty;
}
}
```

You should only apply this codemod to files where the type-checker complains about access of `unknown` in `this.context`.
We'll check for any occurence of `context` (case-sensitive) in a `React.Component` body (or `React.PureComponent`).
If we find any occurence of `context` we'll add `context: any` declaration to the class body.

#### false-positive on `context` usage

We'll add `context: any` even if you write `const { context } = props`.
This simplifies the implementation tremendously and follows the overall rationale for false-positives: it can be reverted easily and at worst restores the behavior of React 17 typings.

#### false-negative when inheriting from another component

Class inheritance chains are not handled.

```tsx
class A extends React.Component {}

class B extends A {
render() {
// will error since the transform does not add `context: any` to the declaration of `A` nor `B`.
// It's up to you to decide whether `A` or `B` should have this declaration
return this.context.value;
}
}
```

We'll also miss usage of `context` if it's accessed outside of the class body e.g.

```tsx
function getValue(that) {
return that.context.value;
}

class A extends React.Component {
render() {
return getValue(this);
}
}
```

This doesn't really follow the general transform rationale of "over-applying" since at worst we restore React 17 behavior.
I just think that most class components do not use `this.context` (or already have a type declaration) somewhere else.

### All `deprecated-` transforms

```diff
-React.ReactType
+React.ElementType
-React.SFC
+React.FC
-React.StatelessComponent
+React.FunctionComponent
-React.SFCElement
+React.FunctionComponentElement
```

They simply rename identifiers with a specific name.
If you have a type with the same name from a different package, then the rename results in a false positive.
For example, `ink` also has a `StatelessComponent` but you don't need to rename that type since it's not deprecated.

### `implicit-children` (React 18)

```diff
-React.FunctionComponent
+React.FunctionComponent>
-React.FunctionComponent
+React.FunctionComponent>
```

This transform will wrap the props type of `React.FunctionComponent` (and `FC`, `ComponentType`, `SFC` and `StatelessComponent`) with `React.PropsWithChildren`.
Note, that the transform assumes `React.PropsWithChildren` is available.
We can't add that import since `React.PropsWithChildren` can be available via `tsconfig.json`.

#### `implicit-children` false-positive pattern A

We'll apply `React.PropsWithChildren` everytime.
If you have a component that doesn't actually take `children`, we'll not fix what removal of implicit children should've fixed.

Similarly, if your props already have `children` declared, `PropsWithChildren` will be redundant.
Redundant `PropsWithChildren` are only problematic stylistically.

#### `implicit-children` false-positive pattern B

`MyFunctionComponent` where `MyFunctionComponent` comes from `import { FunctionComponent as MyFunctionComponent } from 'react'` will be ignored.
In other words, the transform will not wrap `Props` in `React.PropsWithChildren`.
The transform would need to implement scope tracking for this pattern to get fixed.

### `useCallback-implicit-any` (React 18)

```diff
-React.useCallback((event) => {})
+React.useCallback((event: any) => {})
```

This transform should only be applied to files where TypeScript errors with "Parameter '\*' implicitly has an 'any' type.(7006)" in `useCallback`.

#### `useCallback-implicit-any` false-positive pattern A

If the callback param is inferrable by TypeScript we might apply `any` without need.
In the example below the type of `event` is inferrable and adding `any` essentially reduces type coverage.
This is why it's recommended to only apply `useCallback-implicit-any` to files that produce "Parameter '\*' implicitly has an 'any' type.(7006)" when type-checking with `@types/react@^18.0.0`.

```diff
type CreateCallback = () => (event: Event) => void;
-const createCallback: CreateCallback = () => useCallback((event) => {}, [])
+const createCallback: CreateCallback = () => useCallback((event: any) => {}, [])
```

### `preset-19`

This codemod combines all codemods for React 19 types.
You can interactively pick the codemods included.
By default, the codemods that are definitely required to upgrade to `@types/react@^19.0.0` are selected.
The other codemods may or may not be required.
You should select all and audit the changed files regardless.

### `deprecated-prop-types-types` (React 19)

```diff
+import * as PropTypes from "prop-types";
import * as React from "react";
-declare const requireable: React.Requireable;
+declare const requireable: PropTypes.Requireable;
-declare const validator: React.Validator;
+declare const requireable: PropTypes.Validator;
-declare const validationMap: React.ValidationMap<{}>;
+declare const requireable: PropTypes.ValidationMap;
-declare const weakValidationMap: React.WeakValidationMap<{}>;
+declare const requireable: PropTypes.WeakValidationMap;
```

### `deprecated-legacy-ref` (React 19)

```diff
import * as React from "react";
interface Props {
- ref?: React.LegacyRef;
+ ref?: React.Ref;
}
```

#### `deprecated-legacy-ref false-negative pattern A

Importing `LegacyRef` via aliased named import will result in the transform being skipped.

```tsx
import { LegacyRef as MyLegacyRef } from "react";
interface Props {
// not transformed
ref?: MyLegacyRef;
}
```

### `deprecated-react-child` (React 19)

```diff
import * as React from "react";
interface Props {
- label?: React.ReactChild;
+ label?: React.ReactElement | number | string;
}
```

#### `deprecated-react-child` false-negative pattern A

Importing `ReactChild` via aliased named import will result in the transform being skipped.

```tsx
import { ReactChild as MyReactChild } from "react";
interface Props {
// not transformed
label?: MyReactChild;
}
```

### `deprecated-react-node-array` (React 19)

```diff
import * as React from "react";
interface Props {
- children?: React.ReactNodeArray;
+ children?: ReadonlyArray;
}
```

#### `deprecated-react-node-array` false-negative pattern A

Importing `ReactNodeArray` via aliased named import will result in the transform being skipped.

```tsx
import { ReactNodeArray as MyReactNodeArray } from "react";
interface Props {
// not transformed
children?: MyReactNodeArray;
}
```

### `deprecated-react-fragment` (React 19)

```diff
import * as React from "react";
interface Props {
- children?: React.ReactFragment;
+ children?: Iterable;
}
```

#### `deprecated-react-fragment` false-negative pattern A

Importing `ReactFragment` via aliased named import will result in the transform being skipped.

```tsx
import { ReactFragment as MyReactFragment } from "react";
interface Props {
// not transformed
children?: MyReactFragment;
}
```

### `deprecated-react-text` (React 19)

```diff
import * as React from "react";
interface Props {
- label?: React.ReactText;
+ label?: number | string;
}
```

#### `deprecated-react-text` false-negative pattern A

Importing `ReactText` via aliased named import will result in the transform being skipped.

```tsx
import { ReactText as MyReactText } from "react";
interface Props {
// not transformed
label?: MyReactText;
}
```

### `deprecated-void-function-component` (React 19)

WARNING: Only apply to codebases using `@types/react@^18.0.0`.
In earlier versions of `@types/react` this codemod would change the typings.

```diff
import * as React from "react";
-const Component: React.VFC = () => {}
+const Component: React.FC = () => {}
-const Component: React.VoidFunctionComponent = () => {}
+const Component: React.FunctionComponent = () => {}
```

### `no-implicit-ref-callback-return` (React 19)

Off by default in `preset-19`. Can be enabled when running `preset-19`.

WARNING: Manually review changes in case you already used ref cleanups in Canary builds.

Ensures you don't accidentally return anything from ref callbacks since the return value was always ignored.
With ref cleanups, this is no longer the case and flagged in types to avoid mistakes.

```diff
-