TypeScript 学习笔记总结(一)

news2024/11/18 15:41:44

ts学习笔记总结。

文章目录

  • 一、什么是TypeScript？
  • 二、TypeScript 环境搭建
  • 三、TS 类型声明
  • 四、TS 类型详解
  • 五、TS 类型总结
  • 六、TS 编译选项
    • 1. tsconfig.json的 作用
    • 2. tsconfig.json的 配置选项01
    • 3. tsconfig.json的 配置选项02
  • 七、Webpack 打包ts代码

一、什么是TypeScript？

JavaScript的超集。
在这里插入图片描述

二、TypeScript 环境搭建

步骤如下：
在这里插入图片描述

# 安装typescript环境
npm i -g typescript
# tsc命令测试：tsc(typescript compiler)
tsc

在这里插入图片描述

部分工具展示如下：
在这里插入图片描述

三、TS 类型声明

ts报错依然能转换为js文件：
在这里插入图片描述

如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测。
在这里插入图片描述

还可以指定函数参数和返回值类型：

// 可以指定函数参数的类型 以及 返回值的类型
function sum(a: number,b: number): number{
    return a + b;
}

let result = sum(123,456);

部分特殊情况，还会用到字面量进行类型声明：

// 1. 可以直接使用字面量进行类型声明
let a: 10;
a = 10;
// a = 11; 错误！
// 这样a就只能是10

// 2. 可以使用 | 来连接多个类型
let b: "male" | "female";
b = "male";
b = "female";

// 3. 联合类型：可以直接指定某几个类型用 | 或进行拼接。
let c: boolean | string;
c = true
c = "hello"

主要有以下几种类型：
在这里插入图片描述

四、TS 类型详解

any类型：

// any类型 表示的是任意类型。 一个变量设置类型为any后相当于对该变量关闭了TS的类型检测。
let d: any;
d = 10;
d = true;

let s: string

// d的类型是any，它可以赋值给任何变量。
s = d

在这里插入图片描述

unknown类型：表示未知类型的值。

  • unknown 实际上就是一个类型安全的any。
  • unknown 类型的变量，不能直接赋值给其他变量。
let e: unknown
e = 10
e = 'hello'
e = true

let s: string
// unknown类型就不可以进行赋值操作。
// s = e; 错误

两种方式来解决unknow的赋值问题：

// 方式一：使用类型断言，可以用来告诉解析器变量的实际类型是什么。
s = e as string
s = <string> e
// 方式二：使用typeof 进行判断操作
if (typeof e === 'string'){
    s = e
}

格式如下：
在这里插入图片描述

void类型：用来表示空(常用返回值)

// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn(): void{
    
}

never类型：表示永远不会返回结果。

// never 表示永远不会返回结果。
function fn(): never {
    throw new Error('报错了！中止执行')
}

object类型：

  • 注意指定的属性什么的。
// object表示一个js对象
let a: object
a = {}
a = function (){
}

// {} 用来指定对象中必备的一些属性
// 语法：{属性名:属性值,属性名?:属性值}  // ? 问号就是指的该属性有没有都可以，表示属性是可选的。
let b: {name:string}
b = {name:'abc'}
// b = {} 错误

// 一般属性是规定几个操作几个，也可以如下一样声明操作：
// [propName: string]: any 表示任意类型的属性：
let c: {name: string,[propName: string]: any }
c = {name: 'abc',age:18,gender:'男'}

let a: Function
// 函数声明：
let b: (a: number,b: number) => number
b = function (n1: number,n2: number): number {
    return 1
}

Array数组类型：

// string[] 表示字符串数组
let e: string[]
e = ['a','b','c','d']

// Array<number> 声明number类型的数组
let g: Array<number>
g = [1,2,3]

元组类型：元组就是固定长度的数组。

在这里插入图片描述

enum枚举类型：

enum Gender {
    Male = 0,
    Female = 1
}

let i: {name: string,gender: Gender}
i = {
    name: '张三',
    gender: Gender.Female
}

五、TS 类型总结

& ：与的用法。
在这里插入图片描述
在这里插入图片描述

type关键字 类型别名声明：

type myType = 1 | 2 | 3 | 4
let k: myType
let a: myType
let b: myType

六、TS 编译选项

1. tsconfig.json的 作用

# 编译 ts文件
tsc app.ts 
# -w 代表监视watch ，当文件内容发生改变的时候自动编译
tsc app.ts -w

tsconfig.json：ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译。
在这里插入图片描述

2. tsconfig.json的 配置选项01

include 用来指定哪些ts文件需要编译。

exclude 用来指定不需要编译的文件目录。

files 指定被编译文件的列表，只有需要编译的文件少时才会用到。

{
  /*
    tsconfig.json：ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译。
  */

  /*
    include 用来指定哪些ts文件需要编译。
      ** 表示任意目录
      * 表示任意文件
  */
  "include": [
    "./src/**/*"
  ],
  /*
    exclude 用来指定不需要编译的文件目录。
   */
  "exclude": [
    "./src/hello/**/*"
  ],
  /*
    files 指定被编译文件的列表，只有需要编译的文件少时才会用到。
      直接指定的某些文件。
  */
  "files": [
    "testtsss.ts"
  ]
}

例如：include配置后执行的效果如下
在这里插入图片描述

3. tsconfig.json的 配置选项02

针对 compilerOptions 编译器的选项 详解：

{
  /*
    tsconfig.json：ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译。
  */

  /*
    include 用来指定哪些ts文件需要编译。
      ** 表示任意目录
      * 表示任意文件
  */
  "include": [
    "./src/**/*"
  ],
  /*
     compilerOptions 编译器的选项
  */
  "compilerOptions": {

    // target 用来指定ts被编译为的ES版本。
    "target": "es2015",

    // module 指定要使用的模模块化编译的规范
    "module": "es2015",

    // lib 用来指定项目中要使用的库, 不指定的话就代表什么库都没有用到。
//     "lib": [
//       "dom" // 例如：前端的dom元素
//     ],

    // outDir 用来指定编译后文件所在目录
    "outDir": "./dist",

    // outFile 将代码合并为一个文件。设置outFile后，所有的全局作用域中的代码会合并到同一个文件中。
    "outFile": "./dist/app.js",

    // allowJs 是否对js文件进行编译，默认为false
    "allowJs": false,

    // checkJs 是否检查js代码是否符合语法规范，默认为false
    "checkJs": false,

    // removeComments 是否移除注释，默认为false
    "removeComments": false,

    // noEmit 不生成编译后的文件
    "noEmit": true,

    // noEmitOnError 当有错误时，不生成编译后的文件。
    "noEmitOnError": false,

    // strict 所有严格检查的总开关
    "strict": false,

    // alwaysStrict 用来设置编译后的文件是否使用严格模式，默认false。
    "alwaysStrict": false,

    // noImplicitAny 声明一个类型后，默认类型为any。允许不允许 出现隐式的any类型。
    "noImplicitAny": false,

    // noImplicitThis 允许不允许 出现不明确类型的this
    "noImplicitThis": false,

  }
}

在这里插入图片描述

七、Webpack 打包ts代码

第一步：创建一个webpack 、ts的项目。
项目初始化：

# 生成package.json配置文件
npm init -y 
# cnpm和npm一样的效果，cnpm要快一点。
# -D 开发依赖 , ts-loader：将typescript和webpack进行整合。webpack-cli：webpack的命令行工具
cnpm i -D webpack webpack-cli typescript ts-loader

第二步：配置webpack的webpack.config.js配置文件。

const path = require('path')

// webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename: "bundle.js"
    },

    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是 规则生效的文件
                // \.ts$表示配置所有ts结尾的文件。
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    }
}

第三步：创建配置tsconfig.json。

{
  "compilerOptions": {
  	// 使用ES6版本(2015版本就是ES6版本)
    "module": "ES2015",
    "target": "ES2015",
    "sourceMap": true
  },
}

第四步：配置package.json文件，添加build打包命令。

{
  "name": "demo-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",

	// fixme 添加后的打包命令如下：mode不添加会报错指定模式。
    "build": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

第五步：使用html-webpack-plugin插件，通过webpack来创建index.html。

npm i -D html-webpack-plugin

webpack.config.js文件如下：

const path = require('path')

// fixme 1. 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')

// webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename: "bundle.js"
    },
    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是 规则生效的文件
                // \.ts$表示配置所有ts结尾的文件。
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    // fixme 2. 配置Webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            // title: "自定义title"
            template: "./src/index.html"
        }),
    ]
}

第六步：安装一个dev-server，开发内置服务器。

npm i -D webpack-dev-server

配置package.json文件：

{
  "name": "demo-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development",
	// fixme 通过webpack命令来进行启动操作。
    "start": "webpack serve --open chrome.exe --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

第七步：通过使用clean-webpack-plugin插件来，清除dist目录。

npm i -D clean-webpack-plugin

webpack.config.js文件配置：

const path = require('path')

// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')

// fixme 1. 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename: "bundle.js"
    },
    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是 规则生效的文件
                // \.ts$表示配置所有ts结尾的文件。
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    // 配置Webpack插件
    plugins: [
    
        // fixme 2. 引入清除插件
        new CleanWebpackPlugin(),
        
        new HTMLWebpackPlugin({
            // title: "自定义title"
            template: "./src/index.html"
        }),
    ],

    // fixme 3. resolve 用来设置引用模块
    resolve: {
        // 告诉webpack .ts 或者 .js 结尾的就可以用来引用。
        extensions: ['.ts','.js']
    }
}

第八步：安装babel相关配置。

npm i -D @babel/core @babel/preset-env babel-loader core-js

babel就可以理解为是一个加载器，就像ts-loader一样加工。

webpack.config.js文件中，配置babel：

const path = require('path')

// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')

// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename: "bundle.js",

        // 告诉webpack不要使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是 规则生效的文件
                // \.ts$表示配置所有ts结尾的文件。
                test: /\.ts$/,

                // 配置加载器：
                use: [
                    // fixme 配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义的环境
                            presets:[
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容目标浏览器
                                        targets: {
                                            "chrome": "88"
                                        },
                                        // 指定core-js的版本
                                        "corejs":"3",
                                        // 使用corejs的方式 一般使用 usage 表示按需加载。
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader' // 要使用的loader
                ],
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    // 配置Webpack插件
    plugins: [
        // 引入清除插件
        new CleanWebpackPlugin({}),
        new HTMLWebpackPlugin({
            // title: "自定义title"
            template: "./src/index.html"
        }),
    ],

    // resolve 用来设置引用模块
    resolve: {
        // 告诉webpack .ts 或者 .js 结尾的就可以用来引用。
        extensions: ['.ts','.js']
    }
}

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

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

相关文章

Bayanay：一款基于Python开发的无线网络安全研究工具

Bayanay：一款基于Python开发的无线网络安全研究工具

关于Bayanay Bayanay是一款基于纯Python开发的无线网络安全研究工具&#xff0c;在该工具的帮助下&#xff0c;无论你身处何地&#xff0c;都可以轻松地对周围地区的无线网络安全状况进行研究与分析。 该工具可以通过使用HTML5的地理位置定位功能并结合Scapy获取到的SSID信息…
阅读更多...
LeetCode刷题系列 -- 25. K 个一组翻转链表

LeetCode刷题系列 -- 25. K 个一组翻转链表

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。你不能只是单纯的改变节点内部的值&…
阅读更多...
zabbix6,0创建监控项与触发器

zabbix6,0创建监控项与触发器

zabbix_server IP : 172.31.0.5:10051 zabbix_client IP : 172.31.0.9:10050 zabbix_client已经运行了zabbix-agent,这里我用的是版本2 一、 创建监控项 1、 在客户端创建监控脚本 /etc/zabbix/zabbix_agent2.d #默认配置文件路径 2、 创建配置文件&#xff0c;编写监控脚本…
阅读更多...
绿光GOQDs-SA氧化石墨烯量子点CdTe-FA-CS修饰CdTe-PEG-CS的制备

绿光GOQDs-SA氧化石墨烯量子点CdTe-FA-CS修饰CdTe-PEG-CS的制备

绿光GOQDs-SA氧化石墨烯量子点CdTe-FA-CS修饰CdTe-PEG-CS的制备今天小编分享制备GOQDs改性SA复合杂化膜&#xff0c;一起看看吧&#xff1a;GOQDs改性SA复合杂化膜的制备过程&#xff1a;将一系列不同分子量的CS及接枝壳聚糖用少量乙酸-乙酸钠溶液溶解后,加水稀释到一定浓度,用…
阅读更多...
经典文献阅读之--FlowFormer(Transformer结构光流估计)

经典文献阅读之--FlowFormer(Transformer结构光流估计)

0. 简介 对于视觉SLAM而言&#xff0c;除了使用特征点法来完成VIO以外&#xff0c;还可以使用光流法来完成VIO的估计。而传统的光流法受环境&#xff0c;光照变化严重&#xff0c;所以有时候会出现光流偏差等问题。所以现在有越来越多的工作朝着深度学习的方向扩展&#xff0c…
阅读更多...
卷积神经网络中的Conv层和BN层融合细节

卷积神经网络中的Conv层和BN层融合细节

BN层 批归一化层&#xff08;Batch Normallization&#xff09;是一种在卷积神经网络模型中大量使用&#xff0c;为了加速模型收敛的技术。为什么CNN 中引入 BN 层可以加速网络的收敛呢&#xff1f;因为将输入的样本数据或特征图&#xff0c;归一化后&#xff0c;改善了输入数…
阅读更多...
智云通CRM：如何在初次见面识别客户机会？

智云通CRM：如何在初次见面识别客户机会？

有一次&#xff0c;我给一家公司做CRM系统培训之后&#xff0c;他们公司的老总请我吃饭。那是我们第一次见面&#xff0c;在饭桌上&#xff0c;我和他聊天&#xff0c;说&#xff1a;“洛老师&#xff0c;你们的CRM系统功能真的很不错&#xff0c;帮我我解决了很多销售管理上的…
阅读更多...
设计模式面试题 一

设计模式面试题 一

第一题&#xff1a;阐述设计模式的责任链&#xff1f; 责任链模式定义&#xff1a; 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送 者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一 个对象处理它为止。 …
阅读更多...
Ruoyi-Cloud框架学习-【03 后端启动 + 前端启动】

Ruoyi-Cloud框架学习-【03 后端启动 + 前端启动】

打开运行基础模块&#xff08;启动没有先后顺序&#xff09; 记得在后台先启动Redis,不然会报错 RuoYiGatewayApplication &#xff08;网关模块 必须&#xff09; &#xff1a; 即前端所有访问需要通过网关而不是直接访问具体接口、网关会对后台的微服务进行转发 RuoYiAuth…
阅读更多...
虹科回顾 | 虹科云科技2022年深度好文

虹科回顾 | 虹科云科技2022年深度好文

2022年&#xff0c;我们一起学习了很多技术文章、优秀案例 我们的关键词是 数据库、BI、文件存储、高性能计算、数据管理、IT 下面一起来回顾虹科云科技过去一年的深度好文吧! 2022虹科云科技深度好文回顾 点击文字均可跳转到相关文章 数据库系列 ● 虹科产品 | 一文详解…
阅读更多...
springboot1

springboot1

让我们快速构建项目并且运行&#xff0c;他就是搭建程序的脚手架 尽可能减少一切xml的相关配置 快速创建一个spring boot的启动项目 在pom.xml中导入父类的启动器 引入父类的依赖 下面我们写一个web的启动器 这个启动器导入了之后 整个web项目需要的依赖也就导入了 并且把版…
阅读更多...
【MIUI刷机】旧机降级记录

【MIUI刷机】旧机降级记录

欢迎来到 Claffic 的博客 &#x1f49e;&#x1f49e;&#x1f49e; 前言&#xff1a; 小米MAX2是我的第一部小米手机&#xff0c;这款发布于2017年5月25日的小米手机已伴随我5年了&#xff0c;现在再次拿起这部手机&#xff0c;依然能勾起我对当时手机圈的记忆。 当时的我对手…
阅读更多...
顶顶通呼叫中心中间件(mod_cti基于FreeSWITCH)-群集方案

顶顶通呼叫中心中间件(mod_cti基于FreeSWITCH)-群集方案

群集方案 群集介绍 在大规模的外呼或者呼入系统&#xff0c;比如整个系统需要1万并发&#xff0c;单机最高也就3000-5000并发&#xff0c;这时候就需要多机群集了。顶顶通呼叫中心中间件使用redis数据库&#xff0c;多个FreeSWITCH(mod_cti)连接同一个redis就可以很容易的配置…
阅读更多...
基于乾元通多卡聚合智能通信系统的典型应用场景分析

基于乾元通多卡聚合智能通信系统的典型应用场景分析

紧急事态处置 城市公共安全包含自然灾害事故灾难、公共卫生事件、社会安全事件、事故灾难&#xff0c;在城镇化快速发展的今天&#xff0c;作为维护公共安全的职能部门&#xff0c;带来了新的挑战。 乾元通科技使用多径混传、多路聚合技术&#xff0c;开发出的智能融合通信设备…
阅读更多...
五款非常轻便的实用小工具

五款非常轻便的实用小工具

大伙们&#xff0c;开工大吉&#xff01; 1.系统清理——WiseCare365 WiseCare365是由WiseCleaner开发的一款用来管理&#xff0c;维护&#xff0c;配置以及解决电脑故障的适用于Windows操作系统的电脑的免费软件。其实Wise Care 365就是把这个公司之前推出的所有优化工具整合…
阅读更多...
Redmi GPro游戏本升级系统失败无法启动怎么办？

Redmi GPro游戏本升级系统失败无法启动怎么办？

Redmi GPro游戏本升级系统失败无法启动怎么办&#xff1f;有用户使用Redmi GPro电脑去进行电脑系统的升级时&#xff0c;出现了系统升级错误。在电脑关机重新启动之后&#xff0c;电脑出现了蓝屏的情况。那么遇到这个问题要怎么去进行解决呢&#xff1f;来看看具体的解决方法吧…
阅读更多...
美颜滤镜sdk常用的图形处理算法、代码分析

美颜滤镜sdk常用的图形处理算法、代码分析

美颜滤镜sdk目前在视频、图文社交平台中的使用率是非常高的&#xff0c;特别是短视频平台和直播平台。今天小编就为大家讲解一下美颜滤镜sdk经常用到的算法和代码。 一、预处理算法、检测算法 在采集完图像后&#xff0c;首先会对图像进行预处理操作。保证图像的对比度清晰&…
阅读更多...
c:out标签怎么是使用？

c:out标签怎么是使用？

在JSP页面中&#xff0c;最常见的操作就是向页面输出一段文本信息&#xff0c;为此&#xff0c;Core标签库提供了一个<c:out>标签&#xff0c;该标签可以将一段文本内容或表达式的结果输出到客户端。如果<c:out>标签输出的文本内容中包含了需要进行转义的特殊字符&…
阅读更多...
css字体、文本

css字体、文本

无衬线字体(sans-serif) 特点: 1.文字笔画粗细均匀&#xff0c;并且首尾无装饰 2.场景:网页中大多采用无衬线字体 3.常见该系列字体:黑体、Arial3 衬线字体(serif) 特点: 1.文字笔画粗细不均&#xff0c;并且首尾有笔锋装饰 2.场景:报刊书籍中应用广泛 3.常见该系列字体:宋体、…
阅读更多...
音视频处理

音视频处理

问题背景&#xff1a;h265格式的视频转码之后ios存在兼容问题 原转码命令&#xff1a; /usr/local/bin/ffmpeg -y -i /data/tmp/1672385812000-tks3wa.mp4 -vf scale720:1281 -r 30 /data/tmp/1672385812000-tks3wa_720.mp4 -hide_banner解决办法&#xff1a; // 原视频格式为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023