Typescript 凭什么可以和 JavaScript 并肩作战(3)—TypeScript 类型转换实用方法(下)

zidea
340 阅读3分钟

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

虽然 TypeScript 为我们 JavaScript 提供类型系统，可以定义类型来达到不同 developers 之间信息传递。但是我们不希望定义过多类型，还是希望能够适当控制类型产生。

有的时候我们发文章时候，总是想做到大而全，当然是好事，不过这还是需要时间，一个提升过程。当然不排除有些人上来就可以写的很好，但是我相信这样人毕竟是少数。自己现在回头看自己文章，错别字、不通顺、逻辑上问题比比皆是，今天写相对于自己是有进步，这是自己一点关于写作的一点心得而已。

上一次分享中介绍了一些常用使用类型例如 Partial 、Required 和 Readonly 等这些类型转换工具吧，暂且就叫工具吧，这里类型是在原有类型基础对类型进行操作、或者说通过对现有类型的属性进行映射而创建一个新的类型，这样做好处就是避免创建过多类型，通过对现有的类型进行变换从而得到一个新的类型。

type TutOptions = Partial<Tut>

class Tut{
    title:string;
    lesson:number;
    update(tut:TutOptions){
        Object.assign(this, tut)
    }
}

let machineLearningTut = new Tut();
machineLearningTut.title = "machine learning";
machineLearningTut.lesson = 12;

machineLearningTut.update({
    lesson:16
})

console.log(machineLearningTut.lesson)
  • 定义一个类 Tut ，定义 2 个属性为 title 和 lesson 分别是 string 和 number 类型。其中定义方法用于更新 Tut。
  • update 方法接收一个参数类型类型为TutOptions 也就是 Tut 部分属性，这是之前已经介绍过的内容
  • 其实这里就是下面的简写
interface TutOptions{
    title?:string;
    lesson?:number;
}

接下来我们来具体实现一下，看看如何实现一个自己的 Partial

type MyPartial<T> = {
    [P in keyof T]?: T[P]
}

type TutOptions =  MyPartial<Tut>;
  • type MyPartial<T> 创建一个新的类型(type)
  • T 基于类型 T
  • [P in keyof T] 表示遍历类型 T 所有的属性
  • ?: 表示这些属性是可选的

接下里我们进一步来看一看，这里在原有 T 类型定义一个该 T 属性可选类型，然后在此类型上追加一个属性 timestamp。

type TimestampPartial<T> = {
    [P in keyof T]?: T[P];
}&{timestamp:Date}

type TutWithTimestamp = TimestampPartial<Tut>

通过 Nullable 操作符可以将类型 T 的每一个属性 P 添加一个 null可选类型

type Nullable<T> = {
    [P in keyof T]: T[P] | null;
}

Myreadonly 这里 MyReadonly<T> 是一个生成类型的函数接受一个类型返回一个新的类型。Writable<T> 类型

type MyReadonly<T> = {
    readonly[P in keyof T]:T[P];
}

在 MyReadonly<T> 将一个类型所有属性设置为只读readonly


type Writable<T> = {
    -readonly [P in keyof T]: T[P];
}

在 MyReadonly<T> 将一个类型所有属性设置为非只读的，也就是可读写

type MyPick<T, K extends keyof T> = {
    [P in K]: T[P];
}

type levelTut = MyPick<Tut, "title"|"description">

文章可能不算什么长篇大论，不过还是下来一番功夫，整理好后分享给大家，便于大家理解 TypeScript 中的类型转换工具背后原理，希望对大家有所帮助，如果喜欢我们的分享，请为我点赞、收藏和关注一键三连。

avatar
文章
阅读
粉丝