react專案構建可以很簡單，但是如果是結合typescript，其實也不是很麻煩，官網也有很明確的說明。有兩種辦www.cppcns.com法：

    1、直接構建帶有typescript的react專案，我們需要增加額外的引數，模版不能使用預設的cra-template。而是使用cra-template-typescript。

npx create-react-app tsreactdemo --template typescript

    建立完成的成功提示與原來沒有太大的區別，直接進入專案路徑下，然後yarn start或者npm start。

    進入專案，我們不著急啟動，首先看看檔案長得怎麼樣，預設會建立一個tsconfig.on，而且src目錄下的預設的index.js,App.js檔案變為了ts版本的index.tsx,App.tsx。

  http://www.cppcns.com  我們可以看看package.json中的依賴：

    其實，依賴就是多了@types/jest,@types/node,@types/react,@types/react-dom 。

    最早，我們建立typescript的react專案命令好像直接就是npx create-react-app xxx --typescript，可是現在這樣不行了，後面的引數必須是--template typescript，而不是直接--typescript。這個需要說明一下，並不是我們搞錯了，其實原來就是這樣使用的，現在更新換代，方法發生變化了，從這裡可以看出，web前端變化太快了，一兩年時間如果不學習，可能會完全顛覆你的認知。 這裡不是說--typescript就不能建立，它建立不會報錯，但是預設就是react的專案，不會包含typescript的內容。

    另外，通過這種方式建立專案，官方文件也推薦我們不要全域性安裝create-react-app這個工具了，在最新的版本中，可以直接通過npx create-react-app就可以建立最新的react專案了，而如果你全域性安裝了create-react-app，而且版本還不是最新的，很有可能建立的就是老版本的react專案，如果安裝了，可以直接解除安裝npm uninstall -g create-reacwww.cppcns.comt-app。

    2、在react專案的基礎上，直接加入typescript相關的依賴即可。

npm install typescript @types/react --save

    開始建立一個預設的react專案：

    命令上，我直接加上了--typescript，這就是我前面說過的，原來是通過這種方式建立，但是現在這種方式不行了，但是它也不會報錯，www.cppcns.com預設建立的就是react專案，使用的模版是cra-template。

    我們直接加上typescript的依賴：

    其實，就這麼加，都不用增加tsconfig.json檔案，就可以了，就好比我們直接增加了一個依賴，沒有對專案做大的修改。

    當我們修改了index.js,App.js檔案為index.tsx,App.tsx之後，npm start 或 yarn start，預設會建立一個檔案tsconfig.json，這也是官方明確說明的，我們沒有必要手動建立tsconfig.json。 

    我們也可以看看預設生成的tsconfig.json檔案的內容：

{
  "compilerOptions": {
    "target": "es5","lib": [
      "dom","dom.iterable","esnext"
    ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx"
  },"include": [
    "src"
  ]
}

    其實，手動建立也大概就是這個樣子，所以還不如直接讓它自己生成。 

到此這篇關於React+TypeScript進行專案構建案例講解的文章就介紹到這了,更多相關React+TypeScript進行專案構建內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！