← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达
← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达

对象类型应用

在上一章《对象类型》中,我们学习了对象的基础知识:如何创建对象、访问属性和类型推断。现在让我们学习对象类型在实际开发中的重要应用。

对象数组:处理多个对象

在游戏中,我们经常需要同时管理多个角色、道具或敌人。对象数组就是解决这个问题的完美工具。

数组中的对象类型

加载代码编辑器...

重点:TypeScript的类型推断逻辑

TypeScript 推断对象数组类型的逻辑与数字数组完全相同:

  1. 分析数组中所有元素的结构
  2. 找到所有元素的共同类型
  3. 生成对应的数组类型
// 数字数组的推断过程
// TypeScript 看到: [85, 92, 78, 90]
// 所有元素都是: number
// 推断结果: number[]

// 对象数组的推断过程
// TypeScript 看到: [
//   { name: "勇者", level: 15, score: 100 },
//   { name: "法师", level: 12, score: 80 }
// ]
// 所有元素都是: { name: string, level: number, score: number }
// 推断结果: { name: string, level: number, score: number }[]

重点:对象数组类型的结构分解

{ name: string, level: number, score: number }[] 的含义:

  • { name: string, level: number, score: number }:数组中每个元素的对象类型
  • []:数组标记,表示这是一个包含多个对象的数组
  • 组合起来:专门存放特定结构对象的数组类型

访问数组元素的对比

不同类型数组的访问方式对比:

加载代码编辑器...

链式访问语法详解:characters[0].name

让我们分解这个访问的过程:

characters[0].name

访问步骤分解:

  1. 第一步:characters[0]

    • characters 是数组
    • [0] 访问数组的第一个元素
    • 得到:{ name: "勇者", level: 15, score: 100 } (一个对象)
  2. 第二步:.name

    • 对第一步得到的对象使用点号 .
    • 访问该对象的 name 属性
    • 得到:"勇者" (一个字符串)

更多访问示例:

加载代码编辑器...

修改数组元素的对比

1. 修改整个数组元素

我们可以直接替换数组中的某个元素:

加载代码编辑器...

2. 修改对象的属性

对于对象数组,我们还可以修改对象内部的属性:

加载代码编辑器...

3. 常见的数组操作对比

加载代码编辑器...

核心要点总结

  • 对象数组:元素是复杂对象,可以整体替换,也可以修改内部属性
  • 访问方式:都使用 数组[索引] 访问元素,对象数组支持 点号.属性 访问属性
  • 链式访问:数组[索引].属性名 是最常用的访问模式

重点:常见类型错误

TypeScript会确保数组中的所有对象都符合相同的类型结构:

加载代码编辑器...

手动指定数组类型

我们也可以手动指定数组的类型:

加载代码编辑器...

函数中的对象类型:参数与返回值

函数中使用对象类型可以让代码更加安全和可维护。让我们看看最常见的应用场景。

函数接受对象参数

加载代码编辑器...

函数返回对象类型

函数也可以返回特定结构的对象:

加载代码编辑器...

章节总结

通过这节课,我们从基础的对象类型进阶到了实际应用场景:

核心技能掌握

  1. 对象数组类型:{ name: string, level: number, score: number }[]
  2. 链式访问:数组[索引].属性名 的访问方式
  3. 数组元素修改:整体替换对象或修改对象属性
  4. 函数中的对象类型:作为参数和返回值的类型声明
  5. 类型安全性:TypeScript 确保所有对象都符合相同的类型结构

实践要点

  • 类型推断一致性:TypeScript 对对象数组的推断逻辑与基础数组相同
  • 结构化类型系统:关注对象的属性结构,而非变量名称
  • 函数参数验证:TypeScript 严格检查函数参数的类型匹配
  • 代码可维护性:明确的类型声明让代码更加健壮

对象类型是TypeScript的重要特性,掌握它将为后续学习更复杂的数据结构打下坚实基础!

Previous lesson
Previous
对象类型
Next
自定义类型
Next lesson