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

成都創(chuàng)新互聯(lián)成立10年來，這條路我們正越走越好，積累了技術與客戶資源，形成了良好的口碑。為客戶提供成都網站建設、做網站、網站策劃、網頁設計、申請域名、網絡營銷、VI設計、網站改版、漏洞修補等服務。網站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等，這些對于網站建設都非常重要，成都創(chuàng)新互聯(lián)通過對建站技術性的掌握、對創(chuàng)意設計的研究為客戶提供一站式互聯(lián)網解決方案，攜手廣大客戶，共同發(fā)展進步。

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

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

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

閱讀本文將學到:

• 快速創(chuàng)建 React 應用

• tsconfig 的基本配置

• 使用 React 中的 tsx 組件

• tsx 中圖片編譯失敗

創(chuàng)建項目
這里默認我們擁有 node 環(huán)境,使用 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!

創(chuàng)建好程序之后，我們記錄一下此時的目錄:

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(     //嚴格模式        ,   document.getElementById('root') as HTMLElement );  serviceWorker.unregister();

tsx 中圖片編譯失敗
在修改完文件名字后發(fā)現(xiàn)圖片編譯失敗

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

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

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

要在 TypeScript 中導入這些文件，請在項目中創(chuàng)建一個新的類型定義文件，并將其命名為 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”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！