Shulou(Shulou.com)06/02 Report--

This article focuses on "how to configure TypeScript in React applications". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to configure TypeScript for React applications.

React is a JavaScript library for building user interface UI, which does not support TypeScript by default. React16.13.1 is used in this article.

We need to install the following components when using react's library:

Node (npm,npx) create-react-app react-script-ts typescript

By reading this article, you will learn:

Quickly create React applications

Basic configuration of tsconfig

Using the tsx component in React

Failed to compile pictures in tsx

Create a project

Here, by default, we have a node environment and use npx to quickly install React applications.

Npx create-react-app react-demo-script-version=react-script-ts

In the case of good network conditions, the speed is still considerable.

Npx: 97 was successfully installed in 22.955 seconds We suggest that you begin by typing: cd react-demo yarn start Happy hacking!

After creating the program, let's record the directory at this time:

Basic configuration of tsconfig

First, you need to install TypeScript:

Npm i typescript-D tsc-- init

After generating the tsconfig.json file we need, we can modify it according to our own needs:

{"compilerOptions": {"target": "ES2016", "module": "ESNext", "lib": ["ES6", "DOM"], "allowJs": true, "jsx": "react", "sourceMap": true, "outDir": "build/dist", "rootDir": "src", "importHelpers": true "strict": true, "noImplicitAny": true, "strictNullChecks": true, "noImplicitThis": true, "noUnusedLocals": true, "noImplicitReturns": true, "moduleResolution": "node", "baseUrl": ".," esModuleInterop ": true," skipLibCheck ": true," forceConsistentCasingInFileNames ": true," suppressImplicitAnyIndexErrors ": true," allowSyntheticDefaultImports ": true," resolveJsonModule ": true "isolatedModules": true, "noEmit": true}, exclude: ["node_modules", "build", "scripts", "acceptance-tests", "webpack", "jest", "src/setupTests.ts"], "include": ["src"]}

Using the tsx component in React

Tsx is the TypeScript version of jsx. In the directory, we change the end of the .js suffix to the end of .tsx.

Import React from 'react'; import ReactDOM from' react-dom'; import App from'. / App'; import * as serviceWorker from'. / serviceWorker'; ReactDOM.render (/ / strict mode, document.getElementById ('root') as HTMLElement); serviceWorker.unregister ()

Failed to compile pictures in tsx

After changing the file name, it was found that the image compilation failed.

When using Webpack, use static resources, such as pictures and fonts, that work like CSS. You can import files directly into the TypeScript module. This tells Webpack to include the file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path that you can reference in your code, for example, href as the src property of the image or as a link to PDF.

To reduce the number of requests to the server, importing an image with less than 10000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. The SVG file is excluded.

Before you begin, each type must be defined as a valid module format. Otherwise, the TypeScript compiler reports an error

To import these files in TypeScript, create a new type definition file in the project and name it assets.d.ts. Then, add a row for each type of asset that needs to be imported:

Declare module'* .svg 'declare module' * .png 'declare module' * .jpg 'declare module' * .jpeg 'declare module' * .gif 'declare module' * .bmp 'declare module' * .tiff'

After configuration, the project needs to be restarted by npm start to take effect.

At this point, I believe you have a deeper understanding of "how to configure TypeScript in React applications". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.