React+TypeScript進(jìn)行項目構建案例講解

    react項目構建可以很簡(jiǎn)單，但是如果是結合typescript，其實(shí)也不是很麻煩，官網(wǎng)也有很明確的說(shuō)明。有兩種辦法：

    1、直接構建帶有typescript的react項目，我們需要增加額外的參數，模版不能使用默認的cra-template。而是使用cra-template-typescript。

npx create-react-app tsreactdemo --template typescript

    創(chuàng )建完成的成功提示與原來(lái)沒(méi)有太大的區別，直接進(jìn)入項目路徑下，然后yarn start或者npm start。

    進(jìn)入項目，我們不著(zhù)急啟動(dòng)，首先看看文件長(cháng)得怎么樣，默認會(huì )創(chuàng )建一個(gè)tsconfig.json，而且src目錄下的默認的index.js,App.js文件變?yōu)榱藅s版本的index.tsx,App.tsx。

    我們可以看看package.json中的依賴(lài)：

    其實(shí)，依賴(lài)就是多了@types/jest,@types/node,@types/react,@types/react-dom 。

    最早，我們創(chuàng )建typescript的react項目命令好像直接就是npx create-react-app xxx --typescript，可是現在這樣不行了，后面的參數必須是--template typescript，而不是直接--typescript。這個(gè)需要說(shuō)明一下，并不是我們搞錯了，其實(shí)原來(lái)就是這樣使用的，現在更新?lián)Q代，方法發(fā)生變化了，從這里可以看出，web前端變化太快了，一兩年時(shí)間如果不學(xué)習，可能會(huì )完全顛覆你的認知。 這里不是說(shuō)--typescript就不能創(chuàng )建，它創(chuàng )建不會(huì )報錯，但是默認就是react的項目，不會(huì )包含typescript的內容。

    另外，通過(guò)這種方式創(chuàng )建項目，官方文檔也推薦我們不要全局安裝create-react-app這個(gè)工具了，在最新的版本中，可以直接通過(guò)npx create-react-app就可以創(chuàng )建最新的react項目了，而如果你全局安裝了create-react-app，而且版本還不是最新的，很有可能創(chuàng )建的就是老版本的react項目，如果安裝了，可以直接卸載npm uninstall -g create-react-app。

    2、在react項目的基礎上，直接加入typescript相關(guān)的依賴(lài)即可。

npm install typescript @types/react --save

    開(kāi)始創(chuàng )建一個(gè)默認的react項目：

    命令上，我直接加上了--typescript，這就是我前面說(shuō)過(guò)的，原來(lái)是通過(guò)這種方式創(chuàng )建，但是現在這種方式不行了，但是它也不會(huì )報錯，默認創(chuàng )建的就是react項目，使用的模版是cra-template。

    我們直接加上typescript的依賴(lài)：

    其實(shí)，就這么加，都不用增加tsconfig.json文件，就可以了，就好比我們直接增加了一個(gè)依賴(lài)，沒(méi)有對項目做大的修改。

    當我們修改了index.js,App.js文件為index.tsx,App.tsx之后，npm start 或 yarn start，默認會(huì )創(chuàng )建一個(gè)文件tsconfig.json，這也是官方明確說(shuō)明的，我們沒(méi)有必要手動(dòng)創(chuàng )建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"
  ]
}

    其實(shí)，手動(dòng)創(chuàng )建也大概就是這個(gè)樣子，所以還不如直接讓它自己生成。 

到此這篇關(guān)于React+TypeScript進(jìn)行項目構建案例講解的文章就介紹到這了,更多相關(guān)React+TypeScript進(jìn)行項目構建內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！