react項目構建可以很簡單，但是如果是結合typescript，其實也不是很麻煩，官網也有很明確的說明。有兩種辦法：
1、直接構建帶有typescript的react項目，我們需要增加額外的參數，模版不能使用默認的cra-template。而是使用cra-template-typescript。
npx create-react-app tsreactdemo --template typescript 
創建完成的成功提示與原來沒有太大的區別，直接進入項目路徑下，然後yarn start或者npm start。
進入項目，我們不着急啓動，首先看看文件長得怎麼樣，默認會創建一個tsconfig.json，而且src目錄下的默認的index.js,App.js文件變爲了ts版本的index.tsx,App.tsx。
我們可以看看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-react-app。
2、在react項目的基礎上，直接加入typescript相關的依賴即可。
npm install typescript @types/react --save開始創建一個默認的react項目：
命令上，我直接加上了--typescript，這就是我前面說過的，原來是通過這種方式創建，但是現在這種方式不行了，但是它也不會報錯，默認創建的就是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"
]
}
其實，手動創建也大概就是這個樣子，所以還不如直接讓它自己生成。