使用TypeScript開發React應用(一)
本次分享如何使用ofollow,noindex" target="_blank">React 連線TypeScript開發應用。 到最後，我們會得到一個如下的知識掌握
我們將使用create-react-app工具快速初始化一個React專案。
我們假設您已經在使用npm的Node.js。 您可能還想了解React的基礎知識。這裡就暫不做介紹了，前面的文章有對應的介紹，可以翻一番我前面的分享
安裝create-react-app
我們將使用create-react-app，因為它為React專案設定了一些有用的工具和規範預設值。 這只是一個命令列實用程式來構建新的React專案。
npm install -g create-react-app
初始化建立專案
我們將建立一個名為ts-react-app的新專案：
create-react-app ts-react-app --scripts-version=react-scripts-ts
react-scripts-ts是一組調整，用於採用標準的create-react-app專案管道並將TypeScript引入混合。
此時，您的專案佈局應如下所示：
注意點
-
tsconfig.json包含我們專案的特定於TypeScript的選項。
- 我們還有一個tsconfig.prod.json和一個tsconfig.test.json，以防我們想要對我們的生產版本或我們的測試版本進行任何調整。
-
tslint.json儲存我們的linter，TSLint將使用的設定。
-
package.json包含我們的依賴項，以及我們想要執行的命令的一些快捷方式，用於測試，預覽和部署我們的應用程式。
-
public包含靜態資產，例如我們計劃部署到的HTML頁面或影象。 除index.html之外，您可以刪除此資料夾中的任何檔案。
-
src包含我們的TypeScript和CSS程式碼。 index.tsx是我們檔案的入口點，是必需的。
-
images.d.ts將告訴TypeScript可以匯入某些型別的影象檔案，create-react-app支援這些檔案。
設定原始碼管理
我們的測試工具Jest期望存在某種形式的原始碼控制（例如Git或Mercurial）。 為了正確執行，我們需要初始化一個git儲存庫。
cd ts-react-app git init git add . git commit -m "Initial commit."
重寫預設值
react-scripts-ts設定的TSLint配置有點過於熱心。 讓我們解決這個問題。
{
-"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+"extends": [],
+"defaultSeverity": "warning",
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts"
]
}
}
配置TSLint 超出了此篇文章要分享的範圍，但您可以隨意嘗試適合您的操作。
執行專案
執行專案就像執行一樣簡單
npm run start
這將執行我們的package.json中指定的啟動指令碼，並將在我們儲存檔案時生成重新載入頁面的伺服器。 通常，伺服器在http://localhost:3000執行，但應自動為您開啟。 這允許我們快速預覽更改，從而收緊迭代迴圈。
測試專案
測試也只是一個命令：
npm run test
此命令針對副檔名以.test.ts或.spec.ts結尾的所有檔案執行Jest，這是一個非常有用的測試實用程式。 與npm run start命令一樣，Jest會在檢測到更改後立即自動執行。 如果您願意，可以並排執行npm run start和npm run test，以便您可以預覽更改並同時測試它們。
建立生產構建
使用npm run start執行專案時，我們最終沒有使用優化的構建。 通常，我們希望我們傳送給使用者的程式碼儘可能快速和小巧、縮小等某些優化可以實現這一目標，但通常需要更多時間。 我們稱之為"production"構建的構建（與開發構建相對）。
要執行生產構建，只需執行即可
npm run build
這將分別在./build/static/js和./build/static/css中建立優化的JS和CSS構建。
您不需要在大多數時間執行生產構建，但如果您需要測量應用程式的最終大小等內容，則非常有用。
未完待續...