Correct way to install Typescript in React/Next.js application-CodePudding

I have a Next.js application that I want to deploy to AWS Elastic Beanstalk. This application uses Typescript.

I would like to know if Typescript needs to be installed in the dependencies or devDependencies section, as after Googling a lot I found conflicting information. These are the packages I have in dev:

"devDependencies": {
    "jest": "^29.3.1",
    "sass": "^1.57.1",
    "typescript": "4.9.4",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "eslint": "8.30.0",
    "eslint-config-next": "^12.0.4"
  }

Is it correct to keep those packages in "devDependencies"? I also have some other packages that I am not sure of, like:

"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"bootstrap": "^5.2.3",

Can someone give a hint? Ofcourse I want to deploy a built version of the app.

CodePudding user response：

dependencies are packages that are required for your app to run. devDependencies are packages that have no use in production but that you use for development.

So, to retain your example, Typescript, ESlint, Jest are devDependencies; They are not called by your app after you've built it for production.

Conversely Bootstrap, FontAwsome etc., are dependencies; they are consumed by your app in production.

CodePudding user response：

You can simply consider dependencies equivalent to something necessary during running and devDependencies equivalent to something necessary during developing.

According to the typescript official site:

TypeScript code converts to JavaScript

That means: until you are working with a project built on typescript abilities (like ts-compiler or something), or you should always install typescript as devDependencies like the typescript official site recommended.

There is a feature I use to judge if a library dependencies or devDependencies: POSSIBLE RUNTIME CODES.

For example: bootstrap you mentioned up there includes styles components utilities and several parts aside. When we use a bootstrap abilities like validate forms, there must be some runtime codes.

however, the safest way is to follow the official site guiding :)