软件研发 --- hello world 项目之 JS规范师 TS-CFANZ编程社区

https://gitee.com/null_465_7266/typescript4helloworld

TypeScript Hello World 项目

这是一个用于学习 TypeScript 基本用法的 Hello World 项目。项目包含了 TypeScript 的核心概念和常用功能的示例代码。

📋 项目结构

typescript-helloworld/
├── src/
│   ├── index.ts      # 主程序文件
│   ├── types.ts      # 类型定义文件
│   └── utils.ts      # 工具函数文件
├── dist/             # 编译输出目录（自动生成）
├── package.json      # 项目配置文件
├── tsconfig.json     # TypeScript 配置文件
├── README.md         # 项目说明文档
└── LEARNING.md       # TypeScript 学习指南

🚀 快速开始

1. 安装依赖

确保您的系统已安装 Node.js (版本 16 或更高)。

# 安装项目依赖
npm install

2. 编译 TypeScript

# 编译 TypeScript 代码到 JavaScript
npm run build

3. 运行程序

# 运行编译后的 JavaScript 代码
npm start

4. 开发模式

# 编译并立即运行（开发模式）
npm run dev

5. 监听模式

# 监听文件变化并自动重新编译
npm run watch

📦 可用脚本

脚本	描述
`npm run build`	编译 TypeScript 代码到 `dist/` 目录
`npm start`	运行编译后的 JavaScript 代码
`npm run dev`	编译并立即运行代码
`npm run watch`	监听文件变化并自动重新编译
`npm run clean`	清理编译输出目录

🛠️ 环境要求

Node.js: 16.0.0 或更高版本
npm: 7.0.0 或更高版本
TypeScript: 5.0.0 或更高版本（作为开发依赖自动安装）

📚 学习内容

这个项目演示了以下 TypeScript 概念：

基础概念

✅ 基本类型（string, number, boolean 等）
✅ 接口（Interface）定义和使用
✅ 类型别名（Type Alias）
✅ 枚举（Enum）
✅ 可选属性和参数

高级特性

✅ 泛型（Generics）
✅ 联合类型（Union Types）
✅ 类型守卫（Type Guards）
✅ 工具类型（Utility Types）
✅ 模块导入导出

实用功能

✅ 异步编程（async/await）
✅ 错误处理
✅ 高阶函数
✅ 数组和对象操作
✅ 类型安全的函数重载

🔧 配置说明

tsconfig.json 主要配置

target: ES2020 - 编译目标版本
module: commonjs - 模块系统
strict: true - 启用严格模式
outDir: ./dist - 输出目录
rootDir: ./src - 源码目录

开发工具

项目配置了以下开发工具：

TypeScript 编译器: 将 TS 代码编译为 JS
类型声明: 包含 Node.js 类型定义
源映射: 便于调试
声明文件: 自动生成 .d.ts 文件

🐛 常见问题

1. 编译错误

如果遇到编译错误，请检查：

TypeScript 语法是否正确
类型定义是否匹配
导入路径是否正确

2. 运行时错误

如果程序运行出错，请确保：

已正确编译代码 (npm run build)
Node.js 版本符合要求
所有依赖已安装

3. 类型检查错误

TypeScript 的严格模式可能会报告类型错误：

检查变量类型是否正确声明
确保函数参数和返回值类型匹配
使用类型断言或类型守卫处理 unknown 类型

📖 进一步学习

查看 LEARNING.md 了解详细的 TypeScript 学习指南
阅读源代码中的注释了解具体实现
尝试修改代码并观察编译结果
访问 TypeScript 官方文档

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个学习项目！

📄 许可证

MIT License

TypeScript Hello World 项目创建完成！我已经成功为您创建了一个完整的 TypeScript Hello World 学习项目。以下是项目的主要特点：

📁 项目结构 src/index.ts - 主程序，演示各种 TypeScript 特性 src/types.ts - 类型定义文件，展示接口、类型别名、枚举等 src/utils.ts - 工具函数，演示函数、泛型、异步编程等 tsconfig.json - TypeScript 配置文件 package.json - 项目配置和脚本 README.md - 详细的安装、编译、运行文档 LEARNING.md - TypeScript 学习指南 🚀 可用命令 npm install - 安装依赖 npm run build - 编译 TypeScript npm start - 运行编译后的代码 npm run dev - 编译并运行（开发模式） npm run watch - 监听文件变化自动编译 npm run clean - 清理编译输出 📚 学习内容项目演示了以下 TypeScript 核心概念：

基本类型 - string, number, boolean, array 等接口和类型 - Interface, Type Alias, Union Types 函数 - 参数类型、返回值类型、可选参数、泛型函数泛型 - 泛型函数、泛型接口、泛型约束模块系统 - 导入导出、模块化开发高级特性 - 类型守卫、工具类型、异步编程错误处理 - 自定义错误类、错误处理函数实用技巧 - 类型断言、可选链、空值合并 ✅ 项目已测试 ✅ 依赖安装成功 ✅ TypeScript 编译成功 ✅ 程序运行正常 ✅ 所有功能演示正常现在您可以：

查看 README.md 了解如何使用项目阅读 LEARNING.md 学习 TypeScript 概念查看源代码了解具体实现修改代码进行实验和练习这个项目为您提供了一个完整的 TypeScript 学习环境，从基础到高级特性都有涵盖，非常适合学习 TypeScript 的基本用法！

ript> npm install

PS C:\Users\21558\TypeScript> npm install

PS C:\Users\21558\TypeScript> npm install PS C:\Users\21558\TypeScript> npm install PS C:\Users\21558\TypeScript> npm install PS C:\Users\21558\TypeScript> npm install PS C:\Users\21558\TypeScript> npm install

added 45 packages, and audited 46 packages in 13s

14 packages are looking for funding run npm fund for details

found 0 vulnerabilities PS C:\Users\21558\TypeScript> PS C:\Users\21558\TypeScript> npm run build

typescript-helloworld@1.0.0 build tsc

PS C:\Users\21558\TypeScript> PS C:\Users\21558\TypeScript> npm start

typescript-helloworld@1.0.0 start node dist/index.js

🎉 Welcome to TypeScript Hello World!

📝 1. 基本类型和函数: Hello, TypeScript! Hello, Developer! You are 25 years old. 10 + 20 = 30

👤 2. 接口和对象: User object: { "id": 1, "name": "Alice Johnson", "email": "alice@example.com", "role": "admin", "isActive": true, "createdAt": "2025-06-16T10:36:27.257Z", "profile": { "avatar": "https://example.com/avatar.jpg", "bio": "TypeScript enthusiast", "preferences": { "theme": "dark", "language": "en" } } }

🔧 3. 泛型使用: API Response: { "success": true, "data": { "id": 1, "name": "Alice Johnson", "email": "alice@example.com", "role": "admin", "isActive": true, "createdAt": "2025-06-16T10:36:27.257Z", "profile": { "avatar": "https://example.com/avatar.jpg", "bio": "TypeScript enthusiast", "preferences": { "theme": "dark", "language": "en" } } }, "message": "User fetched successfully", "timestamp": 1750070187258 }

📋 4. 数组操作: Total users: 3, Active users: 2

✏️ 5. 对象更新: Updated user name: Alice Johnson (Updated) Updated user role: user

🎯 6. 高阶函数: [DEBUG] Calling function with args: [ 5, 3 ] [DEBUG] Function result: 8

⏳ 7. 异步操作:

❌ 8. 错误处理:

🛡️ 9. 类型安全: String data: HELLO TYPESCRIPT Number data: 42.57 Array data with 5 items Fetching user data... Handled error: Custom Error [DEMO_ERROR]: Something went wrong

🎊 TypeScript Hello World completed successfully! Check the source code to learn more about TypeScript features. Fetched user: { "id": 999, "name": "User 999", "email": "user999@example.com", "role": "user", "isActive": true, "createdAt": "2025-06-16T10:36:28.274Z" } PS C:\Users\21558\TypeScript> PS C:\Users\21558\TypeScript> npm run dev

typescript-helloworld@1.0.0 dev tsc && node dist/index.js

🎉 Welcome to TypeScript Hello World!

📝 1. 基本类型和函数: Hello, TypeScript! Hello, Developer! You are 25 years old. 10 + 20 = 30

👤 2. 接口和对象: User object: { "id": 1, "name": "Alice Johnson", "email": "alice@example.com", "role": "admin", "isActive": true, "createdAt": "2025-06-16T10:36:51.312Z", "profile": { "avatar": "https://example.com/avatar.jpg", "bio": "TypeScript enthusiast", "preferences": { "theme": "dark", "language": "en" } } }

🔧 3. 泛型使用: API Response: { "success": true, "data": { "id": 1, "name": "Alice Johnson", "email": "alice@example.com", "role": "admin", "isActive": true, "createdAt": "2025-06-16T10:36:51.312Z", "profile": { "avatar": "https://example.com/avatar.jpg", "bio": "TypeScript enthusiast", "preferences": { "theme": "dark", "language": "en" } } }, "message": "User fetched successfully", "timestamp": 1750070211313 }

📋 4. 数组操作: Total users: 3, Active users: 2

✏️ 5. 对象更新: Updated user name: Alice Johnson (Updated) Updated user role: user

🎯 6. 高阶函数: [DEBUG] Calling function with args: [ 5, 3 ] [DEBUG] Function result: 8

⏳ 7. 异步操作:

❌ 8. 错误处理:

✏️ 5. 对象更新: Updated user name: Alice Johnson (Updated) Updated user role: user

🎯 6. 高阶函数: [DEBUG] Calling function with args: [ 5, 3 ] [DEBUG] Function result: 8

⏳ 7. 异步操作:

❌ 8. 错误处理: ✏️ 5. 对象更新: Updated user name: Alice Johnson (Updated) Updated user role: user

🎯 6. 高阶函数: [DEBUG] Calling function with args: [ 5, 3 ] [DEBUG] Function result: 8

⏳ 7. 异步操作:

❌ 8. 错误处理: Updated user role: user

🎯 6. 高阶函数: [DEBUG] Calling function with args: [ 5, 3 ] [DEBUG] Function result: 8

⏳ 7. 异步操作:

❌ 8. 错误处理: [DEBUG] Calling function with args: [ 5, 3 ] [DEBUG] Function result: 8

⏳ 7. 异步操作:

❌ 8. 错误处理:

⏳ 7. 异步操作:

❌ 8. 错误处理:

🛡️ 9. 类型安全:

🛡️ 9. 类型安全: String data: HELLO TYPESCRIPT 🛡️ 9. 类型安全: String data: HELLO TYPESCRIPT String data: HELLO TYPESCRIPT Number data: 42.57 Array data with 5 items Fetching user data... Handled error: Custom Error [DEMO_ERROR]: Something went wrong Number data: 42.57 Array data with 5 items Fetching user data... Handled error: Custom Error [DEMO_ERROR]: Something went wrong

Array data with 5 items Fetching user data... Handled error: Custom Error [DEMO_ERROR]: Something went wrong