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

最新推荐文章于 2024-05-09 00:00:45 发布

CssHero

最新推荐文章于 2024-05-09 00:00:45 发布

阅读量1.3k

点赞数 39

文章标签： typescript javascript 前端学习

本文链接：https://blog.csdn.net/CssHero/article/details/136235621

版权

文章目录

概要

本文主要深入学习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})

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

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

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

误的。

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

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

二.TS的泛型

1.基本使用

定义参数来使用

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

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

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

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

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

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

// 2.通过类型推导，自动推到出我们传入变量的类型：
fn(1)

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: '哈哈哈'
}

3.泛型接口

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

const obj: IObj<string, number> = {
    name: 'wuu',
    age: 20,
    slogan: '哈哈哈'
}

4.泛型类

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

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

export{}

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('哈哈哈')

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

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

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

 我们需要确保我们不会获取 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')

6.映射类型（了解）

三.TS的知识扩展

1.模块的使用

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

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

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

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

export {}

– 内置类型导入

TS中可以支持单类型导入

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

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

const obj: IType = {
    name: 'wu',
    age: 19
}

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'

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的构造函数的实例类型组成的类型。