React應用程序怎么配置TypeScript

本篇內容主要講解“React應用程序怎么配置TypeScript”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React應用程序怎么配置TypeScript”吧!

React 是一個用于構建用戶界面 UI 的 JavaScript 庫,它的創建默認是不支持 TypeScript 的,本文使用的是 React16.13.1

在使用 react 的庫的時候我們需要安裝下面的幾個組件:

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

閱讀本文將學到:

• 快速創建 React 應用

• tsconfig 的基本配置

• 使用 React 中的 tsx 組件

• tsx 中圖片編譯失敗

創建項目
這里默認我們擁有 node 環境,使用 npx 快速安裝 React 的應用程序

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

在網絡條件不錯的情況下,速度還是可觀的吧

npx: 97 安裝成功，用時 22.955 秒  We suggest that you begin by typing:    cd react-demo   yarn start  Happy hacking!

創建好程序之后，我們記錄一下此時的目錄:

tsconfig 的基本配置
首先需要安裝TypeScript:

npm i typescript -D tsc --init

生成我們需要的tsconfig.json文件之后,我們根據自己的需求去修改即可:

{   "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"   ] }

使用 React 中的 tsx 組件
tsx 是相當于 jsx 的 TypeScript 版本,在目錄中我們將.js 后綴結尾的改成.tsx 結尾

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker';  ReactDOM.render(   <React.StrictMode>  //嚴格模式     <App />   </React.StrictMode>,   document.getElementById('root') as HTMLElement );  serviceWorker.unregister();

tsx 中圖片編譯失敗
在修改完文件名字后發現圖片編譯失敗

在使用 Webpack，使用靜態資源，如圖片和字體，工作方式類似于 CSS。可以直接在 TypeScript 模塊中導入文件。這告訴 Webpack 將該文件包含在 bundle 中。與 CSS 導入不同，導入一個文件會給你一個字符串值。這個值是您可以在代碼中引用的最終路徑，例如，作為圖像的 src 屬性或指向 PDF 的鏈接的 href。

為了減少對服務器的請求數量，導入少于 10,000 字節的映像將返回一個數據 URI 而不是路徑。這適用于以下文件擴展名: bmp、 gif、 jpg、 jpeg 和 png。SVG 文件被排除。

在開始之前，必須將每種類型定義為有效的模塊格式。否則，TypeScript 編譯報錯

要在 TypeScript 中導入這些文件，請在項目中創建一個新的類型定義文件，并將其命名為 assets.d.ts。然后，為需要導入的每種類型的資產添加一行:

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

配置之后需要npm start重新啟動項目才能生效。

到此，相信大家對“React應用程序怎么配置TypeScript”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！