7. TypeScript 对象及接口

7.1 对象概述

生活中，对象是一个具体的事物，比如：你的电脑、你的手机、古力娜扎、周杰伦（周董）等都是对象。
程序员都知道：万物皆对象。
这些具体的事物，都有自己的特征和行为：

特征：

你的电脑：尺寸、重量、价格等
你的手机：品牌、屏幕大小、颜色等
古力娜扎：年龄、身高、三围等

行为：

你的电脑：浏览网页、写代码等
你的手机：播放视频、吃鸡等
古力娜扎：演电影、配音等

TypeScript 中的对象，是对生活中具体事物的抽象，使得我们可以通过代码来描述具体的事物。

TS 中的对象，也是由特征和行为组成的，它们有各自专业的名称：属性（特征）和方法（行为）。

• 理解 TS 中的对象：一组相关属性和方法的集合，并且是无序的。

// 演示对象：
{
	name: '周杰伦',
	gender: '男',
	height: 175,
	sing: funtion () {
		console.log('故事的小黄花 从出生那年就飘着')
	}
}

疑问：为什么要有对象？
需求：使用 TS 代码描述周杰伦。

• 方案一：使用多个变量

let name: string = '周杰伦'
let gender: string = '男'
let height: number = 175
function sing() { ... }

缺点：一个变量只能存储一个数据，多个变量之间没有任何关联（相关性）。

• 方案二：使用数组，一次可以存储多个数据：

['周杰伦', '男', 175, function sing() { ... }]

缺点：不知道数组中的每个元素表示什么。
正确姿势：使用对象，对象在描述事物（一组相关数据）时，结构更加清晰、明了。

{ name: '周杰伦', gender: '男', height: 175, sing: function () { ... }}

总结：
对象：一组相关属性和方法的集合，并且是无序的。
在 TS 中，如果要描述一个事物或一组相关数据，就可以使用对象来实现。

7.2 创建对象

注意：先学习对象的基本使用，再学习对象的类型注解（对象的类型注解类似于对象自身的语法）。
对象的语法

let person = {}

此处的 {}（花括号、大括号）表示对象。而对象中没有属性或方法时，称为：空对象。

对象中的属性或方法，采用键值对的形式，键、值之间使用冒号（:）来配对

键（key）-> 名称 ，值（value）-> 具体的数据。
多个键值对之间，通过逗号（,）来分隔（类比数组）。

现在，对象person具有两个属性：

let person = { name: '刘老师', age: 18 }

属性和方法的区别：值是不是函数，如果是，就称为方法；否则，就是普通属性。

let person = {
	sayHi: function () {
		console.log('大家好，我是一个方法')
	}
}

注意：函数用作方法时可以省略function后面的函数名称，也叫做匿名函数。
函数没有名称，如何调用？
此处的sayHi相当于函数名称，将来通过对象的sayHi就可以调用了。
如果一个函数是单独出现的，没有与对象关联，我们称为函数；否则，称为方法。

7.3 接口

7.3.1 对象的类型注解

TS 中的对象是结构化的，结构简单来说就是对象有什么属性或方法。
在使用对象前，就可以根据需求，提前设计好对象的结构。
比如，创建一个对象，包含姓名、年龄两个属性。
思考过程：1 对象的结构包含姓名、年龄两个属性 2 姓名 -> 字符串类型，年龄 -> 数值类型 3 创建对象。

这就是对象的结构化类型（左侧），即：对该对象值（右侧）的结构进行类型约束。

或者说：建立一种契约，约束对象的结构。

总结：
TS 中的对象是结构化的，在使用对象前，就可以根据需求，提前设计好对象的结构。
对象的结构化类型（类型注解）：建立一种契约，约束对象的结构。
注意点：类型注解中键值对的值为类型！

7.3.2 对象方法的类型注解

let person: {
	sayHi: () => void
	sing: (name: string) => void
	sum: (num1: number, num2: number) => number
}

箭头（=>）左边小括号中的内容：表示方法的参数类型。
箭头（=>）右边的内容：表示方法的返回值类型。
方法类型注解的关键点：1 参数 2 返回值。
注意：技巧是辅助，更重要的是理解。

7.3.3 接口的使用

直接在对象名称后面写类型注解的坏处：1 代码结构不简洁 2 无法复用类型注解。
接口：为对象的类型注解命名，并为你的代码建立契约来约束对象的结构。
语法：

interface 表示接口，接口名称约定以I开头。

推荐：使用接口来作为对象的类型注解。

7.4 取值和存值

7.4.1 取值

取值，即：拿到对象中的属性或方法并使用。
获取对象中的属性，称为：访问属性。
获取对象中的方法并调用，称为：调用方法。

• 访问属性

let jay = { name: '周杰伦', height: 175 }

需求：获取到对象（jay）的name属性。

console.log(jay.name)

说明：通过点语法（.）就可以访问对象中的属性。

技巧：在输入点语法时，利用VSCode给出来的提示，利用上下键快速选择要访问的属性名称。

• 调用方法

let jay = {
	sing: function () {
		console.log('故事的小黄花 从出生那年就飘着')
	}
}

需求：调用对象（jay）的sing方法，让他唱歌。

jay.sing()

说明：通过点语法（.）就先拿到方法名称，然后，通过小括号调用方法。

7.4.2 存值

存值，即修改（设置）对象中属性的值。

let jay = { name: '周杰伦', height: 175 }

需求：将对象（jay）的name属性的值修改为’周董’。

jay.name = '周董'

解释：先通过点语法获取到name属性，然后，将新值’周董’赋值给该属性。

console.log(jay.name) // 周董

注意：设置的新值，也必须符合该属性的类型要求！
注意：几乎不会修改对象中的方法。

7.5 内置对象

对象的两种来源：1 自己创建 2 其他人创建（编程语言自带或第三方）。

内置对象，是 TS/JS 自带的一些基础对象，提供了TS开发时所需的基础或必要的能力。

已经用过的内置对象：数组。

1.学习内置对象，需要学什么？ 常用属性和方法
2.怎么学？ 查文档