「純 TypeScript 專案」與「Node.js + TypeScript 專案」的區別

| TypeScript | 4 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1169

🚀 「純 TypeScript 專案」與「Node.js + TypeScript 專案」的區別如下：

項目 純 TypeScript 專案 Node.js + TypeScript 專案
執行環境 瀏覽器或通用（例如 Deno、編譯成 JS 用於前端） Node.js（專為後端開發）
模組系統 (module) 常用 ESNext、ESModule（適合前端） 常用 CommonJS（Node.js 默認）
類庫型別定義 不一定需要安裝 @types/... 幾乎必須安裝 @types/node 等第三方型別包
tsconfig 配置 可以簡化；常見輸出到 /lib/ 或 /build/ 明確指定 "outDir": "dist", "rootDir": "src" 等詳細結構
啟動方式 通常只編譯後放進 HTML 或 Webpack 构建 使用 ts-node, ts-node-dev, 或直接跑 JS
依賴安裝習慣 主要是工具型依賴（tsc, eslint 等） 同時會裝一堆 Node 模組（express, dotenv 等）
入口檔命名 main.ts 或 index.ts 標準為 src/index.ts，並指定在 package.json 中
執行目的 前端工具、函式庫、腳本 建 REST API、CLI 工具、Bot 等後端程式
輸出 JS 的用法 多用於給 Web 前端用（用 Webpack 打包） 直接執行（node dist/index.js）或部署

📁 具體範例結構差異

純 TypeScript 函式庫（如 npm 套件）

my-lib/
├── src/
│   └── index.ts
├── lib/                ← 編譯後輸出
├── tsconfig.json       ← module: ESNext
├── package.json        ← "type": "module"

Node.js 專案（如 Express App）

my-app/
├── src/
│   ├── index.ts
│   └── routes/
├── dist/               ← 編譯後輸出
├── tsconfig.json       ← module: CommonJS
├── package.json        ← main: dist/index.js

✅ 結論

你要做的事 推薦方向
建立 CLI、API、Web 伺服器 Node.js + TypeScript 結構
做 npm 發佈套件 / 工具庫 純 TypeScript 結構
開發瀏覽器端應用程式 用 Vite/Webpack 搭配 TypeScript

→TypeScript 專案的基本文件結構

→Node.js 專案中的 TypeScript 結構

→🧨 差別總覽：Node.js vs TypeScript 在命令行的運行方式

→返回目錄

This article was last edited at