[[346311]]

 前言
最近在學習TypeScript的一些知識用到了 react,記錄一下 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重新啟動項目才能生效。