TS学习笔记十：装饰器及三斜线指令

news2024/11/16 5:32:05

  本节介绍TS中的装饰器和三斜线指令， 装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。
  三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。

  1. 讲解视频

    20240116-205052装饰器


    TS学习笔记二十：三斜线指令

    104)(image-https://video-community.csdnimg.cn/vod-84deb4/901d2766b4d471eebfab5017e1e90102/snapshots/e0f8d1fe08404a27bbb052c04619311a-00005.jpg?auth_key=4859053547-0-0-7b5ee6117f96be71df4a2617251f66a1)(title-TS学习笔记二十：三斜线指令)]

  2. B站视频

    TS学习笔记十九：Mixins组件复用

    o(video-qGsTIynP-1706149194130)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=793984818)(image-https://img-blog.csdnimg.cn/img_convert/ced6f103f671e196372c6d5541657093.jpeg)(title-TS学习笔记十九：Mixins组件复用)]

    TS学习笔记十八：装饰器

    )]

  3. 西瓜视频
    https://www.ixigua.com/7324864397644562998
    在这里插入图片描述

一、装饰器

  装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。在ts中目前是实验性的特性，要启用需要在命令行或tsconfig.json里启用experimentalDecorators编译器选项，具体启用方式如下：
命令行：

tsc --target ES5 --experimentalDecorators

tsconfig.json：

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

  装饰器是一个特殊的类型声明，能够被附加到类声明、方法、访问符、属性、参数等上，使用@expr的形式进行附加，expr求值后必须为一个函数，会在运行时被调用，被装饰的声明信息作为参数传入，如下：

function sealed(target){
}

  定义后可以@sealed(‘’)的方式进行使用。
1. 装饰器工厂
  要定制一个装饰器并应用到一个声明上，需要写一个装饰器工厂，装饰器工厂是一个简单的函数，并返回一个表达式，此表达式在运行的时候调用。

function color(value: string) { // 这是一个装饰器工厂
    return function (target) { //  这是装饰器
        // do something with "target" and "value"...
    }
}

2.装饰器组合
  多个装饰器可以同时应用到一个声明上：

@a @b x
@a
@b
x

  可以在同一行，也可以在不同行，多个声明时求值方式与符合函数类型，即a(b(x))，具体如下：

  1. 由上至下依次对装饰器表达式求值
  2. 求值的结果会被当做函数，由下至上依次调用。
function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

  调用结果如下：

f(): evaluated
g(): evaluated
g(): called
f(): called

3. 装饰器求值
  类中不同声明上的装饰器的应用顺序如下：

  1. 参数装饰器，其次是方法，访问符，或属性装饰器应用到每个实例成员。
  2. 参数装饰器，其次是方法，访问符，或属性装饰器应用到每个静态成员。
  3. 参数装饰器应用到构造函数。
  4. 类装饰器应用到类。

4.类装饰器
  类装饰器在类声明之前被调用，应用于构造函数，可以用来监视，修改或替换类的具体定义，不能再声明文件.d.ts及外部上下文中使用。类装饰器的表达式会被当做函数调用，调用时类的构造函数当做其参数。如果类装饰器返回一个值，会使用提供的构造函数来替换类的声明。如果返回的是一个新的构造函数，需要手动处理原型链的内容，ts不会自动处理。

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

  上述示例当@sealed装饰器被执行时，会封闭此类的构造函数和原型，封闭后将不可扩展。

5.方法装饰器
  方法装饰器在声明一个方法之前，会被应用到方法的属性描述符上，可用来监视，修改或替换方法的定义，不能用在声明文件.d.ts、重载或者任何外部上下文中。方法装饰器的表达式会被当做函数调用，调用时传入以下三个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 成员的属性描述符。
      如果代码的目标版本小于es5，则成员的描述符为undefined。如果方法返回一个值，会被当做方法的属性描述符。如果目标版本小于es5，返回值会被忽略。
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    @enumerable(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}
function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}

  上述示例中当@enumerable(false)被调用时，会修改属性描述符的enumerable 。

6.访问器装饰器
  访问器装饰器声明在一个访问器声明之前，应用于访问器的属性描述符，可用来监视，修改和替换一个访问器的定义，不能在声明文件.d.ts或任何外部上下中。
  ts不允许同时装饰一个成员的get和set访问器，一个成员的所有装饰必须引用在文档顺序的第一个访问器上，因为装饰器应用于一个属性描述符时，已经联合了get和set访问器，不用分开声明。
  访问器装饰器表达式会在运行时当做函数被调用，调用时传入一下三个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 成员的属性描述符。
      代码输出目标小于es5,时成员属性描述符参数是undefined。如果访问器返回一个值，会被当做方法的属性描述符。如果代码目标小于es5时，返回值会被忽略。
class Point {
    private _x: number;
    private _y: number;
    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configurable(false)
    get x() { return this._x; }

    @configurable(false)
    get y() { return this._y; }
}
function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = value;
    };
}

7.属性装饰器
  属性装饰器声明在一个属性之前，不能在声明文件.d.ts及任何外部上下文中。属性装饰器表达式会在运行时当做函数被调用，调用时传入2个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。

  属性描述符不会做为参数传入属性装饰器，如果属性装饰器返回一个值，会被当做方法的属性描述符，如果目标小于es5返回值会被忽略。如果装饰器返回一个值，会被当做方法的属性描述符。

class Greeter {
    @format("Hello, %s")
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        let formatString = getFormat(this, "greeting");
        return formatString.replace("%s", this.greeting);
    }
}
import "reflect-metadata";
const formatMetadataKey = Symbol("format");
function format(formatString: string) {
    return Reflect.metadata(formatMetadataKey, formatString);
}
function getFormat(target: any, propertyKey: string) {
    return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

  上述示例中当@format(“Hello, %s”)被调用时，会添加一条这个属性的元数据，通过reflect-metadata库里的Reflect.metadata函数，当getFormat被调用时，会读取格式的元数据。

8.参数装饰器
  参数装饰器声明在一个参数之前，应用于类型构造函数或方法声明，不能用在声明文件.d.ts、重载或其它外部上下文里，参数装饰器表达式会被当做函数被调用，调用时传入3个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 参数在函数参数列表中的索引。

  参数装饰器只能用来监听一个方法的参数是否被传入，参数装饰器的返回值会被忽略。

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    @validate
    greet(@required name: string) {
        return "Hello " + name + ", " + this.greeting;
    }
}
import "reflect-metadata";

const requiredMetadataKey = Symbol("required");

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
    existingRequiredParameters.push(parameterIndex);
    Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<Function>) {
    let method = descriptor.value;
    descriptor.value = function () {
        let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
        if (requiredParameters) {
            for (let parameterIndex of requiredParameters) {
                if (parameterIndex >= arguments.length || arguments[parameterIndex] === undefined) {
                    throw new Error("Missing required argument.");
                }
            }
        }

        return method.apply(this, arguments);
    }
}

  上述示例中使用@required添加了元数据实体把参数标记为必须得，@validate装饰器包裹函数，在调用原先的函数前验证函数参数。
9.元数据
  reflect-metadata是处理元数据的库，不是es的标准库，需要额外引入，安装指令：npm i reflect-metadata --save。ts支持为带有装饰器的声明生成元数据，需要在命令行或jsconfig.json中开启emitDecoratorMetadata编译选项。
命令行：

tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata

jsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

  启用后，安装了reflect-metadata并引入的情况下，类型信息可以在运行时调用：

import "reflect-metadata";

class Point {
    x: number;
    y: number;
}

class Line {
    private _p0: Point;
    private _p1: Point;

    @validate
    set p0(value: Point) { this._p0 = value; }
    get p0() { return this._p0; }

    @validate
    set p1(value: Point) { this._p1 = value; }
    get p1() { return this._p1; }
}

function validate<T>(target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<T>) {
    let set = descriptor.set;
    descriptor.set = function (value: T) {
        let type = Reflect.getMetadata("design:type", target, propertyKey);
        if (!(value instanceof type)) {
            throw new TypeError("Invalid type.");
        }
    }
}

  ts编译器可通过@Reflect.metadata装饰器注入设计阶段的类型信息：

class Line {
    private _p0: Point;
    private _p1: Point;

    @validate
    @Reflect.metadata("design:type", Point)
    set p0(value: Point) { this._p0 = value; }
    get p0() { return this._p0; }

    @validate
    @Reflect.metadata("design:type", Point)
    set p1(value: Point) { this._p1 = value; }
    get p1() { return this._p1; }
}

二、Mixins

  mixin是一种创建可重用组件创建类的方式：

// Disposable Mixin
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }

}

// Activatable Mixin
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}

class SmartObject implements Disposable, Activatable {
    constructor() {
        setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    }

    interact() {
        this.activate();
    }

    // Disposable
    isDisposed: boolean = false;
    dispose: () => void;
    // Activatable
    isActive: boolean = false;
    activate: () => void;
    deactivate: () => void;
}
applyMixins(SmartObject, [Disposable, Activatable]);

let smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000);

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

  上述示例中定义了两个类，作为mixins，每个类都有自己的行为和功能：

// Disposable Mixin
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }

}
// Activatable Mixin
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}

  创建一个新的类，让其具有所有属性：

class SmartObject implements Disposable, Activatable {
// Disposable
isDisposed: boolean = false;
dispose: () => void;
// Activatable
isActive: boolean = false;
activate: () => void;
deactivate: () => void;
}

  示例中使用implements，把类当做接口使用，仅使用类的类型不继承具体的声明，为mixin创建出占位属性，在通过mixins混入定义的类，完成实现部分，这样就不用实现可以直接使用：

applyMixins(SmartObject, [Disposable, Activatable]);

  applyMixins会遍历mixins上的所有属性，并复制到目标上去，把之前的占位符属性替换成真正的实现代码：

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        })
    });
}

三、三斜线指令

  三斜线指令包含单个XML标签的单个注释，会做为编译器指令使用，三斜线指令只能放在包含它的文件的顶端，一个三斜线指令的前面只能出现单行或多行注释，如果出现在一个语句或声明之后，会被当做普通的单行注释，并不具有特殊含义。
  /// 用于声明文件间的依赖，用于告诉编译器在编译过程中要引入的额外的文件。
  使用–out或–outFile时，可以作为调整输出内容属性的一种方法。

  1. 预处理输入文件
      编译器会对输入文件进行预处理，预处理时解析所有的三斜线引用指令，此过程中额外的文件会加到编译过程中。
    引用不存在的文件会报错，一个文件用三斜线指令引用自己也会报错。
  2. 使用 --noResolve
      指定了–noResolve编译选项，三斜线引用将被忽略，不会增加新文件也不会改变改定文件的顺序。
    /// :
      此指令把一个文件标记成默认库，告诉编译器在编译过程中不要包含这个默认库，和命令行上使用–noLib相似，当传递了–skipDefaultLibCheck时，编译器只会忽略检查带有/// 的文件。

/// ：
  默认情况下生成的amd模块是匿名的，amd-module指令允许给编译器传入一个可选的模块名。
amdModule.ts：

///<amd-module name='NamedModule'/>
export class C {
}

编译后：

define("NamedModule", ["require", "exports"], function (require, exports) {
    var C = (function () {
        function C() {
        }
        return C;
    })();
    exports.C = C;
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1411450.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CQ 社区版 2.8.0 | 支持TiDB、StarRocks，新增列过滤算法、导出模式设置等

CQ 社区版 2.8.0 | 支持TiDB、StarRocks，新增列过滤算法、导出模式设置等

Hello&#xff0c;CloudQuery 社区版 2.8.0 已发布&#xff0c;本文将带大家详细解析本次更新的功能~&#xff08;完整的讲解视频可点击 &#x1f449;&#x1f3fb; CloudQuery 社区版2.8.0 功能讲解演示 本期亮点更新 新增支持数据源 TiDB、StarRocks数据保护新增列过滤脱敏…
阅读更多...
【iOS ARKit】人脸检测追踪基础

【iOS ARKit】人脸检测追踪基础

在计算机人工智能&#xff08;Artificial Inteligence,AI&#xff09;物体检测识别领域&#xff0c;最先研究的是人脸检测识别&#xff0c;目前技术发展最成熟的也是人脸检测识别。人脸检测识别已经广泛应用于安防、机场、车站、闸机、人流控制、安全支付等众多社会领域&#x…
阅读更多...
[C#]winform部署yolov7+CRNN实现车牌颜色识别车牌号检测识别

[C#]winform部署yolov7+CRNN实现车牌颜色识别车牌号检测识别

【官方框架地址】 https://github.com/WongKinYiu/yolov7.git 【框架介绍】 Yolov7是一种目标检测算法&#xff0c;全称You Only Look Once version 7。它是继Yolov3和Yolov4之后的又一重要成果&#xff0c;是目标检测领域的一个重要里程碑。 Yolov7在算法结构上继承了其前…
阅读更多...
C#使用RabbitMQ-2_详解工作队列模式

C#使用RabbitMQ-2_详解工作队列模式

简介 &#x1f340;RabbitMQ中的工作队列模式是指将任务分配给多个消费者并行处理。在工作队列模式中&#xff0c;生产者将任务发送到RabbitMQ交换器&#xff0c;然后交换器将任务路由到一个或多个队列。消费者从队列中获取任务并进行处理。处理完成后&#xff0c;消费者可以向…
阅读更多...
当你的Kindle被冻结或锁定时怎么办？这里提供几个解决办法

当你的Kindle被冻结或锁定时怎么办？这里提供几个解决办法

这篇文章解释了如果你的Kindle被锁住了该怎么办，以及修复被锁住的Kindle的所有最常见的方法。如果你的Kindle已经通电，但没有响应，那么你可以使用这些方法来修复它。 你的Kindle是不是冻结了太长时间以至于电池没电了，现在却无法打开？你也可以修复一个无法打开的Kindle。…
阅读更多...
利用Maven获取jar包

利用Maven获取jar包

我有一个习惯&#xff0c;就是程序不在线依赖网络的任何包。以前用C#时候虽然用Nuget找包&#xff0c;但是添加引用后又马上把Nuget引用删了&#xff0c;再把Nuget下载的dll拷贝到工程再引用dll。 这样做的好处是&#xff1a; 1.别人得到程序代码可以直接编译&#xff0c;不用…
阅读更多...
【寒假每日一题·2024】AcWing 4965. 三国游戏（补）

【寒假每日一题·2024】AcWing 4965. 三国游戏（补）

文章目录 一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、时间复杂度3、代码详解 一、题目 1、原题链接 4965. 三国游戏 2、题目描述 二、解题报告 1、思路分析 思路参考y总&#xff1a;y总讲解视频 &#xff08;1&#xff09;题目中的获胜情况分为三种&#xff…
阅读更多...
SQL查询数据库环境(dm8达梦数据库)

SQL查询数据库环境(dm8达梦数据库)

SQL查询数据库环境dm8达梦数据库 环境介绍 环境介绍 某些环境没有图形化界面,可以使用sql语句查询达梦数据库环境情况 SELECT 实例名称 数据库选项,INSTANCE_NAME 数据库选项相关参数值 FROM V$INSTANCE UNION ALL SELECT 授权用户,(SELECT AUTHORIZED_CUSTOMER FROM V$LICE…
阅读更多...
微软 Power Apps model drven app 模型驱动应用使用Plugin插件实现业务流程跳转阶段功能

微软 Power Apps model drven app 模型驱动应用使用Plugin插件实现业务流程跳转阶段功能

微软 Power Apps model drven app 模型驱动应用使用Plugin插件实现业务流程跳转阶段功能 模型驱动应用使用插件实现跳转业务流程阶段跳转功能 在实际操作中总会遇到使用业务流程的需求&#xff0c;那么如何使用plugin实现跳转阶段的功能呢 需求背景是主表上有业务流程&#x…
阅读更多...
vue 本地中导入 maptalks

vue 本地中导入 maptalks

1、进入 github 中 maptalks 文件下载页面&#xff08;https://github.com/maptalks/maptalks.js/releases&#xff09; 这里可能会有朋友应为网络问题打不开 github &#xff0c;可以查看作者另一篇关于解决该问题的文章&#x1f449;GitHub 打不开问题解决 2、将下载好的文件…
阅读更多...
为什么时序逻辑电路会落后一拍？

为什么时序逻辑电路会落后一拍？

1、时序逻辑电路落后一拍&#xff1f; FPGA初学者可能经常听到一句话&#xff1a;“时序逻辑电路&#xff0c;或者说用 < 输出的电路会延迟&#xff08;落后&#xff09;一个时钟周期。”但在仿真过程中经常会发现不符合这一“定律”的现象–明明是在仿真时序逻辑&#xff…
阅读更多...
2024年AI全景预测

2024年AI全景预测

欢迎来到 2024 年人工智能和技术的可能性之旅。 在这里&#xff0c;每一个预测都是一个潜在的窗口&#xff0c;通向充满创新、变革、更重要的是类似于 1950 年代工业革命的未来。 20 世纪 50 年代见证了数字计算的兴起&#xff0c;重塑了行业和社会规范。 如今&#xff0c;人工…
阅读更多...
VR全景如何引爆民宿热潮？

VR全景如何引爆民宿热潮？

“尔滨”旅游热还未消散&#xff0c;好看的风景、好吃的美食统统安排起来&#xff0c;但是不知道大家出游对住的环境有没有讲究呢&#xff1f;很多人喜欢民宿的原因&#xff0c;就是因为游玩一整天&#xff0c;希望有一个温馨舒适的住处&#xff0c;来缓解身体、精神上的疲劳。…
阅读更多...
中仕教育：事业单位考试考什么?

中仕教育：事业单位考试考什么?

事业单位考试分为两个阶段&#xff0c;分别是笔试和面试&#xff0c;考试科目包括公共科目和专业科目两部分。 公共科目内容是公共基础知识、职业能力测试或申论。一种形式为&#xff1a;公共基础知识职业能力测试或职业能力测试申论。另一种形式为&#xff1a;公共基础申论。…
阅读更多...
02-Redis持久化、主从与哨兵架构详解

02-Redis持久化、主从与哨兵架构详解

文章目录 Redis持久化RDB快照&#xff08;snapshot&#xff09;bgsave的写时复制(COW)机制AOF&#xff08;append-only file&#xff09;AOF重写RDB 和 AOF &#xff0c;我应该用哪一个&#xff1f; Redis 4.0 混合持久化Redis数据备份策略&#xff1a; Redis主从架构redis主从…
阅读更多...
Kerberos认证过程

Kerberos认证过程

Kerberos协议角色组成&#xff1a; Kerberos协议中存在三个角色&#xff0c;分别是&#xff1a; 客户端 (client)&#xff1a;发送请求的一方服务端&#xff08;server&#xff09;接受请求的一方钥匙分发中心(Key distribution KDC) 密钥分发中心又分为两个部分&#xff0…
阅读更多...
Leetcode—30. 串联所有单词的子串【困难】

Leetcode—30. 串联所有单词的子串【困难】

2023每日刷题&#xff08;九十五&#xff09; Leetcode—30. 串联所有单词的子串 实现代码 class Solution { public:vector<int> findSubstring(string s, vector<string>& words) {unordered_map<string, int> raw;// words单词个数int n words.siz…
阅读更多...
勒索袭击新方式，提防注册机中注入的勒索病毒！

勒索袭击新方式，提防注册机中注入的勒索病毒！

1 事件概述 近期&#xff0c;用户反馈称自己在使用某款“注册机”软件时候&#xff0c;系统中文件被不行加密。通过对受害用户提供的线索和样本进 行综合分析研判&#xff0c;发现了一款借助破解类工具进行传播的新型勒索软件&#xff0c;其会通过向桌面释放勒索信与收款码图片…
阅读更多...
STC89C51单片机

STC89C51单片机

本文为博主 日月同辉&#xff0c;与我共生&#xff0c;csdn原创首发。希望看完后能对你有所帮助&#xff0c;不足之处请指正&#xff01;一起交流学习&#xff0c;共同进步&#xff01; > 发布人&#xff1a;日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…
阅读更多...
Vue2 props组件通信

Vue2 props组件通信

一、父组件向子组件传值 1、流程图 2、父组件代码 <template><div class"app"><UserInfo:usernameusername:ageage:isSingleisSingle:carcar:hobbyhobby></UserInfo></div> </template><script> import UserInfo from .…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023