您好，歡迎閱讀我的關於使用 TypeScript 設定 MERN 堆疊專案的指南。本指南旨在幫助初學者和經驗豐富的開發人員為 MERN 堆疊開發建立功能齊全的開發環境。
npm install -g typescript
<span>mkdir my-app</span>
2.導覽至目錄：
<span>cd my-app</span>
3.執行以下命令來初始化目錄中的節點。
說明：此指令初始化一個新的 Node.js 專案並使用預設值建立一個 package.json 檔案。
npm init -y
對於用戶端，您可以使用 Vite 或 Create React App。以下是兩者的說明：
說明：此指令在名為 client.
的目錄中建立一個新的 Vite 應用程式npx create-vite@latest client
2.您將看到不同的選項，選擇React。
3。選擇選項：TypeScript SWC.
4。完成後，使用以下指令導航至 client 目錄.
<span>cd client</span>
5.進入客戶端目錄後，執行以下指令安裝所有相依性.
說明：此指令安裝 package.json 檔案中所列的依賴項。
npm install
6.安裝後，使用以下指令導覽至專案的根目錄：
<span>cd ..</span>
說明：此指令在名為 client 的目錄中建立一個新的 Create React App 應用程式。
npx create-react-app client --template typescript
說明：此指令建立一個名為 server 的新目錄。
<span>mkdir server</span>
2.使用以下指令導覽至 server 目錄：
<span>cd server</span>
3.執行此指令自動建立 package.json 檔案。
npm <span>init -y</span>
4.現在，執行以下指令來安裝我們的依賴項。
說明：這些指令為我們的伺服器安裝必要的依賴項。 cors 用於啟用 CORS，dotenv 用於載入環境變量，express 用於建置伺服器，mongoose 用於連接 MongoDB。開發依賴項包括 TypeScript 和我們的套件的類型定義，以及用於在開發期間運行我們的伺服器的 nodemon 和 ts-node。
npm install -g typescript
5.建立一個 .gitignore 檔案並在其中加入以下行：
說明：.gitignore 檔案指定 Git 應忽略的故意未追蹤的檔案。
<span>mkdir my-app</span>
6.現在，讓我們設定 TypeScript，建立一個名為 tsconfig.json
的文件說明：tsconfig.json 檔案是 TypeScript 的設定檔。它指定編譯專案的根檔案和編譯器選項。
7. 複製並貼上以下配置：
<span>cd my-app</span>
8.使用以下指令在伺服器目錄中建立名為 src 的目錄：
npm init -y
以下指令需要在我們建立的 src 目錄中運作。
9.建立一個名為 server.ts
的文件說明：此 server.ts 檔案設定一個連接到 MongoDB 資料庫並開始偵聽指定連接埠的 Express 伺服器。
10。這是 server.ts 檔案的基本實作：
npx create-vite@latest client
11。讓我們使用以下命令返回 server 目錄：
<span>cd client</span>
說明：此指令將目前目錄變更為父目錄。
12。現在，讓我們轉到 伺服器目錄 中的 package.json 檔案。
13。讓我們新增一個指令，以便我們可以使用 ts-node 來運行 nodemon 進行開發。
14。 複製並貼上此行到package.json的腳本部分：
npm install
15。完成後，讓我們使用以下命令前往根目錄：
<span>cd ..</span>
說明：並發是一個允許您同時（同時）執行多個npm腳本的套件。
npx create-react-app client --template typescript
2.導覽至根目錄的 package.json 檔案。該文件包含有關您的項目及其依賴項的元資料。
3.根據您用於建立用戶端的工具（Vite 或 Create React App），複製對應的程式碼區塊並將其貼上到 package.json 檔案的腳本部分。
npm install -g typescript
<span>mkdir my-app</span>
4.現在，讓我們使用以下命令運行我們的項目：
<span>cd my-app</span>
5.現在，我們的客戶端和伺服器應該同時運行。您應該在終端機中看到以下輸出：
npm init -y
以上是MERN TypeScript 設定指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
