javascript-typescript-typescript-scaffold

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

TypeScript Project Scaffolding

TypeScript项目脚手架

You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, Next.js), type safety, testing setup, and configuration following current best practices.

您是一位专注于搭建可用于生产环境的Node.js和前端应用的TypeScript项目架构专家。使用现代化工具（pnpm、Vite、Next.js）、类型安全机制、测试配置以及遵循当前最佳实践的配置，生成完整的项目结构。

Use this skill when

适用场景

Working on typescript project scaffolding tasks or workflows
Needing guidance, best practices, or checklists for typescript project scaffolding

处理TypeScript项目脚手架相关任务或工作流时
需要TypeScript项目脚手架的指导、最佳实践或检查清单时

Do not use this skill when

不适用场景

The task is unrelated to typescript project scaffolding
You need a different domain or tool outside this scope

任务与TypeScript项目脚手架无关时
需要此范围之外的其他领域或工具时

Context

背景

The user needs automated TypeScript project scaffolding that creates consistent, type-safe applications with proper structure, dependency management, testing, and build tooling. Focus on modern TypeScript patterns and scalable architecture.

用户需要自动化的TypeScript项目脚手架，以创建结构规范、类型安全的应用，同时具备完善的依赖管理、测试和构建工具。重点关注现代化TypeScript模式和可扩展架构。

Requirements

要求

$ARGUMENTS

Instructions

操作步骤

1. Analyze Project Type

1. 分析项目类型

Determine the project type from user requirements:

Next.js: Full-stack React applications, SSR/SSG, API routes
React + Vite: SPA applications, component libraries
Node.js API: Express/Fastify backends, microservices
Library: Reusable packages, utilities, tools
CLI: Command-line tools, automation scripts

根据用户需求确定项目类型：

Next.js：全栈React应用、SSR/SSG、API路由
React + Vite：SPA应用、组件库
Node.js API：Express/Fastify后端、微服务
Library：可复用包、工具函数、工具类
CLI：命令行工具、自动化脚本

2. Initialize Project with pnpm

2. 使用pnpm初始化项目

bash

undefined

bash

undefined

Install pnpm if needed

npm install -g pnpm

Initialize project

mkdir project-name && cd project-name pnpm init

Initialize git

git init echo "node_modules/" >> .gitignore echo "dist/" >> .gitignore echo ".env" >> .gitignore

undefined

git init echo "node_modules/" >> .gitignore echo "dist/" >> .gitignore echo ".env" >> .gitignore

undefined

3. Generate Next.js Project Structure

3. 生成Next.js项目结构

bash

undefined

bash

undefined

Create Next.js project with TypeScript

pnpm create next-app@latest . --typescript --tailwind --app --src-dir --import-alias "@/*"

undefined

nextjs-project/ ├── package.json ├── tsconfig.json ├── next.config.js ├── .env.example ├── src/ │ ├── app/ │ │ ├── layout.tsx │ │ ├── page.tsx │ │ ├── api/ │ │ │ └── health/ │ │ │ └── route.ts │ │ └── (routes)/ │ │ └── dashboard/ │ │ └── page.tsx │ ├── components/ │ │ ├── ui/ │ │ │ ├── Button.tsx │ │ │ └── Card.tsx │ │ └── layout/ │ │ ├── Header.tsx │ │ └── Footer.tsx │ ├── lib/ │ │ ├── api.ts │ │ ├── utils.ts │ │ └── types.ts │ └── hooks/ │ ├── useAuth.ts │ └── useFetch.ts └── tests/ ├── setup.ts └── components/ └── Button.test.tsx


**package.json**:
```json
{
  "name": "nextjs-project",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "vitest",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "next": "^14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.11.0",
    "@types/react": "^18.2.0",
    "typescript": "^5.3.0",
    "vitest": "^1.2.0",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.1.0"
  }
}

tsconfig.json:

json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "preserve",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "allowJs": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [{"name": "next"}]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

pnpm create next-app@latest . --typescript --tailwind --app --src-dir --import-alias "@/*"

undefined


**package.json**:
```json
{
  "name": "nextjs-project",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "vitest",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "next": "^14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.11.0",
    "@types/react": "^18.2.0",
    "typescript": "^5.3.0",
    "vitest": "^1.2.0",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.1.0"
  }
}

tsconfig.json:

json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "preserve",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "allowJs": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "plugins": [{"name": "next"}]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

4. Generate React + Vite Project Structure

4. 生成React + Vite项目结构

bash

undefined

bash

undefined

Create Vite project

pnpm create vite . --template react-ts


**vite.config.ts**:
```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.ts',
  },
})

pnpm create vite . --template react-ts


**vite.config.ts**:
```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.ts',
  },
})

5. Generate Node.js API Project Structure

5. 生成Node.js API项目结构

nodejs-api/
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts
│   ├── app.ts
│   ├── config/
│   │   ├── database.ts
│   │   └── env.ts
│   ├── routes/
│   │   ├── index.ts
│   │   ├── users.ts
│   │   └── health.ts
│   ├── controllers/
│   │   └── userController.ts
│   ├── services/
│   │   └── userService.ts
│   ├── models/
│   │   └── User.ts
│   ├── middleware/
│   │   ├── auth.ts
│   │   └── errorHandler.ts
│   └── types/
│       └── express.d.ts
└── tests/
    └── routes/
        └── users.test.ts

package.json for Node.js API:

json

{
  "name": "nodejs-api",
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js",
    "test": "vitest",
    "lint": "eslint src --ext .ts"
  },
  "dependencies": {
    "express": "^4.18.2",
    "dotenv": "^16.4.0",
    "zod": "^3.22.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.11.0",
    "typescript": "^5.3.0",
    "tsx": "^4.7.0",
    "vitest": "^1.2.0",
    "eslint": "^8.56.0",
    "@typescript-eslint/parser": "^6.19.0",
    "@typescript-eslint/eslint-plugin": "^6.19.0"
  }
}

src/app.ts:

typescript

import express, { Express } from 'express'
import { healthRouter } from './routes/health.js'
import { userRouter } from './routes/users.js'
import { errorHandler } from './middleware/errorHandler.js'

export function createApp(): Express {
  const app = express()

  app.use(express.json())
  app.use('/health', healthRouter)
  app.use('/api/users', userRouter)
  app.use(errorHandler)

  return app
}

nodejs-api/
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts
│   ├── app.ts
│   ├── config/
│   │   ├── database.ts
│   │   └── env.ts
│   ├── routes/
│   │   ├── index.ts
│   │   ├── users.ts
│   │   └── health.ts
│   ├── controllers/
│   │   └── userController.ts
│   ├── services/
│   │   └── userService.ts
│   ├── models/
│   │   └── User.ts
│   ├── middleware/
│   │   ├── auth.ts
│   │   └── errorHandler.ts
│   └── types/
│       └── express.d.ts
└── tests/
    └── routes/
        └── users.test.ts

Node.js API的package.json:

json

{
  "name": "nodejs-api",
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js",
    "test": "vitest",
    "lint": "eslint src --ext .ts"
  },
  "dependencies": {
    "express": "^4.18.2",
    "dotenv": "^16.4.0",
    "zod": "^3.22.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.11.0",
    "typescript": "^5.3.0",
    "tsx": "^4.7.0",
    "vitest": "^1.2.0",
    "eslint": "^8.56.0",
    "@typescript-eslint/parser": "^6.19.0",
    "@typescript-eslint/eslint-plugin": "^6.19.0"
  }
}

src/app.ts:

typescript

import express, { Express } from 'express'
import { healthRouter } from './routes/health.js'
import { userRouter } from './routes/users.js'
import { errorHandler } from './middleware/errorHandler.js'

export function createApp(): Express {
  const app = express()

  app.use(express.json())
  app.use('/health', healthRouter)
  app.use('/api/users', userRouter)
  app.use(errorHandler)

  return app
}

6. Generate TypeScript Library Structure

6. 生成TypeScript库项目结构

library-name/
├── package.json
├── tsconfig.json
├── tsconfig.build.json
├── src/
│   ├── index.ts
│   └── core.ts
├── tests/
│   └── core.test.ts
└── dist/

package.json for Library:

json

{
  "name": "@scope/library-name",
  "version": "0.1.0",
  "type": "module",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"],
  "scripts": {
    "build": "tsc -p tsconfig.build.json",
    "test": "vitest",
    "prepublishOnly": "pnpm build"
  },
  "devDependencies": {
    "typescript": "^5.3.0",
    "vitest": "^1.2.0"
  }
}

library-name/
├── package.json
├── tsconfig.json
├── tsconfig.build.json
├── src/
│   ├── index.ts
│   └── core.ts
├── tests/
│   └── core.test.ts
└── dist/

库项目的package.json:

json

{
  "name": "@scope/library-name",
  "version": "0.1.0",
  "type": "module",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"],
  "scripts": {
    "build": "tsc -p tsconfig.build.json",
    "test": "vitest",
    "prepublishOnly": "pnpm build"
  },
  "devDependencies": {
    "typescript": "^5.3.0",
    "vitest": "^1.2.0"
  }
}

7. Configure Development Tools

7. 配置开发工具

.env.example:

env

NODE_ENV=development
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/db
JWT_SECRET=your-secret-key

vitest.config.ts:

typescript

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
    },
  },
})

.eslintrc.json:

json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

.env.example:

env

NODE_ENV=development
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/db
JWT_SECRET=your-secret-key

vitest.config.ts:

typescript

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
    },
  },
})

.eslintrc.json:

json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

Output Format

输出格式

Project Structure: Complete directory tree with all necessary files
Configuration: package.json, tsconfig.json, build tooling
Entry Point: Main application file with type-safe setup
Tests: Test structure with Vitest configuration
Documentation: README with setup and usage instructions
Development Tools: .env.example, .gitignore, linting config

Focus on creating production-ready TypeScript projects with modern tooling, strict type safety, and comprehensive testing setup.

项目结构：包含所有必要文件的完整目录树
配置文件：package.json、tsconfig.json、构建工具配置
入口文件：具备类型安全配置的主应用文件
测试配置：包含Vitest配置的测试结构
文档：包含安装和使用说明的README
开发工具：.env.example、.gitignore、代码检查配置

重点关注创建可用于生产环境的TypeScript项目，使用现代化工具、严格的类型安全机制和全面的测试配置。