这是我参与「第四届青训营」笔记创作活动的第3天
在这次字节跳动青训营活动中，我获益良多

15.对象类型

15.1单独使用

15.1.1 格式

方法有两种写法：普通函数和箭头函数。
const 对象名: { 属性名1：类型1，属性名2：类型2，方法名1(形参1: 类型1，形参2: 类型2)：返回值类型, 方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型 } = { 属性名1: 值1，属性名2：值2 }
可选属性用 ?
const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }

15.1.2 示例

const goodItem:{name: string, price: number, func: ()=>string } = {
name: '手机',
price: 2000,
func:function(){ return '打电话' }
}

15.2 类型别名

15.2.1 示例

// 创建类型别名 type Person = { name: string， age: number sayHi(): void }

// 使用类型别名作为对象的类型： let person: Person = {
name: '小花',
age: 18
sayHi() {}
}

function f1 (p: Persion) :void {

}

15.2.2 练习-定义一个对象类型

{
type Stu={
name:string,
gender:string,
grade:number,
height:string,
study():void,
play:()=>{}
}

const stu1:Stu={
name:'小明',
gender:'男',
grade:79,
height:'170cm',
study(){
console.log('小明喜欢学习英语');
},
play:()=>{
console.log('小明喜欢玩电脑游戏');
return {}
}
}

console.log(stu1);
}

16.接口

场景
当一个对象类型被多次使用时，有如下两种方式来来描述对象的类型，以达到复用的目的：

类型别名，type
接口，interface

16.1 格式

interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}

16.2 示例

{ interface IStu {
name:string,
gender:string,
grade:number,
height:string,
study():string,
play:()=>void
}

const stu1:IStu={
name:'小明',
gender:'男',
grade:79,
height:'170cm',
study(){
console.log('小明喜欢学习英语');
return '小明喜欢学习英语'
},
play:()=>{
console.log('小明喜欢玩电脑游戏');
// return {}
}
}
console.log(stu1);

}
解释：

使用 interface 关键字来声明接口
接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
声明接口后，直接使用接口名称作为变量的类型
16.3 接口和类型的区别
interface（接口）和 type（类型别名）的对比：

相同点：都可以给对象指定类型

不同点:

接口，只能为对象指定类型。它可以继承。类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名推荐：能使用 type 就用 type

// 接口的写法 interface IPerson {
name: string,
age: number
}

const user1：IPerson = {
name: 'a',
age: 20
}

// type的写法
type Person = {
name: string,
age: number
}
const user2：Person = {
name: 'b',
age: 20
}

16.4 接口继承

16.4.1 背景

比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface IPoint2D { x: number; y: number }
interface IPoint3D { x: number; y: number; z: number }

16.4.2 分析

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

16.4.3 继承-格式

interface 接口2 extends 接口1 {
属性1：类型1， // 接口2中特有的类型
...
}

16.4.4 继承-示例

interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
z: number
}
解释：

使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)
17.元组Tuple
元组是一种特殊的数组。有两点特殊之处

它约定了的元素个数
它约定了特定索引对应的数据类型
17.1 示例

let position: [number, number] = [39.5427, 116.2317]

17.2 实际应用-约定useState的返回值类型

useState的返回值是一个数组，第一个元素是age，第二个是修改age的函数
{ function useState (a:number):[number,(newA:number)=>void]{
const fn=(newA:number)=>{
a=newA
} return [a,fn]
}

const [age,setAge]=useState(100)
setAge(300)
console.log(useState(300));
}

18. 字面量类型

任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用，此时，就称为是字面量类型

18.1 字面量的作用

单个字面量没有什么用处，它一般和联合类型 一起使用，用来表示一组明确的可选值列表。

例如：约定 Gender类型只能取girl和boy这两个字符串其中之一。
type Gender = 'girl' | 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误

18.2 示例

1. redux 中的actionType。它只能取固定值

type ActionType = 'ADD_TODO' | 'DEL_TODO'
function reducer(type:ActionType) {
if(type === 'ADD_TODO') }

2.游戏中，游戏的方向键值只能是上、下、左、右中的任意一个

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
console.log(direction)
}

// 调用函数时，写上''，就会有类型提示：
changeDirection('up')
优势：相比于 string 类型，使用字面量类型更加精确、严谨

19.枚举enum

定义: 枚举（enum）的功能类似于字面量类型+联合类型组合的功能，来描述一个值，该值只能是一组命名常量中的一个。

19.1 基本使用

19.1.1 格式

enum 枚举名 { 可取值1, 可取值2,.. }

说明：

使用 enum 关键字定义枚举
一般约定首字符大写

19.1.2 示例

// 定义枚举类型 enum Direction { Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
console.log(direction)
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过点（.）语法访问枚举的成员
changeDirection(Direction.Up)

19.2 枚举的值

19.2.1 枚举的值

// type定义的类型是没有值的 - 不能console.log
type NewType = number | string
console.log(NewType) // 输出类型是没有意义的

// 创建枚举
enum Direction { Up, Down, Left, Right }

// 枚举是有值的 - 可以console.log
console.log(Direction.Up)

19.2.2 数字枚举

// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

enum Direction { Up = 2, Down = 3, Left = 8, Right = 16 }

19.2.3 字符串枚举

enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
} 注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

19.3 应用场景

例如：后端用 0, 1来标识性别，但是0，1在代码中不好读，此时可以用枚举来约定
enum Gender {
girl,
boy
}
type User = {
name: string,
gender: Gender
}

const u1: User = {
name: '小花',
gender: Gender.girl // 写代码的时候，可以利用代码提示
}

console.log(u1)

TypeScript基础入门【下】