TypeScript入门教程(二)

接上一篇内容,了解基础入门请参考# TypeScript入门教程(一)

今天继续更新另外几种类型

1.枚举

1.定义

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

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

2.格式

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

说明：

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

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

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

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

3.枚举的值

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

type定义的类型是没有值的:

type NewType = number | string

console.log(NewType)  // 输出类型是没有意义的
复制代码

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

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

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

使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。

4.数字枚举

默认情况下，枚举的值是数值。默认为：从 0 开始自增的数值
当然，也可以给枚举中的成员初始化值

// 定义初始值为10 后面的类型会基于10来自增长 Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

// 不适用自增长 自定时枚举类型的值
enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }
复制代码

5.字符串枚举

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

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}
复制代码

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

7.小结

枚举与上一篇讲到的字面量类型 + 联合类型组合的功能类似，都用来表示一组明确的可选值列表
一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效

2.any

1.any类型作用

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any类型来标记这些变量：

 // 定义notSure变量的类型为any 在之后的代码给个它赋值不同类型也不会报错
let notSure: any = 4
notSure = 'maybe a string instead'
notSure = false
复制代码

当你只知道一部分数据的类型时，any类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：

// list的类型为数组 数组中的值为任意类型
let list: any[] = [1, true, "free"]
list[1] = 100;
复制代码

2.隐式 any

在不声明类型的时候默认为any类型的情况,以下两种情况:

声明变量不提供类型也不提供默认值
定义函数时，参数不给类型

3.类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

1.格式

关键字： as

const 变量 = 值 as 类型

2.应用场景

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

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

上述方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 img 标签特有的 src等属性，无法操作 src 等 img标签特有的属性或方法。此时我们使用类型断言改造上述代码:

// img标签的类型为 HTMLImageElement
const box = document.getElementById('img') as HTMLImageElement
console.log(box.src)  // 没有报错
复制代码

as关键字后面的类型应该是一个更加具体的类型（HTMLImageElement 是 HTMLElement 的子类型）

小技巧获取dom元素的类型:
谷歌浏览器为例

点击调试工具左上角的箭头,在网页中找到想查询的元素并点击
在控制台输出$0.__proto__就可以看到当前dom的类型了

3.typeof

JS 中提供了 typeof 操作符，用来在 JS 中获取数据的类型:

console.log(typeof 'Hello world')
复制代码

TS 也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型（类型查询）

1.使用场景

根据已有变量的值，反向推断出获取该值的类型，来简化类型书写

2.格式

type 类型 = typeof 常量

3.示例

const res = { name: '给我一个div', city: '武汉',  skills: ['js', 'css'] }

type Stu = typeof res

function fn(obj:Stu) {
    // 这里写 obj. 就会有提示
    obj.skills
}

fn(res)
复制代码

4.泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能

泛型，顾名思义，就是可以适用于多个类型，使用类型变量比如T帮助我们捕获传入的类型，之后我们就可以继续使用这个类型。本质是参数化类型，通俗的将就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和函数的创建中，分别成为泛型类，泛型接口、泛型函数

1.泛型函数

1.1创建泛型函数的格式

function fn<Type>(value: Type): Type { return value }
// 上面的Type只是一个名字而已，可以改成其他的

function fn<T>(value: T): T { return value }
复制代码

语法：在函数名称的后面写 <>(尖括号)，尖括号中添加类型变量，比如此处的 Type。

类型变量 Type，是一种特殊类型的变量，它处理类型而不是值
该类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)
因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型
类型变量 Type，可以是任意合法的变量名称

1.2调用泛型函数的格式

const num = fn<number>(10)
const str = fn<string>('a')
复制代码

语法：在函数名称的后面添加 <>(尖括号)，尖括号中指定具体的类型，比如，此处的 number
当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到
此时，Type 的类型就是 number，所以，函数fn参数和返回值的类型也都是 number

同样，如果传入类型 string，函数 id 参数和返回值的类型就都是 string
这样，通过泛型就做到了让 id 函数与多种不同的类型一起工作，实现了复用的同时保证了类型安全

1.3类型推断简化函数调用

function fn<T>(value: T): T { return value }
// 省略 <number> 调用函数
let num = fn(10)
let str = fn('a')
复制代码

在调用泛型函数时，可以省略 <类型> 来简化泛型函数的调用
此时，TS 内部会采用一种叫做类型参数推断的机制(了解类型推论)，来根据传入的实参自动推断出类型变量 Type 的类型
比如，传入实参 10，TS 会自动推断出变量 num 的类型 number，并作为 Type 的类型

2.泛型约束

默认情况下，泛型函数的类型变量 T 可以代表多个类型，这导致无法访问任何属性比如，fn('a') 调用函数时获取参数的长度：

function fn<T>(value: T): T {
  // 这里value. 不会有提示
  console.log(value.length)// 这里会报错
  return value
}
fn('a')
复制代码

解释：Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length
此时，就需要为泛型添加约束来收缩类型(缩窄类型取值范围)

添加泛型约束

添加泛型约束收缩类型，主要有以下两种方式：

指定更加具体的类型
添加约束

1.指定更加具体的类型

比如，：可以接收任意类型的数组。

将类型修改为 Type[](Type 类型的数组)，因为只要是数组就一定存在 length 属性，因此就可以访问了

function fn<Type>(value: Type[]): Type[] {
  console.log(value.length)
  return value
}
复制代码

2.添加约束

比如，要求传入T类型必须要有length属性。

// 创建一个接口
interface ILength { length: number }

// T extends ILength 添加泛型约束
function fn<T extends ILength>(value: T): T {
  console.log(value.length)
  return value
}

fn('abc') // Ok
fn([1,2,3]) // Ok
复制代码

解释:

创建描述约束的接口 ILength，该接口要求提供 length 属性
通过 extends 关键字使用该接口，为泛型(类型变量)添加约束
该约束表示：传入的类型必须具有 length 属性

注意:传入的实参(比如，数组)只要有 length 属性即可（类型兼容性)

3.多个类型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束) 比如，创建一个函数来获取对象中属性的值：

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')
复制代码

解释:

添加了第二个类型变量 Key，两个类型变量之间使用 , 逗号分隔。
keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型。
本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是：'name' | 'age'
类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性

// Type extends object 表示： Type 应该是一个对象类型，如果不是对象类型，就会报错

function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key]
}

getProperty({a:1, b:2}, 'a')
复制代码

4.泛型接口

在接口中使用泛型来使用，以增加其灵活性，增强其复用性


interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}

let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']
复制代码

在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口。
接口的类型变量，对接口中所有其他成员可见，也就是接口中所有成员都可以使用类型变量。
使用泛型接口时，需要显式指定具体的类型

5.泛型工具

泛型工具类型:TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作

说明:它们都是基于泛型实现的(泛型适用于多种类型，更加通用)，并且是内置的，可以直接在代码中使用。这些工具类型有很多，本篇博客介绍以下3个:

1.Partial

Partial用来基于某个Type来创建一个新类型，新类型中所有的属性是可选的。格式

type OldType = {}
type newType = Partial <OldType>
复制代码

示例

用来构造(创建)一个类型，将 Type 的所有属性设置为可选项?。

type Props =  {
  id: string
  children: number[]
}

type PartialProps = Partial<Props>
复制代码

解释:构造出来的新类型 PartialProps 结构和 Props 相同，但所有属性都变为可选的。

2.Readonly

Readonly <Type> 用来构造一个类型，将 Type 的所有属性都设置为 readonly(只读)。

type Props =  {
  id: string
  children: number[]
}

type ReadonlyProps = Readonly<Props>
复制代码

解释:构造出来的新类型 ReadonlyProps 结构和 Props 相同，但所有属性都变为只读的。

let props: ReadonlyProps = { id: '1', children: [] }
// 错误演示
props.id = '2'
复制代码

当我们想重新给 id 属性赋值时，就会报错:无法分配到 "id" ，因为它是只读属性。

3.Pick

Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。

type Props = {
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>
复制代码

解释:

Pick 工具类型有两个类型变量:
1 表示选择谁的属性
2 表示选择哪几个属性。
其中第二个类型变量，如果只选择一个则只传入该属性名即可。
第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。

TypeScript入门教程(一)