深入学习TS的高阶语法（泛型、类型检测、内置工具）

概要

本文主要深入学习TS的高阶语法，对TS的类型检测机制进行分析得知TS类型检测机制是鸭子模型，对TS的重点泛型进行学习，最后学习TS的部分内置工具

一.TS的类型检测

1.鸭子类型

• 如果一只鸟看起来像鸭子、游泳像鸭子、叫声像鸭子，那么这只鸟就可以被称为鸭子
• 即只关心属性和方法，不关心是不是对应的类型

class Person {
    constructor(public name: string, public age: number){
        this.name = name
        this.age = age
    }
}

// 限制参数类型是Person类
function fn(arg: Person){}



fn(new Person('wuu', 20))

// 不会报错，因为根据鸭子类型
// {name: "wuu", age: 20}有Person类对应的属性和方法
fn({name: "wuu", age: 20})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.严格的字面量类型检测

 每个对象字面量最初都被认为是“新鲜的（fresh）”。

 当一个新的对象字面量分配给一个变量或传递给一个非空目标类 型的参数时，对象字面量指定目标类型中不存在的属性是错

​ 误的。

 当类型断言或对象字面量的类型扩大时，新鲜度会消失。

 新鲜度消失后，不再进行类型检测。

二.TS的泛型

1.基本使用

• 定义参数来使用

◼ 这里我们可以使用两种方式来调用它：

​  方式一：通过 <类型> 的方式将类型传递给函数；

​  方式二：通过类型推导（type argument inference），自动 推到出我们传入变量的类型：

​ ✓ 在这里会推导出它们是 字面量类型的，因为字面量类型对 于我们的函数也是适用的

// 定义了一个泛型T
function fn<T>(item: T){
    console.log(item);
}

// 使用方式
// 1. 通过<类型> 的方式将类型传递给函数；
// 给泛型T，指明类型是字符串
fn<string>('1')

// 2.通过类型推导，自动推到出我们传入变量的类型：
fn(1)
1
2
3
4
5
6
7
8
9
10
11
12

2.传递多个参数

◼ 平时在开发中我们可能会看到一些常用的名称：

​  T：Type的缩写，类型

​  K、V：key和value的缩写，键值对

​  E：Element的缩写，元素

​  O：Object的缩写，对象

interface IObj<T, N> {
    name: T
    age: N
    slogan: T
}

const obj: IObj<string, number> = {
    name: 'wuu',
    age: 20,
    slogan: '哈哈哈'
}
1
2
3
4
5
6
7
8
9
10
11

3.泛型接口

interface IObj<T, N> {
    name: T
    age: N
    slogan: T
}

const obj: IObj<string, number> = {
    name: 'wuu',
    age: 20,
    slogan: '哈哈哈'
}
1
2
3
4
5
6
7
8
9
10
11

4.泛型类

class Person<T> {
    constructor(public _name: T){
        this._name = _name
    }
    
}

const p = new Person<string>('wuu')

export{}
1
2
3
4
5
6
7
8
9
10

5.泛型约束

◼ 有时候我们希望传入的类型有某些共性，但是这些共性可能不是在同一种类型中：

​  比如string和array都是有length的，或者某些对象也是会有 length属性的；

​  那么只要是拥有length的属性都可以作为我们的参数类型，那 么应该如何操作呢？

/* 实现方法一 */
interface ILength {
    length: number
}

// 通过继承，这样就限制必须有length属性
// 因为泛型通过类型推导，此时item传递过来的类型就是参数的类型
function fn<T extends ILength>(item: T){
    return item
}
// 类型： const res1: "哈哈哈"
const res1 = fn('哈哈哈')


/* 实现方法二： */
// item的类型被写死成ILength了
function fn1(item: ILength) {
    return item
} 

// 类型：const res2: ILength
const res2 = fn1('哈哈哈')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

◼ 在泛型约束中使用类型参数

​  你可以声明一个类型参数，这个类型参数被其他类型参数约 束；

◼ 举个栗子：我们希望获取一个对象给定属性名的值

​  我们需要确保我们不会获取 obj 上不存在的属性；

​  所以我们在两个类型之间建立一个约束；

/* 实现方法一 */
interface IType {
    name: string
    age: number
}

// 此时传递的参数只能是IType类型的key值
// 相当于是把key的值变成联合类型继承给了T
function fn<T extends keyof IType>(item: T){
    return item
}

const res1 = fn('name')
1
2
3
4
5
6
7
8
9
10
11
12
13

6.映射类型（了解）

三.TS的知识扩展

1.模块的使用

◼ 我们需要先理解 TypeScript 认为什么是一个模块。

​  JavaScript 规范声明任何没有 export 的 JavaScript 文件都应 该被认为是一个脚本，而非一个模块。

​  在一个脚本文件中，变量和类型会被声明在共享的全局作用域 将多个输入文件合并成一个输出文件，或者在 HTML使用多

◼ 如果你有一个文件，现在没有任何 import 或者 export，但是你希望它被作为模块处理，添加这行代码：

export {}
1

– 内置类型导入

• TS中可以支持单类型导入

◼ 你需要使用 type 前缀 ，表明被导入的是一个类型

import type {IType} from './01.ts的基本使用'

const obj: IType = {
    name: 'wu',
    age: 19
}
1
2
3
4
5
6

2.类型的查找

• .d.ts文件
• 里面只放类型声明文件，不能写逻辑代码

3.第三方库的类型导入

• 例如使用react时，react没有对应的 .d.ts文件，所以需要下载对应的类型文件
• 在npm已经有了对应的提示
• 根据提示去下载对应的包

4.declare 声明文件

• 在使用ts时，ts可能不认识我们要导入的文件

   比如在开发vue的过程中，默认是不识别我们的.vue文件的

   比如在开发中我们使用了 jpg 这类图片文件，默认typescript也是不支持的

   比如导入的第三方库没有对应的类型声明

// 可以加大括号，大括号里面是这个文件里有什么东西
declare module '*.vue' 

declare module '*.jpg'
declare module '*.png'
1
2
3
4
5

5.内置工具

• Partial

  ◼ 用于构造一个Type下面的所有属性都设置为可选的类型

• Required

  ◼ 用于构造一个Type下面的所有属性全都设置为必填的类型，这个工具类型跟 Partial 相反。

• Readonly

  ◼ 用于构造一个Type下面的所有属性全都设置为只读的类型，意味着这个类型的所有的属性全都不可以重新赋值。

• Record<Keys, Type>

  ◼ 用于构造一个对象类型，它所有的key(键)都是Keys类型，它所有的value(值)都是Type类型。

• Pick<Type, Keys>

  ◼ 用于构造一个类型，它是从Type类型里面挑了一些属性Keys

• Omit<Type, Keys>

  ◼ 用于构造一个类型，它是从Type类型里面过滤了一些属性Keys

• Exclude<UnionType, ExcludedMembers>

  ◼ 用于构造一个类型，它是从UnionType联合类型里面排除了所有可以赋给ExcludedMembers的类型。

• Extract<Type, Union>

  ◼ 用于构造一个类型，它是从Type类型里面提取了所有可以赋给Union的类型。

• NonNullable

  ◼ 用于构造一个类型，这个类型从Type中排除了所有的null、undefined的类型

• ReturnType

  ◼ 用于构造一个含有Type函数的返回值的类型。

• InstanceType

  ◼ 用于构造一个由所有Type的构造函数的实例类型组成的类型。

小结

本文主要深入学习TS的高阶语法，对TS的类型检测机制进行分析得知TS类型检测机制是鸭子模型，对TS的重点泛型进行学习，最后扩展部分内置工具
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助，麻烦点个赞和收藏方便回看，点点关注 谢谢