如何使用Express設定TypeScript

TypeScript 是一種強型別程式語言，它擴充套件了 JavaScript 的功能。它提供了一系列功能，可幫助您使用 Node.js 和 Express 開發可擴充套件的應用程式。

與 JavaScript 相比，TypeScript 的關鍵優勢之一是它提供了型別類，使編寫更可預測、更可維護的程式碼變得更加容易。此外，TypeScript 還提供了型別安全性，確保您的程式碼不會出現執行時錯誤，並能在開發早期更容易地發現缺陷。該語言還配備了重構工具和自動完成功能，從而改善了開發人員的體驗。

此外，Node.js 和 Express 可為任何規模的應用程式提供出色的效能。在 TypeScript 中使用類還有助於組織和結構，進一步提高可擴充套件性。有了這些工具，您就可以構建穩健且可擴充套件的應用程式，以應對不斷增長的需求。

本文演示瞭如何使用 TypeScript 通過單個端點設定 Express 應用程式。然後，它將介紹如何將應用程式部署到應用程式託管伺服器。

如何建立 Express 伺服器

要學習本教學，請確保您的計算機上安裝了 Node.js 和 npm。設定 Express 伺服器：

使用下面的程式碼建立一個目錄：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
mkdir sample_app && cd sample_app
mkdir sample_app && cd sample_app
```
mkdir sample_app && cd sample_app
```
執行此命令在目錄中初始化 Node.js 應用程式：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm init -y
npm init -y
```
npm init -y
```
命令中的 -y 標誌接受建立 package.json 檔案時的預設提示，該檔案由以下程式碼填充：

Explain

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"name": "sample_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
{ "name": "sample_app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
```
{ 
"name": "sample_app",
"version": "1.0.0",
"description": "", 
"main": "index.js", 
"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1" 
}, 
"keywords": [], 
"author": "", 
"license": "ISC" 
}
```
接下來，在剛剛建立的目錄中安裝用於新增基本功能的 express 和用於環境變數管理的 dotenv，執行此命令：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm i express dotenv
npm i express dotenv
```
npm i express dotenv
```
在 sample_app 目錄根目錄下建立 .env 檔案，並在其中填入以下變數。
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
PORT=3000
PORT=3000
```
PORT=3000
```
建立一個 express 應用程式，當使用者訪問 http://localhost:3000 時，該程式會響應 Hello World 文字。
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const express = require("express");
const dotenv = require("dotenv");
// configures dotenv to work in your application
dotenv.config();
const app = express();
const PORT = process.env.PORT;
app.get("/", (request, response) => {
response.status(200).send("Hello World");
});
app.listen(PORT, () => {
console.log("Server running at PORT: ", PORT);
}).on("error", (error) => {
// gracefully handle error
throw new Error(error.message);
})
const express = require("express"); const dotenv = require("dotenv"); // configures dotenv to work in your application dotenv.config(); const app = express(); const PORT = process.env.PORT; app.get("/", (request, response) => { response.status(200).send("Hello World"); }); app.listen(PORT, () => { console.log("Server running at PORT: ", PORT); }).on("error", (error) => { // gracefully handle error throw new Error(error.message); })
```
const express = require("express");
const dotenv = require("dotenv");
// configures dotenv to work in your application
dotenv.config();
const app = express();
const PORT = process.env.PORT;
app.get("/", (request, response) => { 
response.status(200).send("Hello World");
}); 
app.listen(PORT, () => { 
console.log("Server running at PORT: ", PORT); 
}).on("error", (error) => {
// gracefully handle error
throw new Error(error.message);
})
```
dotenv.config() 使用 .env 檔案中定義的變數填充 Node 應用程式的程序環境（ process.env ）。
執行此命令啟動 Node.js 應用程式：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
node index.js
node index.js
```
node index.js
```
在瀏覽器上訪問 http://localhost:3000，檢查應用程式是否正常執行。您應該會得到與此類似的響應。

在 Express 應用程式中啟用 TypeScript

按照以下步驟在 Express 應用程式中使用 TypeScript：

執行此命令安裝 TypeScript：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm i -D typescript
npm i -D typescript
```
npm i -D typescript
```
通過 -D 選項，npm 可以將軟體包安裝為開發依賴包。你可以在開發階段使用該選項安裝的軟體包。
DefinitelyTyped GitHub 倉庫是 TypeScript 社羣的優勢之一。它儲存了各種 npm 軟體包的型別定義文件。DefinitelyTyped 是 TypeScript 開發人員不可或缺的工具。DefinitelyTyped 是 TypeScript 開發人員不可或缺的工具，它能讓開發人員編寫更簡潔、更高效的程式碼，並降低出錯的可能性。您可以通過執行此命令安裝 express 和 dotenv 的型別定義：
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install -D @types/express @types/dotenv
npm install -D @types/express @types/dotenv
```
npm install -D @types/express @types/dotenv
```
要初始化 TypeScript，請執行此命令。
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npx tsc --init
npx tsc --init
```
npx tsc --init
```
生成的 tsconfig.json 檔案指出了你的 TypeScript 應用程式的根目錄。它提供了定義 TypeScript 編譯器工作方式的 config 選項。它包括一系列禁用或啟用的配置選項，並附有註釋解釋每個選項。
在 config物件中新增 outDir 屬性，以定義輸出目錄。
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"compilerOptions": {
// …
"outDir": "./dist"
// …
}
}
{ "compilerOptions": { // … "outDir": "./dist" // … } }
```
{
"compilerOptions": {
// …
"outDir": "./dist"
// …
}
}
```

如何建立 TypeScript 伺服器

要建立 TypeScript 伺服器，請將 .js 副檔名更改為 .ts 並使用這些型別定義更新程式碼：

import express, { Request, Response } from "express";

import dotenv from "dotenv";

// configures dotenv to work in your application

dotenv.config();

const app = express();

const PORT = process.env.PORT;

app.get("/", (request: Request, response: Response) => {

response.status(200).send("Hello World");

});

app.listen(PORT, () => {

console.log("Server running at PORT: ", PORT);

}).on("error", (error) => {

// gracefully handle error

throw new Error(error.message);

});

import express, { Request, Response } from "express"; import dotenv from "dotenv"; // configures dotenv to work in your application dotenv.config(); const app = express(); const PORT = process.env.PORT; app.get("/", (request: Request, response: Response) => { response.status(200).send("Hello World"); }); app.listen(PORT, () => { console.log("Server running at PORT: ", PORT); }).on("error", (error) => { // gracefully handle error throw new Error(error.message); });

import express, { Request, Response } from "express";
import dotenv from "dotenv";
// configures dotenv to work in your application
dotenv.config();
const app = express();
const PORT = process.env.PORT;
app.get("/", (request: Request, response: Response) => { 
response.status(200).send("Hello World");
}); 
app.listen(PORT, () => { 
console.log("Server running at PORT: ", PORT); 
}).on("error", (error) => {
// gracefully handle error
throw new Error(error.message);
});

要使用編譯器軟體包並將 TypeScript 檔案編譯成 JavaScript，請在應用程式的根目錄下執行以下命令。

npx tsc

npx tsc

然後執行命令啟動應用程式。

node dist/index.js

node dist/index.js

在瀏覽器上訪問 http://localhost:3000 時，會得到 “Hello World” 的響應。

如何將 TypeScript 伺服器部署到線上

現在，您已經準備好將應用程式部署到 Web 上了。您可以將應用程式部署到許多平臺。

在將應用程式推送到 Git 倉庫之前，使用 TypeScript 並將編譯好的 JavaScript 檔案提交到 Git 並不可取。在 package.json 檔案中包含一個 start 指令碼。

{

// …

"script": {

"start": "npx tsc && node dist/index.js",

}

// …

}

{ // … "script": { "start": "npx tsc && node dist/index.js", } // … }

{
// …
"script": {
"start": "npx tsc && node dist/index.js",
}
// …	
}

此外，在應用程式的根目錄中建立 .gitignore 檔案，幷包含 node_modules 和 .env 以防止將這些檔案推送到 Git 提供者。

設定好倉庫後，請按照以下步驟將應用程式部署到線上（以 Kinsta 為例）：

儲存庫設定完成後，請按照以下步驟將應用程式部署到 Kinsta：

登入或建立賬戶，檢視 MyKinsta 面板。
使用 Git 提供商授權 Kinsta。
單擊左側邊欄上的 “Applications“，然後單擊 “Add application“。
選擇要部署的版本庫和分支。
為應用程式指定一個唯一的名稱，並選擇 Data center location。
使用所有預設配置。MyKinsta 使用 npm start 作為部署應用程式的入口點。如果您想使用其他命令，可以在 MyKinsta 中調整執行時程序。
單擊 Create application。

部署完成後，MyKinsta 會提供一個 URL 以公開訪問您的應用程式部署。您可以訪問該頁面，確認是否顯示 “Hello World”。

小結

本指南演示瞭如何使用 TypeScript 開發和設定 Express 應用程式，並使用線上伺服器部署應用程式。TypeScript 擁有 JavaScript 所沒有的額外功能（包括型別類、型別安全、重構工具和自動完成），可幫助您構建可擴充套件的應用程式並在開發過程中捕捉錯誤。

您過去使用過 TypeScript 嗎？您對在 Express 伺服器上使用它有什麼看法？

Express應用 TypeScript開發

如何使用Express設定TypeScript

如何建立 Express 伺服器

在 Express 應用程式中啟用 TypeScript

如何建立 TypeScript 伺服器

如何將 TypeScript 伺服器部署到線上

小結

評論留言

取消回覆

文章目录

如何使用Express設定TypeScript

如何建立 Express 伺服器

在 Express 應用程式中啟用 TypeScript

如何建立 TypeScript 伺服器

如何將 TypeScript 伺服器部署到線上

小結

相關文章

評論留言

取消回覆

文章目录