easy-vibe TypeScript 实战教程类型注解、接口与泛型在 Vibecoding 中让 AI 的类型错误无处遁形【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇基于 easy-vibe 课程附录「浏览器与前端」分卷的 TypeScript 教程阿拉伯语版原文档中文版对照展开系统讲解类型注解、接口interface、泛型Generics与类型守卫等核心概念并结合课程站点中真实的交互式演示组件源码说明每个概念在 easy-vibe 项目里的落地方式。读完后你将能够读懂 TS 类型系统的主要符号、编写类型安全的提示词引导 AI 生成代码并掌握 JavaScript 项目渐进式迁移到 TypeScript 的完整步骤。1. 为什么 Vibecoding 时代更需要 TypeScript1.1 从运行时出错到编译时发现你已经会写 JavaScript但可能遇到过这些问题变量赋值了错误类型、运行时才发现对象属性名拼错、调试半天函数参数类型不对、改来改去。TypeScript 就是在代码运行前帮你发现这些问题的工具。两者痛点对比如下对比项JavaScript 的痛点TypeScript 的优势错误发现时机类型错误在运行时才暴露写代码编译时即发现错误拼写错误难以察觉智能提示更准确重构容易遗漏修改点重命名、改签名更安全可维护性依赖人工约定类型即文档代码更易维护用一句话理解两者的关系JavaScript 是原始材料可直接运行的代码TypeScript 是蓝图 质检给 JavaScript 加类型检查最后再编译回 JavaScript。1.2 真实场景AI 生成的代码也会犯类型错误教程中给出了一个典型的 vibecoding 案例一位开发者用 AI 生成了用户管理功能JavaScript 代码能运行但用户年龄字段本应是数字有时却被赋值为字符串。结果在计算是否成年时字符串25被当成字符串处理导致判断失败这个 bug 隐藏了很久直到某个用户输入了非数字字符才暴露。如果用 TypeScript这段代码在编写时就会报错不能将类型 string 分配给类型 number这就是 TypeScript 对 AI 编程的核心价值——当 AI 写错类型时你能第一时间发现而不是在用户反馈中补救。这一价值在当前课程站点的演示组件中得到印证TypeAnnotationDemo.vue 就模拟了这个场景——点击给 age 赋无效类型按钮后组件会弹出错误提示modifyAgeError函数见该文件第 28-35 行演示编译期拦截类型错误的效果。1.3 TypeScript 实际上是 JavaScript 的超集TypeScript 不是一门全新的语言它只是 JavaScript 的超集// 这是有效的 JavaScript也是有效的 TypeScript const name 张三 const age 25 function greet(user) { return Hello ${user} } // 这是 TypeScript 特有的类型注解 const name2: string 李四 const age2: number 30 function greet2(user: string): string { return Hello ${user} }关键理解所有 JavaScript 代码都是有效的 TypeScript 代码TypeScript 添加了可选的类型注解TypeScript 最终会编译成 JavaScript 运行不会改变代码的运行方式。因此你可以渐进式采用TypeScript——从给关键变量添加类型开始而不需要一次性重写整个项目迁移步骤见第 7 章。仓库背景补充easy-vibe 课程站点本身就是一个 TypeScript 生态的典型案例。从 package.json 可以看到站点用 VitePress 构建vitepress dev docs/vitepress build docs课程中的交互式演示均为 Vue 3 单文件组件而 Vue 3 与 VitePress 的类型系统正是基于 TypeScript——也就是说这门讲 TypeScript 的课程其运行载体本身就运行在 TypeScript 生态之上。2. 基础类型注解2.1 类型注解的语法类型注解就是在变量名后面加上: 类型通用格式为「变量名: 类型 值」const name: string 张三 let age: number 25 let isStudent: boolean true原文档在此处嵌入了一个可交互的TypeAnnotationDemo /演示对应仓库中的真实组件 TypeAnnotationDemo.vue。从源码看它用namestring、agenumber、isActiveboolean三个响应式变量模拟三类基本类型的注解每个变量卡片实时渲染出形如const age: number 25的注解代码帮助读者建立值—类型—注解的直觉。2.2 哪些地方不需要显式注解TypeScript 能从赋值的值自动推断类型// 这些不需要注解TypeScript 能自动推断 const name 张三 // 推断为 string const age 25 // 推断为 number const isActive true // 推断为 boolean // 这些情况需要显式注解 let data // ❌ 错误无法推断类型 let data: any // ✅ 可以但失去了类型检查的好处 function add(a, b) { // ❌ 参数类型不明确 return a b } function add2(a: number, b: number): number { // ✅ 类型明确 return a b }2.3 基本类型速查TypeScript 支持 JavaScript 的所有基本类型类型说明示例string字符串hello,你好number数字整数和小数42,3.14boolean布尔值true,falsenull/undefined空值null,undefinedarray数组number[],string[]object对象{ name: string; age: number }数组类型有两种等价写法// 方式 1类型[]最常用 const numbers: number[] [1, 2, 3, 4, 5] const names: string[] [张三, 李四, 王五] // 方式 2Array类型 const numbers2: Arraynumber [1, 2, 3, 4, 5] const names2: Arraystring [张三, 李四, 王五]2.4 特殊类型any、unknown、void、never// any任何类型谨慎使用会关闭类型检查 let data: any 42 data 现在可以是字符串 data { name: 张三 } // 也可以是对象 // unknownany 的类型安全替代品 let value: unknown 42 // if (typeof value number) { // console.log(value 10) // 使用前必须先做类型收窄 // } // void无返回值 function log(message: string): void { console.log(message) } // never永远不会返回函数体内必然抛出或无限循环 function error(message: string): never { throw new Error(message) }识别技巧看到: string→ string 类型的类型注解看到: number[]→ 数字数组注解看到: void→ 该函数不返回值。3. 对象类型与接口3.1 interface定义对象的形状接口Interface是 TypeScript 中定义对象类型的主要方式// 定义 User 接口 interface User { id: number name: string email: string age?: number // 可选属性 } // 使用接口 const user: User { id: 1, name: 张三, email: zhangsanexample.com, age: 25 } // age 是可选的可以不提供 const user2: User { id: 2, name: 李四, email: lisiexample.com }原文档中的InterfaceDemo /交互演示对应 InterfaceDemo.vue读者可以在页面上亲手构造一个匹配接口定义的对象验证哪些属性必填、哪些可选。3.2 接口的其他能力readonly、函数属性、继承// 只读属性 interface User { readonly id: number // id 创建后不可修改 name: string } const user: User { id: 1, name: 张三 } user.id 2 // ❌ 错误只读属性不能修改 user.name 李四 // ✅ 可以修改 // 函数类型属性 interface User { name: string greet: () string // greet 是一个函数返回 string } const user: User { name: 张三, greet: () Hello } // 接口继承 interface Admin extends User { permissions: string[] } const admin: Admin { name: 管理员, greet: () Hello Admin, permissions: [read, write, delete] }3.3 type 别名union 与 intersection除了 interface还可以用type定义类型别名// 类型别名 type User { id: number name: string email: string } // 联合类型Union Type type Status pending | success | error const status: Status success // ✅ // const status2: Status failed // ❌ 错误不在联合类型中 // 交叉类型Intersection Type——合并多个类型 type User { id: number name: string } type Timestamp { createdAt: Date updatedAt: Date } type UserWithTimestamp User Timestamp const user: UserWithTimestamp { id: 1, name: 张三, createdAt: new Date(), updatedAt: new Date() }interface 与 type 的选型对比特性interfacetype扩展extends交叉类型重复声明会自动合并会报错适用场景对象形状、类联合类型、交叉类型、基本类型别名识别技巧看到interface→ 对象类型定义看到type→ 类型别名看到?→ 可选属性看到readonly→ 只读属性。4. 函数类型4.1 参数类型与返回值类型// 完整的函数类型注解 function add(a: number, b: number): number { return a b } // 箭头函数 const multiply (a: number, b: number): number { return a * b } // 无返回值 function log(message: string): void { console.log(message) } // 返回多种类型联合类型 function parseInput(input: string): number | string { const num parseFloat(input) return isNaN(num) ? input : num }4.2 可选参数与默认参数// 可选参数用 ? 标记 function greet(name: string, title?: string): string { return title ? ${title} ${name} : name } greet(张三) // 张三 greet(张三, 先生) // 先生 张三 // 默认参数 function greet2(name: string, title: string 朋友): string { return ${title} ${name} } greet2(李四) // 朋友 李四 greet2(李四, 博士) // 博士 李四4.3 把函数类型作为参数高阶函数是 TypeScript 类型安全的另一个重要收益// 接收函数作为参数 function calculate( a: number, b: number, operation: (x: number, y: number) number ): number { return operation(a, b) } calculate(10, 5, (x, y) x y) // 15 calculate(10, 5, (x, y) x * y) // 50 // 更清晰的方式先定义函数类型 type Operation (x: number, y: number) number function calculate2( a: number, b: number, operation: Operation ): number { return operation(a, b) }识别技巧看到(a: number, b: number) number→ 这是函数类型描述了参数和返回值看到: void→ 函数不返回值看到?→ 参数可选。这种回调参数带完整类型签名的写法在前端框架中随处可见——从课程站点的组件源码看Vue 的watch(source, callback)回调同样依赖这种函数类型约定例如 TypeAnnotationDemo.vue 中watch(locale, reset)用法理解函数类型是读懂现代前端代码的基础。5. 泛型Generics5.1 泛型的基本概念泛型让你可以编写不预先指定具体类型的函数、接口或类在使用时再确定类型——既能复用又保留类型安全// 泛型函数T 是类型变量 function identityT(arg: T): T { return arg } // 显式指定类型 const num1 identitynumber(42) // 类型是 number const str1 identitystring(hello) // 类型是 string // 类型推断TypeScript 能自动推断 const num2 identity(42) // 推断为 number const str2 identity(hello) // 推断为 string原文档嵌入的GenericDemo /演示对应 GenericDemo.vue。从源码看第 12-49 行它实现了一个reverseArray(arr)数组翻转函数并让读者在number[]与string[]两种类型间切换输入——这正是泛型要解决的问题同一个翻转数组的逻辑既能安全处理数字数组也能安全处理字符串数组而不必退化成any[]。5.2 泛型约束通过extends约束类型变量要求它满足某些条件// 约束 T 必须拥有 length 属性 interface HasLength { length: number } function logLengthT extends HasLength(arg: T): void { console.log(arg.length) } logLength(hello) // ✅ 字符串有 length logLength([1, 2, 3]) // ✅ 数组有 length // logLength(42) // ❌ 数字没有 length 属性5.3 泛型接口与泛型类// 泛型接口 interface BoxT { value: T getValue(): T } const numberBox: Boxnumber { value: 42, getValue: () 42 } const stringBox: Boxstring { value: hello, getValue: () hello } // 泛型类 class StorageT { private items: T[] [] add(item: T): void { this.items.push(item) } get(index: number): T { return this.items[index] } } const numberStorage new Storagenumber() numberStorage.add(1) numberStorage.add(2) // numberStorage.add(string) // ❌ 错误 const stringStorage new Storagestring() stringStorage.add(hello) // stringStorage.add(1) // ❌ 错误识别技巧看到T→ 泛型类型变量看到T extends SomeType→ 泛型约束看到ArrayT、PromiseT→ 内置泛型类型。6. 类型推断与实用技巧6.1 类型推断InferenceTypeScript 能从上下文自动推断类型// 变量初始化时的推断 const name 张三 // 推断为 string const age 25 // 推断为 number const isActive true // 推断为 boolean // 数组推断 const numbers [1, 2, 3] // 推断为 number[] const mixed [1, hello, true] // 推断为 (number | string | boolean)[] // 函数返回值推断 function add(a: number, b: number) { return a b // 推断返回值为 number }课程站点中的 TypeInferenceDemo.vue 就是该章节的交互演示帮助读者观察 TypeScript 在不同赋值场景下的推断结果。6.2 何时用推断、何时用显式注解推荐依赖推断的场景// ✅ 简单字面量赋值 const count 0 const name 张三 const isActive true // ✅ 可以推断的函数返回值 function getUserId(user: User) { return user.id // 推断为 number }推荐显式注解的场景// ✅ 函数参数必须显式 function add(a: number, b: number) { return a b } // ✅ 结构不明确的对象属性 const user: { id: number name: string metadata: Recordstring, any } { id: 1, name: 张三, metadata: {} // 可能被推断为 {}需要显式声明 } // ✅ 复杂的函数返回类型 function getUser(): User | null { // ... return null } // ✅ 公共 API 接口 export function calculateTotal(prices: number[]): number { return prices.reduce((sum, price) sum price, 0) }6.3 类型守卫Type Guards类型检查发生在编译期但运行时仍可能收到意外数据例如 AI 生成的代码、第三方 API 响应。类型守卫用于在运行时收窄类型// typeof 类型守卫 function processValue(value: string | number) { if (typeof value string) { // 这里 TypeScript 知道 value 是 string console.log(value.toUpperCase()) } else { // 这里 TypeScript 知道 value 是 number console.log(value * 2) } } // instanceof 类型守卫 class Dog { bark() { console.log(汪汪) } } class Cat { meow() { console.log(喵喵) } } function makeSound(animal: Dog | Cat) { if (animal instanceof Dog) { animal.bark() // TypeScript 知道这是 Dog } else { animal.meow() // TypeScript 知道这是 Cat } } // 自定义类型守卫type predicate interface User { name: string email: string } function isUser(value: any): value is User { return ( typeof value object value ! null typeof value.name string typeof value.email string ) } function processValue(value: unknown) { if (isUser(value)) { // 这里 value 被收窄为 User console.log(value.name) } }6.4 内置工具类型Utility TypesTypeScript 提供了一批开箱即用的工具类型配合interface使用极其高效interface User { id: number name: string email: string } // Partial所有属性变为可选 type PartialUser PartialUser // 等价于: { id?: number; name?: string; email?: string } // Required所有属性变为必填 type RequiredUser RequiredPartialUser // 等价于: { id: number; name: string; email: string } // Pick只保留指定属性 type UserBasicInfo PickUser, id | name // 等价于: { id: number; name: string } // Omit排除指定属性 type UserWithoutEmail OmitUser, email // 等价于: { id: number; name: string } // Record构造键值对对象类型 type UserRoles Recordstring, boolean // 等价于: { [key: string]: boolean }这些工具类型也是与 AI 协作的高频词汇只要能在提示词中说出参数接受PartialUserAI 就能准确生成符合预期的更新接口见下一章。7. Vibecoding 实战技巧把 TypeScript 融入 AI 工作流7.1 让 AI 生成类型安全的代码类型系统本身就是最好的提示词约束。对比两种提示词❌ 差的提示词给我写一个用户管理功能✅ 好的提示词用 TypeScript 写一个用户管理功能。 数据结构定义如下 interface User { id: number name: string email: string age: number } 需要实现 1. 获取用户列表返回 User[] 2. 创建用户接受 PartialUser返回 User 3. 更新用户接受 id 和 PartialUser返回 User 4. 删除用户接受 id返回 void 确保所有函数都有完整的类型注解。提示词中直接给出interface定义与逐函数的签名约束包括PartialUser这样的工具类型AI 的输出会显著更贴合可编译的代码。7.2 读懂 TypeScript 错误信息遇到报错不必慌最常见的四类错误及其含义如下错误信息含义解决方式Type X is not assignable to type Y类型 X 不能赋值给类型 Y检查类型是否匹配或做类型转换Property X does not exist on type Y类型 Y 上不存在属性 X检查属性名拼写或补充属性定义Argument of type X is not assignable to parameter of type Y参数类型不匹配检查调用函数时传入的参数类型Type X is missing the following properties from type Y类型 X 缺少 Y 的部分属性补全缺失的属性7.3 JavaScript 项目渐进式迁移 TypeScript已有 JS 项目不必一步到位可以分四步渐进迁移第一步把文件重命名为.ts# 例如 utils.js 重命名为 utils.ts mv utils.js utils.ts第二步修复明显的类型错误// 如果报错: Parameter a implicitly has an any type // 补上类型注解即可 function add(a: number, b: number) { return a b }第三步逐步补充类型定义// 先用 any 快速消除错误 function processUser(user: any) { // ... } // 之后再逐步细化为具体类型 interface User { id: number name: string } function processUser(user: User) { // ... }第四步开启严格模式// tsconfig.json { compilerOptions: { strict: true, // 开启严格模式 noImplicitAny: true, // 禁止隐式 any strictNullChecks: true // 严格检查 null/undefined } }注意strict: true已经隐含了noImplicitAny与strictNullChecks这里单独列出是为了让迁移者明确每一步在收紧哪一类检查。8. 符号识别速查与学习路径学完本教程后你应该能一眼识别这些符号符号/关键字含义: stringstring 类型的类型注解: number[]数字数组类型注解interface User对象类型定义接口type User 类型别名T泛型Generic类型变量extends接口继承或泛型约束?可选属性/可选参数readonly只读属性\|联合类型Union Type交叉类型Intersection Type对应的核心能力清单类型注解明确告诉 TypeScript 变量的类型接口定义对象结构与属性类型泛型编写可复用且类型安全的代码类型推断依赖 TypeScript 的自动类型推导类型守卫在运行时收窄类型工具类型Partial、Required、Pick、Omit、Record。当你卡住时可以这样向 AI 提问教程推荐的四个问题模板这个函数的类型注解怎么写参数是 X返回值是 Y帮我定义一个描述这个数据结构的接口……这个 TypeScript 错误是什么意思怎么修复怎么给这个泛型函数加约束确保 T 必须包含某个属性9. 在 easy-vibe 仓库中深入教程背后的实现如果你想在本地运行这套课程站点并查看教程页面与交互演示的真实源码可以按以下方式操作仓库为只读以下仅为查看与运行方式教程文档的多语言版本阿拉伯语版见 docs/ar-sa/appendix/3-browser-and-frontend/typescript.md中文版见 docs/zh-cn/appendix/3-browser-and-frontend/typescript.md各语言分卷en、de、es、fr、ja、ko、vi、zh-tw 等下均有同主题章节本文涉及的四个交互演示组件源码TypeAnnotationDemo.vue、InterfaceDemo.vue、GenericDemo.vue、TypeInferenceDemo.vue组件通过 主题注册文件 以懒加载方式挂载到 VitePress 主题第 611-614 行为对应的动态 import 映射这正是接口/契约思想在工程上的体现——文档里的TypeAnnotationDemo /标签与注册表中的组件名一一对应每个组件通过useI18n组合式函数加载各自的typescriptIntroLocale文案包实现同一演示组件在十余种语言下的界面本地化本地运行按照 package.json 中的 scripts 安装依赖后执行npm run dev启动开发服务器vitepress dev docs或npm run preview预览构建产物。小结TypeScript 的本质是在代码运行前拦截错误类型注解与接口让数据结构有了契约泛型让复用不再牺牲类型安全类型守卫与工具类型则覆盖了运行时校验与类型派生的常见需求。而在 vibecoding 工作流中这套类型系统更是你审查 AI 生成代码的第一道防线——把interface写进提示词把类型错误拦在编译期是这门课程及 easy-vibe 站点自身技术栈反复示范的工程习惯。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
easy-vibe TypeScript 实战教程：类型注解、接口与泛型，在 Vibecoding 中让 AI 的类型错误无处遁形
easy-vibe TypeScript 实战教程类型注解、接口与泛型在 Vibecoding 中让 AI 的类型错误无处遁形【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇基于 easy-vibe 课程附录「浏览器与前端」分卷的 TypeScript 教程阿拉伯语版原文档中文版对照展开系统讲解类型注解、接口interface、泛型Generics与类型守卫等核心概念并结合课程站点中真实的交互式演示组件源码说明每个概念在 easy-vibe 项目里的落地方式。读完后你将能够读懂 TS 类型系统的主要符号、编写类型安全的提示词引导 AI 生成代码并掌握 JavaScript 项目渐进式迁移到 TypeScript 的完整步骤。1. 为什么 Vibecoding 时代更需要 TypeScript1.1 从运行时出错到编译时发现你已经会写 JavaScript但可能遇到过这些问题变量赋值了错误类型、运行时才发现对象属性名拼错、调试半天函数参数类型不对、改来改去。TypeScript 就是在代码运行前帮你发现这些问题的工具。两者痛点对比如下对比项JavaScript 的痛点TypeScript 的优势错误发现时机类型错误在运行时才暴露写代码编译时即发现错误拼写错误难以察觉智能提示更准确重构容易遗漏修改点重命名、改签名更安全可维护性依赖人工约定类型即文档代码更易维护用一句话理解两者的关系JavaScript 是原始材料可直接运行的代码TypeScript 是蓝图 质检给 JavaScript 加类型检查最后再编译回 JavaScript。1.2 真实场景AI 生成的代码也会犯类型错误教程中给出了一个典型的 vibecoding 案例一位开发者用 AI 生成了用户管理功能JavaScript 代码能运行但用户年龄字段本应是数字有时却被赋值为字符串。结果在计算是否成年时字符串25被当成字符串处理导致判断失败这个 bug 隐藏了很久直到某个用户输入了非数字字符才暴露。如果用 TypeScript这段代码在编写时就会报错不能将类型 string 分配给类型 number这就是 TypeScript 对 AI 编程的核心价值——当 AI 写错类型时你能第一时间发现而不是在用户反馈中补救。这一价值在当前课程站点的演示组件中得到印证TypeAnnotationDemo.vue 就模拟了这个场景——点击给 age 赋无效类型按钮后组件会弹出错误提示modifyAgeError函数见该文件第 28-35 行演示编译期拦截类型错误的效果。1.3 TypeScript 实际上是 JavaScript 的超集TypeScript 不是一门全新的语言它只是 JavaScript 的超集// 这是有效的 JavaScript也是有效的 TypeScript const name 张三 const age 25 function greet(user) { return Hello ${user} } // 这是 TypeScript 特有的类型注解 const name2: string 李四 const age2: number 30 function greet2(user: string): string { return Hello ${user} }关键理解所有 JavaScript 代码都是有效的 TypeScript 代码TypeScript 添加了可选的类型注解TypeScript 最终会编译成 JavaScript 运行不会改变代码的运行方式。因此你可以渐进式采用TypeScript——从给关键变量添加类型开始而不需要一次性重写整个项目迁移步骤见第 7 章。仓库背景补充easy-vibe 课程站点本身就是一个 TypeScript 生态的典型案例。从 package.json 可以看到站点用 VitePress 构建vitepress dev docs/vitepress build docs课程中的交互式演示均为 Vue 3 单文件组件而 Vue 3 与 VitePress 的类型系统正是基于 TypeScript——也就是说这门讲 TypeScript 的课程其运行载体本身就运行在 TypeScript 生态之上。2. 基础类型注解2.1 类型注解的语法类型注解就是在变量名后面加上: 类型通用格式为「变量名: 类型 值」const name: string 张三 let age: number 25 let isStudent: boolean true原文档在此处嵌入了一个可交互的TypeAnnotationDemo /演示对应仓库中的真实组件 TypeAnnotationDemo.vue。从源码看它用namestring、agenumber、isActiveboolean三个响应式变量模拟三类基本类型的注解每个变量卡片实时渲染出形如const age: number 25的注解代码帮助读者建立值—类型—注解的直觉。2.2 哪些地方不需要显式注解TypeScript 能从赋值的值自动推断类型// 这些不需要注解TypeScript 能自动推断 const name 张三 // 推断为 string const age 25 // 推断为 number const isActive true // 推断为 boolean // 这些情况需要显式注解 let data // ❌ 错误无法推断类型 let data: any // ✅ 可以但失去了类型检查的好处 function add(a, b) { // ❌ 参数类型不明确 return a b } function add2(a: number, b: number): number { // ✅ 类型明确 return a b }2.3 基本类型速查TypeScript 支持 JavaScript 的所有基本类型类型说明示例string字符串hello,你好number数字整数和小数42,3.14boolean布尔值true,falsenull/undefined空值null,undefinedarray数组number[],string[]object对象{ name: string; age: number }数组类型有两种等价写法// 方式 1类型[]最常用 const numbers: number[] [1, 2, 3, 4, 5] const names: string[] [张三, 李四, 王五] // 方式 2Array类型 const numbers2: Arraynumber [1, 2, 3, 4, 5] const names2: Arraystring [张三, 李四, 王五]2.4 特殊类型any、unknown、void、never// any任何类型谨慎使用会关闭类型检查 let data: any 42 data 现在可以是字符串 data { name: 张三 } // 也可以是对象 // unknownany 的类型安全替代品 let value: unknown 42 // if (typeof value number) { // console.log(value 10) // 使用前必须先做类型收窄 // } // void无返回值 function log(message: string): void { console.log(message) } // never永远不会返回函数体内必然抛出或无限循环 function error(message: string): never { throw new Error(message) }识别技巧看到: string→ string 类型的类型注解看到: number[]→ 数字数组注解看到: void→ 该函数不返回值。3. 对象类型与接口3.1 interface定义对象的形状接口Interface是 TypeScript 中定义对象类型的主要方式// 定义 User 接口 interface User { id: number name: string email: string age?: number // 可选属性 } // 使用接口 const user: User { id: 1, name: 张三, email: zhangsanexample.com, age: 25 } // age 是可选的可以不提供 const user2: User { id: 2, name: 李四, email: lisiexample.com }原文档中的InterfaceDemo /交互演示对应 InterfaceDemo.vue读者可以在页面上亲手构造一个匹配接口定义的对象验证哪些属性必填、哪些可选。3.2 接口的其他能力readonly、函数属性、继承// 只读属性 interface User { readonly id: number // id 创建后不可修改 name: string } const user: User { id: 1, name: 张三 } user.id 2 // ❌ 错误只读属性不能修改 user.name 李四 // ✅ 可以修改 // 函数类型属性 interface User { name: string greet: () string // greet 是一个函数返回 string } const user: User { name: 张三, greet: () Hello } // 接口继承 interface Admin extends User { permissions: string[] } const admin: Admin { name: 管理员, greet: () Hello Admin, permissions: [read, write, delete] }3.3 type 别名union 与 intersection除了 interface还可以用type定义类型别名// 类型别名 type User { id: number name: string email: string } // 联合类型Union Type type Status pending | success | error const status: Status success // ✅ // const status2: Status failed // ❌ 错误不在联合类型中 // 交叉类型Intersection Type——合并多个类型 type User { id: number name: string } type Timestamp { createdAt: Date updatedAt: Date } type UserWithTimestamp User Timestamp const user: UserWithTimestamp { id: 1, name: 张三, createdAt: new Date(), updatedAt: new Date() }interface 与 type 的选型对比特性interfacetype扩展extends交叉类型重复声明会自动合并会报错适用场景对象形状、类联合类型、交叉类型、基本类型别名识别技巧看到interface→ 对象类型定义看到type→ 类型别名看到?→ 可选属性看到readonly→ 只读属性。4. 函数类型4.1 参数类型与返回值类型// 完整的函数类型注解 function add(a: number, b: number): number { return a b } // 箭头函数 const multiply (a: number, b: number): number { return a * b } // 无返回值 function log(message: string): void { console.log(message) } // 返回多种类型联合类型 function parseInput(input: string): number | string { const num parseFloat(input) return isNaN(num) ? input : num }4.2 可选参数与默认参数// 可选参数用 ? 标记 function greet(name: string, title?: string): string { return title ? ${title} ${name} : name } greet(张三) // 张三 greet(张三, 先生) // 先生 张三 // 默认参数 function greet2(name: string, title: string 朋友): string { return ${title} ${name} } greet2(李四) // 朋友 李四 greet2(李四, 博士) // 博士 李四4.3 把函数类型作为参数高阶函数是 TypeScript 类型安全的另一个重要收益// 接收函数作为参数 function calculate( a: number, b: number, operation: (x: number, y: number) number ): number { return operation(a, b) } calculate(10, 5, (x, y) x y) // 15 calculate(10, 5, (x, y) x * y) // 50 // 更清晰的方式先定义函数类型 type Operation (x: number, y: number) number function calculate2( a: number, b: number, operation: Operation ): number { return operation(a, b) }识别技巧看到(a: number, b: number) number→ 这是函数类型描述了参数和返回值看到: void→ 函数不返回值看到?→ 参数可选。这种回调参数带完整类型签名的写法在前端框架中随处可见——从课程站点的组件源码看Vue 的watch(source, callback)回调同样依赖这种函数类型约定例如 TypeAnnotationDemo.vue 中watch(locale, reset)用法理解函数类型是读懂现代前端代码的基础。5. 泛型Generics5.1 泛型的基本概念泛型让你可以编写不预先指定具体类型的函数、接口或类在使用时再确定类型——既能复用又保留类型安全// 泛型函数T 是类型变量 function identityT(arg: T): T { return arg } // 显式指定类型 const num1 identitynumber(42) // 类型是 number const str1 identitystring(hello) // 类型是 string // 类型推断TypeScript 能自动推断 const num2 identity(42) // 推断为 number const str2 identity(hello) // 推断为 string原文档嵌入的GenericDemo /演示对应 GenericDemo.vue。从源码看第 12-49 行它实现了一个reverseArray(arr)数组翻转函数并让读者在number[]与string[]两种类型间切换输入——这正是泛型要解决的问题同一个翻转数组的逻辑既能安全处理数字数组也能安全处理字符串数组而不必退化成any[]。5.2 泛型约束通过extends约束类型变量要求它满足某些条件// 约束 T 必须拥有 length 属性 interface HasLength { length: number } function logLengthT extends HasLength(arg: T): void { console.log(arg.length) } logLength(hello) // ✅ 字符串有 length logLength([1, 2, 3]) // ✅ 数组有 length // logLength(42) // ❌ 数字没有 length 属性5.3 泛型接口与泛型类// 泛型接口 interface BoxT { value: T getValue(): T } const numberBox: Boxnumber { value: 42, getValue: () 42 } const stringBox: Boxstring { value: hello, getValue: () hello } // 泛型类 class StorageT { private items: T[] [] add(item: T): void { this.items.push(item) } get(index: number): T { return this.items[index] } } const numberStorage new Storagenumber() numberStorage.add(1) numberStorage.add(2) // numberStorage.add(string) // ❌ 错误 const stringStorage new Storagestring() stringStorage.add(hello) // stringStorage.add(1) // ❌ 错误识别技巧看到T→ 泛型类型变量看到T extends SomeType→ 泛型约束看到ArrayT、PromiseT→ 内置泛型类型。6. 类型推断与实用技巧6.1 类型推断InferenceTypeScript 能从上下文自动推断类型// 变量初始化时的推断 const name 张三 // 推断为 string const age 25 // 推断为 number const isActive true // 推断为 boolean // 数组推断 const numbers [1, 2, 3] // 推断为 number[] const mixed [1, hello, true] // 推断为 (number | string | boolean)[] // 函数返回值推断 function add(a: number, b: number) { return a b // 推断返回值为 number }课程站点中的 TypeInferenceDemo.vue 就是该章节的交互演示帮助读者观察 TypeScript 在不同赋值场景下的推断结果。6.2 何时用推断、何时用显式注解推荐依赖推断的场景// ✅ 简单字面量赋值 const count 0 const name 张三 const isActive true // ✅ 可以推断的函数返回值 function getUserId(user: User) { return user.id // 推断为 number }推荐显式注解的场景// ✅ 函数参数必须显式 function add(a: number, b: number) { return a b } // ✅ 结构不明确的对象属性 const user: { id: number name: string metadata: Recordstring, any } { id: 1, name: 张三, metadata: {} // 可能被推断为 {}需要显式声明 } // ✅ 复杂的函数返回类型 function getUser(): User | null { // ... return null } // ✅ 公共 API 接口 export function calculateTotal(prices: number[]): number { return prices.reduce((sum, price) sum price, 0) }6.3 类型守卫Type Guards类型检查发生在编译期但运行时仍可能收到意外数据例如 AI 生成的代码、第三方 API 响应。类型守卫用于在运行时收窄类型// typeof 类型守卫 function processValue(value: string | number) { if (typeof value string) { // 这里 TypeScript 知道 value 是 string console.log(value.toUpperCase()) } else { // 这里 TypeScript 知道 value 是 number console.log(value * 2) } } // instanceof 类型守卫 class Dog { bark() { console.log(汪汪) } } class Cat { meow() { console.log(喵喵) } } function makeSound(animal: Dog | Cat) { if (animal instanceof Dog) { animal.bark() // TypeScript 知道这是 Dog } else { animal.meow() // TypeScript 知道这是 Cat } } // 自定义类型守卫type predicate interface User { name: string email: string } function isUser(value: any): value is User { return ( typeof value object value ! null typeof value.name string typeof value.email string ) } function processValue(value: unknown) { if (isUser(value)) { // 这里 value 被收窄为 User console.log(value.name) } }6.4 内置工具类型Utility TypesTypeScript 提供了一批开箱即用的工具类型配合interface使用极其高效interface User { id: number name: string email: string } // Partial所有属性变为可选 type PartialUser PartialUser // 等价于: { id?: number; name?: string; email?: string } // Required所有属性变为必填 type RequiredUser RequiredPartialUser // 等价于: { id: number; name: string; email: string } // Pick只保留指定属性 type UserBasicInfo PickUser, id | name // 等价于: { id: number; name: string } // Omit排除指定属性 type UserWithoutEmail OmitUser, email // 等价于: { id: number; name: string } // Record构造键值对对象类型 type UserRoles Recordstring, boolean // 等价于: { [key: string]: boolean }这些工具类型也是与 AI 协作的高频词汇只要能在提示词中说出参数接受PartialUserAI 就能准确生成符合预期的更新接口见下一章。7. Vibecoding 实战技巧把 TypeScript 融入 AI 工作流7.1 让 AI 生成类型安全的代码类型系统本身就是最好的提示词约束。对比两种提示词❌ 差的提示词给我写一个用户管理功能✅ 好的提示词用 TypeScript 写一个用户管理功能。 数据结构定义如下 interface User { id: number name: string email: string age: number } 需要实现 1. 获取用户列表返回 User[] 2. 创建用户接受 PartialUser返回 User 3. 更新用户接受 id 和 PartialUser返回 User 4. 删除用户接受 id返回 void 确保所有函数都有完整的类型注解。提示词中直接给出interface定义与逐函数的签名约束包括PartialUser这样的工具类型AI 的输出会显著更贴合可编译的代码。7.2 读懂 TypeScript 错误信息遇到报错不必慌最常见的四类错误及其含义如下错误信息含义解决方式Type X is not assignable to type Y类型 X 不能赋值给类型 Y检查类型是否匹配或做类型转换Property X does not exist on type Y类型 Y 上不存在属性 X检查属性名拼写或补充属性定义Argument of type X is not assignable to parameter of type Y参数类型不匹配检查调用函数时传入的参数类型Type X is missing the following properties from type Y类型 X 缺少 Y 的部分属性补全缺失的属性7.3 JavaScript 项目渐进式迁移 TypeScript已有 JS 项目不必一步到位可以分四步渐进迁移第一步把文件重命名为.ts# 例如 utils.js 重命名为 utils.ts mv utils.js utils.ts第二步修复明显的类型错误// 如果报错: Parameter a implicitly has an any type // 补上类型注解即可 function add(a: number, b: number) { return a b }第三步逐步补充类型定义// 先用 any 快速消除错误 function processUser(user: any) { // ... } // 之后再逐步细化为具体类型 interface User { id: number name: string } function processUser(user: User) { // ... }第四步开启严格模式// tsconfig.json { compilerOptions: { strict: true, // 开启严格模式 noImplicitAny: true, // 禁止隐式 any strictNullChecks: true // 严格检查 null/undefined } }注意strict: true已经隐含了noImplicitAny与strictNullChecks这里单独列出是为了让迁移者明确每一步在收紧哪一类检查。8. 符号识别速查与学习路径学完本教程后你应该能一眼识别这些符号符号/关键字含义: stringstring 类型的类型注解: number[]数字数组类型注解interface User对象类型定义接口type User 类型别名T泛型Generic类型变量extends接口继承或泛型约束?可选属性/可选参数readonly只读属性\|联合类型Union Type交叉类型Intersection Type对应的核心能力清单类型注解明确告诉 TypeScript 变量的类型接口定义对象结构与属性类型泛型编写可复用且类型安全的代码类型推断依赖 TypeScript 的自动类型推导类型守卫在运行时收窄类型工具类型Partial、Required、Pick、Omit、Record。当你卡住时可以这样向 AI 提问教程推荐的四个问题模板这个函数的类型注解怎么写参数是 X返回值是 Y帮我定义一个描述这个数据结构的接口……这个 TypeScript 错误是什么意思怎么修复怎么给这个泛型函数加约束确保 T 必须包含某个属性9. 在 easy-vibe 仓库中深入教程背后的实现如果你想在本地运行这套课程站点并查看教程页面与交互演示的真实源码可以按以下方式操作仓库为只读以下仅为查看与运行方式教程文档的多语言版本阿拉伯语版见 docs/ar-sa/appendix/3-browser-and-frontend/typescript.md中文版见 docs/zh-cn/appendix/3-browser-and-frontend/typescript.md各语言分卷en、de、es、fr、ja、ko、vi、zh-tw 等下均有同主题章节本文涉及的四个交互演示组件源码TypeAnnotationDemo.vue、InterfaceDemo.vue、GenericDemo.vue、TypeInferenceDemo.vue组件通过 主题注册文件 以懒加载方式挂载到 VitePress 主题第 611-614 行为对应的动态 import 映射这正是接口/契约思想在工程上的体现——文档里的TypeAnnotationDemo /标签与注册表中的组件名一一对应每个组件通过useI18n组合式函数加载各自的typescriptIntroLocale文案包实现同一演示组件在十余种语言下的界面本地化本地运行按照 package.json 中的 scripts 安装依赖后执行npm run dev启动开发服务器vitepress dev docs或npm run preview预览构建产物。小结TypeScript 的本质是在代码运行前拦截错误类型注解与接口让数据结构有了契约泛型让复用不再牺牲类型安全类型守卫与工具类型则覆盖了运行时校验与类型派生的常见需求。而在 vibecoding 工作流中这套类型系统更是你审查 AI 生成代码的第一道防线——把interface写进提示词把类型错误拦在编译期是这门课程及 easy-vibe 站点自身技术栈反复示范的工程习惯。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
