欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React+TypeScript進行項目構(gòu)建案例講解

 更新時間:2021年07月23日 11:03:56   作者:luffy5459  
這篇文章主要介紹了React+TypeScript進行項目構(gòu)建案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

    react項目構(gòu)建可以很簡單,但是如果是結(jié)合typescript,其實也不是很麻煩,官網(wǎng)也有很明確的說明。有兩種辦法:

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

npx create-react-app tsreactdemo --template typescript

     

    創(chuàng)建完成的成功提示與原來沒有太大的區(qū)別,直接進入項目路徑下,然后yarn start或者npm start。

  

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

    我們可以看看package.json中的依賴:

    

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

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

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

    2、在react項目的基礎(chǔ)上,直接加入typescript相關(guān)的依賴即可。

npm install typescript @types/react --save

    開始創(chuàng)建一個默認的react項目:

     

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

    

    我們直接加上typescript的依賴:

    

    其實,就這么加,都不用增加tsconfig.json文件,就可以了,就好比我們直接增加了一個依賴,沒有對項目做大的修改。

    當我們修改了index.js,App.js文件為index.tsx,App.tsx之后,npm start 或 yarn start,默認會創(chuàng)建一個文件tsconfig.json,這也是官方明確說明的,我們沒有必要手動創(chuàng)建tsconfig.json。 

    

    我們也可以看看默認生成的tsconfig.json文件的內(nèi)容:

{
  "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"
  ]
}

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

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

相關(guān)文章

最新評論