首頁 > web前端 > js教程 > 如何在 5 時間內使用 TypeScript 設定 Node.js API

如何在 5 時間內使用 TypeScript 設定 Node.js API

Linda Hamilton
發布: 2025-01-03 18:01:40
原創
415 人瀏覽過

How to Set Up a Node.js API with TypeScript in 5

如今,使用 Node.js 和 TypeScript 創建高效且可擴展的 API 比以往任何時候都更簡單、更強大。在 CodeInit,我們的目標是提供實用且簡單的教程,幫助您建立滿足市場需求的專業解決方案。在本文中,我將引導您使用 2025 年最佳實務逐步設定現代 API。

無論您是初學者還是希望提高工作流程的經驗豐富的開發人員,本指南都適合您。讓我們一起來深入了解吧!

為什麼要使用 Node.js 和 TypeScript?

Node.js 仍然是最受歡迎的後端技術之一,與 TypeScript 結合使用時,您可以兩全其美:速度和安全性。 TypeScript 新增了靜態類型,使您的程式碼更易於維護並減少常見錯誤。

2025 年,掌握提高生產力並符合市場趨勢的工具至關重要。

開始之前您需要什麼

開始之前,請確保您的環境設定正確。以下是先決條件:

  • Node.js 20 或更高版本
  • 文字編輯器 – 我推薦 Visual Studio Code
  • JavaScript 和終端機的基礎知識
  • 系統上安裝了 npm、yarn 或 pnpm

提示:使用 VS Code 中的整合終端可以更輕鬆地遵循本教學。

就我個人而言,我喜歡使用 pnpm。若要全域安裝 pnpm,請使用下列指令:

npm i -g pnpm
登入後複製
登入後複製

第 1 步:設定環境

首先,請確保安裝了 Node.js:

node -v
登入後複製
登入後複製

如果一切設定正確,您應該會看到 Node.js 版本。否則,請從官方網站下載最新版本。

現在,讓我們建立專案結構:

mkdir my-api && cd my-api
pnpm init -y
登入後複製
登入後複製

此指令建立 package.json 文件,用於管理專案依賴項。

步驟 2:安裝 TypeScript

TypeScript 對於維護和組織大型專案至關重要。讓我們來安裝它:

pnpm install typescript tsx @types/node -D
登入後複製
登入後複製

接下來,透過建立 tsconfig.json 檔案來設定 TypeScript:

npx tsc --init
登入後複製
登入後複製

編輯文件以反映 2025 年的最佳實踐:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}
登入後複製
登入後複製

建立 src 目錄來組織您的程式碼:

mkdir src
登入後複製
登入後複製

第 3 步:新增 ESLint

維護乾淨的程式碼至關重要。讓我們添加 ESLint 以確保品質和標準化。

使用以下指令設定 ESLint:

pnpm create @eslint/config@latest
登入後複製
登入後複製

建議的 ESLint 設定

  • 您想如何使用 ESLint? (檢查語法並發現問題)
  • 您的專案使用哪種類型的模組? (JavaScript 模組(導入/匯出))
  • 您的專案使用哪個框架? (無)
  • 您的專案使用 TypeScript 嗎? (是的)
  • 你的程式碼在哪裡運作? (節點)
  • 您想現在就安裝它們嗎? (是的)

安裝後,將在專案根目錄中建立 eslint.config.js 檔案。

這是一個範例設定:

npm i -g pnpm
登入後複製
登入後複製

新增 ESLint 指令

將以下腳本加入package.json:

node -v
登入後複製
登入後複製

第一個命令運行 ESLint 並在控制台中顯示錯誤,而第二個命令嘗試自動修復錯誤。

運行:

mkdir my-api && cd my-api
pnpm init -y
登入後複製
登入後複製


pnpm install typescript tsx @types/node -D
登入後複製
登入後複製

第 4 步:建立 API

建立健康檢查路由

現在是時候開始使用您的 API 了。讓我們使用 Express,一個 Node.js 的極簡框架。

安裝 Express 及其類型:

npx tsc --init
登入後複製
登入後複製

建立 src/index.ts 檔案並加入以下程式碼:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}
登入後複製
登入後複製

將以下腳本加入package.json:

mkdir src
登入後複製
登入後複製

運行:

pnpm create @eslint/config@latest
登入後複製
登入後複製

造訪:http://localhost:3000/health 檢查 API 運作狀況。

新增神奇寶貝路線

讓我們透過傳回 Pokémon 清單的路由來擴充 API。

使用以下程式碼更新 src/index.ts:

import pluginJs from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.{js,mjs,cjs,ts}'] },
  { languageOptions: { globals: globals.node } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      semi: 'off',
      quotes: ['error', 'single']
    }
  }
];
登入後複製

測試路由:http://localhost:3000/pokemons。

結論

在本指南中,您學習如何使用 Node.js 和 TypeScript 設定現代 API,從簡單的路線開始並將其擴展為包含類型化資料。這只是開始!有了這個基礎,您就可以實現身份驗證、資料庫連接等等。

如果您發現本文有幫助,請與其他開發人員分享並訂閱我們的電子報以獲取更多提示。讓我們一起征服開發世界! ?

以上是如何在 5 時間內使用 TypeScript 設定 Node.js API的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板