Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to build a project with React+TypeScript". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

React project construction can be very simple, but if it is combined with typescript, it is not very troublesome, the official website also has a very clear explanation. There are two ways:

1. To build a react project with typescript directly, we need to add additional parameters. The template cannot use the default cra-template. Instead, use cra-template-typescript.

Npx create-react-app tsreactdemo-template typescript

The success prompt for the completion of the creation is not much different from the original, go directly to the project path, and then yarn start or npm start.

Enter the project, we are in no hurry to start, first to see what the file looks like, the default will create a tsconfig.json, and the default index.js,App.js file in the src directory has become the ts version of index.tsx,App.tsx.

We can look at dependencies in package.json:

In fact, dependence is too much @ types/jest,@types/node,@types/react,@types/react-dom.

At first, our react project command for creating typescript seemed to be npx create-react-app xxx-- typescript, but now it doesn't work, and the latter parameter must be-- template typescript, not directly-- typescript. This needs to be explained, it is not that we made a mistake, in fact, it was used in this way, but now it has been updated and the method has changed. From this, we can see that the front end of web is changing too fast. If you don't study for a year or two, it may completely subvert your cognition. This is not to say that typescript cannot be created, it will not report an error, but the default is the project of react, which will not contain the content of typescript.

In addition, to create a project in this way, the official documentation also recommends that we do not install create-react-app globally. In the latest version, you can create the latest react project directly through npx create-react-app. If you install create-react-app globally and the version is not up to date, it is very likely that you will create an old version of react project. You can uninstall npm uninstall-g create-react-app directly.

2. Add typescript-related dependencies directly on the basis of the react project.

Npm install typescript @ types/react-- save

Start creating a default react project:

On the command, I directly added-- typescript, which is what I said earlier, originally created in this way, but now this method does not work, but it will not report an error, the default is to create a react project, using the template is cra-template.

We directly add the dependency of typescript:

In fact, if you add it like this, you don't have to add the tsconfig.json file, just like we directly added a dependency without making major changes to the project.

When we change the index.js,App.js file to index.tsx,App.tsx, npm start or yarn start, a file tsconfig.json will be created by default, which is also clearly stated by the government, so there is no need to create tsconfig.json manually.

We can also look at the contents of the default generated tsconfig.json file:

{"compilerOptions": {"target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node" "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx"}, "include": ["src"]}

In fact, manual creation is about like this, so you might as well just let it generate itself.

That's all for "how to build a project with React+TypeScript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.