第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。

npxcreate-react-apptsreactdemo--templatetypescript

創(chuàng)建完成的成功提示與原來沒有太大的區(qū)別，直接進(jìn)入項(xiàng)目路徑下，然后yarnstart或者npmstart。

進(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)目命令好像直接就是npxcreate-react-appxxx--typescript，可是現(xiàn)在這樣不行了，后面的參數(shù)必須是--templatetypescript，而不是直接--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è)工具了，在最新的版本中，可以直接通過npxcreate-react-app就可以創(chuàng)建最新的react項(xiàng)目了，而如果你全局安裝了create-react-app，而且版本還不是最新的，很有可能創(chuàng)建的就是老版本的react項(xiàng)目，如果安裝了，可以直接卸載npmuninstall-gcreate-react-app。

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

npminstalltypescript@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之后，npmstart或yarnstart，默認(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,