0

I started a react project through create-react-app

create-react-app my-app --scripts-version=react-scripts-ts

And I got the following package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts-ts": "2.16.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^23.1.0",
    "@types/node": "^10.3.3",
    "@types/react": "^16.3.18",
    "@types/react-dom": "^16.0.6",
    "typescript": "^2.9.2"
  }
}

I understand that packages in devDependencies won't be needed for building the production bundle, therefore we have dependencies and devDependencies separately. However, if I want to add a new package, such as react-router, should I do the following two separately like following?

npm install --save react-router
npm install --save-dev @types/react-router

or should I do

npm install --save @types/react-router

If either way if fine, what's the difference between the two approaches?

2 Answers 2

3

npm install --save react-router Installs the actual module while,
npm install --save-dev @types/react-router only install type information for typescript. The type information has no functionality of its own, so you need to install both.
The type information is installed as a dev dependency because it isn't required after the build process which transforms typescript into JavaScript.

Sign up to request clarification or add additional context in comments.

Comments

1

The answer to the question is yes.

Installing @types/react-router you only get TypeScript type definitions for react-router and not the react-router functionality.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.