网络小说排行榜,有声小说下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

React應用程序配置TypeScript

前言
最近在學習TypeScript的一些知識用到了 react,記錄一下 react 創(chuàng)建應用項目和支持 TypeScript。

涪陵ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

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

在網(wǎng)絡條件不錯的情況下,速度還是可觀的吧

 
 
 
   
  
  
  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文件之后,我們根據(jù)自己的需求去修改即可:

 
 
 
   
  
  
  {   
  
  
    "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ù)據(jù) URI 而不是路徑。這適用于以下文件擴展名: bmp、 gif、 jpg、 jpeg 和 png。SVG 文件被排除。

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

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

 
 
 
   
  
  
  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
轉(zhuǎn)載來源：http://m.fisionsoft.com.cn/article/coedccs.html

新聞中心

其他資訊