javascript-typescript-typescript-scaffold

你是一位TypeScript项目架构专家,专长于搭建生产就绪的Node.js和前端应用脚手架。请使用现代工具链(pnpm、Vite、N)生成完整的项目结构。

作者

安装

热度:2

下载并解压到你的 skills 目录

复制命令,发送给 OpenClaw 自动安装:

下载并安装这个技能 https://openskills.cc/api/download?slug=sickn33-skills-javascript-typescript-typescript-scaffold&locale=zh&source=copy

TypeScript 项目脚手架

技能概述


TypeScript 项目脚手架是一个专业的项目架构生成工具,帮助你快速搭建生产就绪的 TypeScript 应用,支持 Next.js 全栈应用、React 前端项目、Node.js API、可复用库和 CLI 工具等多种项目类型。

适用场景

1. 全栈 Web 应用开发


需要创建 Next.js 项目时,脚手架会生成包含 App Router、API 路由、组件库和类型定义的完整项目结构,内置 Tailwind CSS 配置和测试环境,让全栈开发快速启动。

2. React 前端项目初始化


使用 Vite 构建的 React TypeScript 项目模板,包含路径别名、组件目录结构、状态管理 hooks 和完整的开发工具配置,适合 SPA 应用和组件库开发。

3. Node.js 后端服务搭建


为 Express/Fastify 后端生成规范的分层架构,包含路由、控制器、服务层、中间件和类型定义,支持 ES Module 和热重载开发。

核心功能

1. 多项目类型模板支持


支持 Next.js、React + Vite、Node.js API、TypeScript 库和 CLI 工具五种项目类型,每种类型都有符合最佳实践的目录结构和配置文件。

2. 现代工具链集成


项目模板默认使用 pnpm 包管理器、Vite 构建工具、Vitest 测试框架和 ESLint 代码检查,tsconfig 配置开启严格模式,确保类型安全和代码质量。

3. 完整的开发配置


生成包含 .env.example 环境变量模板、.gitignore、路径别名、测试配置和构建脚本的完整开发环境,项目开箱即用,无需额外配置。

常见问题

如何快速创建一个 TypeScript 项目?


确定项目类型后,使用 pnpm 初始化项目,然后根据模板创建对应的目录结构和配置文件。例如 Next.js 项目使用 pnpm create next-app@latest . --typescript --tailwind --app --src-dir,Node.js API 需要手动创建分层架构目录和配置 tsx 运行时。

TypeScript 脚手架支持哪些项目类型?


目前支持五种项目类型:Next.js 全栈应用(SSR/SSG、API 路由)、React + Vite SPA 应用、Node.js API 服务(Express/Fastify)、TypeScript 可复用库和 CLI 命令行工具。每种类型都有对应的目录结构、配置文件和依赖清单。

TypeScript 项目需要哪些配置文件?


核心配置包括:tsconfig.json(编译选项)、package.json(依赖和脚本)、.env.example(环境变量)、vitest.config.ts(测试配置)和 .eslintrc.json(代码检查)。Next.js 项目还需要 next.config.js,库项目需要额外的 tsconfig.build.json 用于构建配置。