React+TypeScript進(jìn)行項(xiàng)目構(gòu)建案例講解
react項(xiàng)目構(gòu)建可以很簡(jiǎn)單,但是如果是結(jié)合typescript,其實(shí)也不是很麻煩,官網(wǎng)也有很明確的說明。有兩種辦法:
1、直接構(gòu)建帶有typescript的react項(xiàng)目,我們需要增加額外的參數(shù),模版不能使用默認(rèn)的cra-template。而是使用cra-template-typescript。
npx create-react-app tsreactdemo --template typescript
創(chuàng)建完成的成功提示與原來沒有太大的區(qū)別,直接進(jìn)入項(xiàng)目路徑下,然后yarn start或者npm start。
進(jìn)入項(xiàng)目,我們不著急啟動(dòng),首先看看文件長(zhǎng)得怎么樣,默認(rèn)會(huì)創(chuàng)建一個(gè)tsconfig.json,而且src目錄下的默認(rèn)的index.js,App.js文件變?yōu)榱藅s版本的index.tsx,App.tsx。
我們可以看看package.json中的依賴:
其實(shí),依賴就是多了@types/jest,@types/node,@types/react,@types/react-dom 。
最早,我們創(chuàng)建typescript的react項(xiàng)目命令好像直接就是npx create-react-app xxx --typescript,可是現(xiàn)在這樣不行了,后面的參數(shù)必須是--template typescript,而不是直接--typescript。這個(gè)需要說明一下,并不是我們搞錯(cuò)了,其實(shí)原來就是這樣使用的,現(xiàn)在更新?lián)Q代,方法發(fā)生變化了,從這里可以看出,web前端變化太快了,一兩年時(shí)間如果不學(xué)習(xí),可能會(huì)完全顛覆你的認(rèn)知。 這里不是說--typescript就不能創(chuàng)建,它創(chuàng)建不會(huì)報(bào)錯(cuò),但是默認(rèn)就是react的項(xiàng)目,不會(huì)包含typescript的內(nèi)容。
另外,通過這種方式創(chuàng)建項(xiàng)目,官方文檔也推薦我們不要全局安裝create-react-app這個(gè)工具了,在最新的版本中,可以直接通過npx create-react-app就可以創(chuàng)建最新的react項(xiàng)目了,而如果你全局安裝了create-react-app,而且版本還不是最新的,很有可能創(chuàng)建的就是老版本的react項(xiàng)目,如果安裝了,可以直接卸載npm uninstall -g create-react-app。
2、在react項(xiàng)目的基礎(chǔ)上,直接加入typescript相關(guān)的依賴即可。
npm install typescript @types/react --save
開始創(chuàng)建一個(gè)默認(rèn)的react項(xiàng)目:
命令上,我直接加上了--typescript,這就是我前面說過的,原來是通過這種方式創(chuàng)建,但是現(xiàn)在這種方式不行了,但是它也不會(huì)報(bào)錯(cuò),默認(rèn)創(chuàng)建的就是react項(xiàng)目,使用的模版是cra-template。
我們直接加上typescript的依賴:
其實(shí),就這么加,都不用增加tsconfig.json文件,就可以了,就好比我們直接增加了一個(gè)依賴,沒有對(duì)項(xiàng)目做大的修改。
當(dāng)我們修改了index.js,App.js文件為index.tsx,App.tsx之后,npm start 或 yarn start,默認(rèn)會(huì)創(chuàng)建一個(gè)文件tsconfig.json,這也是官方明確說明的,我們沒有必要手動(dòng)創(chuàng)建tsconfig.json。
我們也可以看看默認(rèn)生成的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" ] }
其實(shí),手動(dòng)創(chuàng)建也大概就是這個(gè)樣子,所以還不如直接讓它自己生成。
到此這篇關(guān)于React+TypeScript進(jìn)行項(xiàng)目構(gòu)建案例講解的文章就介紹到這了,更多相關(guān)React+TypeScript進(jìn)行項(xiàng)目構(gòu)建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript高級(jí)程序設(shè)計(jì) 學(xué)習(xí)筆記 js高級(jí)技巧
JavaScript高級(jí)程序設(shè)計(jì) 學(xué)習(xí)筆記 js高級(jí)技巧,學(xué)習(xí)js的朋友可以參考下。2011-09-09JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記4 js運(yùn)算符和操作符
如果說數(shù)據(jù)類型是編程語言的磚瓦,那么運(yùn)算符和操作符則是編程語言的石灰和水泥了,它是將各種數(shù)據(jù)類型的值有機(jī)組合的糅合劑,使得數(shù)據(jù)值不再只是一個(gè)孤立的值,而有了一種動(dòng)態(tài)的靈性2012-10-10JavaScript中用getDate()方法返回指定日期的教程
這篇文章主要介紹了JavaScript中用getDate()方法返回指定日期的教程,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06Javascript typeof與instanceof的區(qū)別
JavaScript 中 typeof 和 instanceof 常用來判斷一個(gè)變量是否為空,或者是什么類型的。但它們之間還是有區(qū)別的,需要的朋友可以參考下2016-10-10JS中構(gòu)造函數(shù)的基本特性與優(yōu)缺點(diǎn)
這篇文章介紹了JS中構(gòu)造函數(shù)的基本特性與優(yōu)缺點(diǎn),文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06