TypeScript 进阶 ===

目录

枚举-基本使用

枚举的值

数字枚举

字符串枚举

枚举类型的应用

any 类型

定义及作用

使用any的场景

隐式 any

小结

类型断言

类型断言的作用和应用场景

typeof

使用场景

泛型-基本介绍

泛型

泛型函数

调用泛型函数的格式

类型推断简化函数调用

泛型约束

添加泛型约束

指定更加具体的类型

添加约束

多个类型变量

泛型接口

泛型工具类型

Partial

Readonly

Pick

---

枚举-基本使用

enum，枚举。它用来描述一个值，该值只能是 一组命名常量 中的一个

没有type之前，用枚举比较多，现在用的少了。枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值

定义格式  

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

说明：

1. 使用 enum 关键字定义枚举

2. 一般约定首字符大写

使用格式  

枚举名.可取值

示例

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

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

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

解释:

1. 约定枚举名称以大写字母开头

2. 枚举中的多个值之间通过 ,（逗号）分隔

3. 定义好枚举后，直接使用枚举名称作为类型注解

枚举的值

枚举类型和ts中其他的类型不一样，枚举类型不仅仅是类型，还是一个值。

type定义的类型是没有值的  

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

枚举定义的类型是有值的。

数字枚举

默认情况下，枚举的值是数值。默认为：从 0 开始自增的数值

当然，也可以给枚举中的成员初始化值

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

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

字符串枚举

字符串枚举：枚举成员的值是字符串

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

小结

1. 枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表

2. 一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效

枚举类型的应用

 后端用0,1来标识性别，但是0，1在代码中不好读。

enum Gender {
        girl,
        boy
    }
    type User = {
        name: string,
        gender: Gender
    }

    const u1: User = {
        name: '小花',
        gender: Gender.girl
    }

    console.log(u1)

 

any 类型

定义及作用

any: 任意的。当类型设置为 any 时，就取消了类型的限制。

let obj: any = { x: 0 }

obj.bar = 100
obj()
const n: number = obj

 解释: 以上操作都不会有任何类型错误提示，即使可能存在错误（编译时不报错，可是运行时会报错）

使用any的场景

• 函数就是不挑类型。 例如，console.log() ； 定义一个函数，输入任意类型的数据，返回该数据类型

• 临时使用 any 来“避免”书写很长、很复杂的类型

隐式 any

1. 声明变量不提供类型也不提供默认值

2. 定义函数时，参数不给类型

小结

原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)  

类型断言

假设我们明确知道页面上有一个img，它的id是img。

const box = document.getElementById('img')
console.log(box.src) // ts报错

 注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 img 标签特有的 src等属性，无法操作 src 等 img标签特有的属性或方法。

类型断言的作用和应用场景

作用： 手动指定值的类型

场景：有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。

格式

关键字： as