Which React TypeScript version to use in development?

Question

I have an existing TypeScript React project that was created before Hooks existed in React, and I'm trying to rewrite all the classes using Hooks.

Thus in my package.json "devDependencies", I changed the version of typescript react from 7.0.6 to @types/react-redux": "7.1.16". I would've imagined that I would want the exact same version of react in "dependencies", but it seems there is no 7.1.16 for react-redux, only 7.1 and 7.2. I chose 7.2 and it seems to work.

More broadly, I was wondering how I can be sure I won't get versioning issues if I'm using different versions of "react-redux" between the development and production dependencies?

I was also wondering if I need to use "@types/react-redux" in both "devDependencies" and "dependencies" as opposed to just "react-redux"?

Answer 1

It is very common that @types packages don't have the same version as the corresponding original package. Just use the latest version of both and you are usually good, since @types packages contain only type definitions and no runtime code.

Since you are probably building & bundling the result anyways, it doesn't really matter if something is a dependency or devDependency, that distinction is primarily an organizational one without any real life consequences.

Update:

There are two different scenarios here where devDependencies play a role:

• you write a library. In that case, for the person installing said library, only dependencies will be installed and for the person that checks out your source and runs npm install, both will be.
• you have an environment to run your code and install with npm install --production. In that case, devDependencies will not be installed.

Since you are building a react application though, it's very likely that you ever only run npm install - and that installs both dependencies and devDependencies. Since in that case both are installed in the same folder on your harddrive, from that point it's indistinguishable which is which, so npm start and npm run dev will just use the packages that are currently installed.

Answer 2

phry's answer starts with:

It is very common that @types packages don't have the same version as the corresponding original package.

It does not have to be: if your project is on GitHub, you can use the Dependabot service.

From May 2022:

Dependabot keeps @types dependencies in sync with updated packages

Dependabot will now update @types dependencies alongside their corresponding packages in TypeScript projects.

Before this change, users would see separate pull requests for a package and its corresponding @types package.
This could lead to packages and type definitions getting out of sync with one another, and require manual intervention.

For example, if a project had dependencies on both jquery and @types/jquery, and a vulnerability triggered Dependabot to update jquery from 3.4.1 to 3.5.0, the package @types/jquery would remain at its original 3.4.x version.

Now, Dependabot can help TypeScript users keep their dependencies and @types packages up-to-date and in sync.

When triggered to create an update, Dependabot will check if that package has a corresponding @types package.

• If so, Dependabot will update both the package and the corresponding @types package in a single PR.
• Or, if the @types package is no longer needed, that dependency will be removed instead.

The feature is automatically enabled on repositories containing @types packages in the project's devDependencies as listed in package.json.
You can disable this behavior by setting the ignore field in your dependabot.yml file to @types/*.

If you are building a react application, with npm install installing both dependencies and devDependencies, that should help.