一、使用create-react-app創建一個支持TypeScript+React的開發環境：
要創建一個支持TypeScript的Create React App項目，可以運行：
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
要將TypeScript添加到已有的Create React App項目，請先安裝它：
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest接下來，將文件重命名為TypeScript文件（例如src/索引.js至src/索引.tsx)，重新啟動開發服務器！
二、使用create-react-app搭建TypeScript+React+Ant Design開發環境：
安裝和初始化
請確保電腦上已經安裝了最新版的 yarn 或者 npm。
使用 yarn 創建 cra-template-typescript 項目。
$ yarn create react-app antd-demo-ts --template typescript如果你使用的是 npm（接下來我們都會用 yarn 作為例子，如果你習慣用 npm 也沒問題）。
$ npx create-react-app antd-demo-ts --typescript然后我們進入項目並啟動。
$ cd antd-demo-ts
$ yarn start此時瀏覽器會訪問 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。
引入 antd
$ yarn add antd修改 src/App.tsx，引入 antd 的按鈕組件。
import React, { FC } from 'react'; import { Button } from 'antd'; import './App.css'; const App: FC = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;修改 src/App.css，在文件頂部引入 antd 的樣式。
@import '~antd/dist/antd.css';重新啟動 yarn start，現在你應該能看到頁面上已經有了 antd 的藍色按鈕組件，接下來就可以繼續選用其他組件開發應用了。其他開發流程你可以參考 create-react-app 的官方文檔。
antd 使用 TypeScript 書寫並提供了完整的定義，你可以享受組件屬性輸入建議和定義檢查的功能。
注意不要安裝 @types/antd。
高級配置
這個例子在實際開發中還有一些優化的空間，比如無法進行主題配置。
此時我們需要對 create-react-app 的默認配置進行自定義，這里我們使用 craco （一個對 create-react-app 進行自定義配置的社區解決方案）。
現在我們安裝 craco 並修改 package.json 里的 scripts 屬性。
$ yarn add @craco/craco/* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }然后在項目根目錄創建一個 craco.config.js 用於修改默認配置。
/* craco.config.js */ module.exports = { // ... };自定義主題
按照 配置主題 的要求，自定義主題需要用到類似 less-loader 提供的 less 變量覆蓋功能。我們可以引入 craco-less 來幫助加載 less 樣式和修改變量。
首先把 src/App.css 文件修改為 src/App.less，然后修改樣式引用為 less 文件。
/* src/App.ts */ - import './App.css'; + import './App.less';/* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';然后安裝 craco-less 並修改 craco.config.js 文件如下。
$ yarn add craco-lessconst CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };這里利用了 less-loader 的 modifyVars 來進行主題配置，變量和其他配置方式可以參考 配置主題 文檔。修改后重啟 yarn start，如果看到一個綠色的按鈕就說明配置成功了。
antd 內建了深色主題和緊湊主題，你可以參照 使用暗色主題和緊湊主題 進行接入。
同樣，你可以使用 react-app-rewired 和 customize-cra 來自定義 create-react-app 的 webpack 配置。
三、項目地址：
https://github.com/samveduan/typescript-react-app