build(www): 添加 Drone CI 流水线配置

- 新增 .drone.yml 文件用于定义 CI/CD 流程 - 配置了基于 Docker 的部署步骤 - 设置了工作区和卷映射以支持持久化数据 - 添加了构建准备阶段和 Docker 部署阶段 - 定义了环境变量和代理设置 - 配置了 artifacts 目录的处理逻辑 - 添加了 timezone 映射以确保时间同步 - 设置了 docker.sock 映射以支持 Docker in Docker
2025-11-01 13:36:00 +08:00
commit 22e48d9558
272 changed files with 44007 additions and 0 deletions
--- a/blogs/frontend/typescript.md
+++ b/blogs/frontend/typescript.md
@@ -0,0 +1,284 @@
+---
+title: Typescript-基本语法
+date: 2022-02-27
+sidebar: 'auto'
+tags:
+ - TypeScript
+categories:
+ - JavaScript
+---
+## 1 Typescript安装
+- 安装命令: `npm i typescript -g`
+- 使用Typescript命令查看安装的版本号: `tsc -v`
+- 生成配置文件tsconfig.json: `tsc -init`
+
+### 1.1 tsc常用编译参数
+
+|<div style="width:120px">编译参数</div>|说明|
+|:--|:--|
+|--help | 显示帮助信息
+|--module | 载入扩展模块
+|--target | 设置 ECMA 版本
+|--declaration | 额外生成一个 .d.ts 扩展名的文件。`tsc ts-hw.ts --declaration` 以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
+|--removeComments | 删除文件的注释
+|--out | 编译多个文件并合并到一个输出的文件
+|--sourcemap | 生成一个 sourcemap (.map) 文件。sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。
+|--module noImplicitAny | 在表达式和声明上有隐含的 any 类型时报错
+--watch | 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。
+
+
+## 2 Typescript基础类型
+
+|<div style="width:80px">数据类型</div>|<div style="width:80px">关键字</div>|描述|
+|:--|:--|:--|
+|任意类型|	any	| 声明为 any 的变量可以赋予任意类型的值。`let x:any`
+|数字类型|	number	|双精度 64 位浮点值。它可以用来表示整数和分数。`let num:number`
+|字符串类型|	string|一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
+|布尔类型|	boolean	|表示逻辑值：true 和 false。
+|数组类型	|无	|声明变量为数组。`let arr:number[];let arr:Array<number>;// 泛型定义`
+|元组	|无	|元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。`let x:[string, number] = ['string', 15]`
+|枚举|	enum	| 枚举类型用于定义数值集合。`enum Color{Red, Green};// 没有赋值默认从0开始`
+|void|	void	|用于标识方法返回值的类型，表示该方法没有返回值。`function hello(): void {}`
+|null	|null	|表示对象值缺失。
+|undefined|	undefined	|用于初始化变量为一个未定义的值
+|never	|never	|never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
+
+
+## 3 Typescript接口
+
+### 3.1 属性类型接口
+```ts
+// 对传入对象的属性约束, 以下是一个约束属性接口
+interface User{
+    username: string;
+    password?: string; // 可选传递
+}
+
+function save(user:User):void{
+    console.log(user)
+}
+
+let info = {
+    username: "张三",
+    password: "qwe123",
+    age: 15     // 额外传递的参数
+}
+// 传递一个自定义对象的参数需要有必选参数, 其他的属性不会进行检查
+save(info)
+// 如果直接进行对象传递那么会进行类型的检查
+save({
+    username: "张三",
+    password: "qwe123"
+})
+```
+
+### 3.2 函数类型接口
+```ts
+// 定义一个函数类型的接口
+interface encrypt {
+    (key: string, value: string): string;
+}
+// 既然类型定义为接口类型(参数列表可以不用写类型), 那么就得符合接口的类型
+let md5: encrypt = (key, value): string => {
+    return `MD5://${key}.${value}`
+}
+// 发现类型换成any也行, 因为any能接受所有类型
+let sha1: encrypt = (key: any, value: any): any => {
+    return `SHA1://${key}.${value}`
+}
+console.log(md5("qwe", "123"))
+// 但是发现还是会被类型约束, 所以就算定义了any类型也没有什么起效
+// sha1(123, 564) // 错误写法
+console.log(sha1("asd", "zxc"))
+```
+
+### 3.3 可索引型接口
+```ts
+// 可索引型数组接口, []中为number, 返回值为string
+interface CustomArr {
+    [index: number]: string;
+}
+let arr: CustomArr = ['111', '222']
+console.log(arr[1])
+
+// 可索引型对象接口, key为string, value为string
+interface CustomObj {
+    [index: string]: string;
+}
+let obj: CustomObj = {name: 'zhang', sex: '男'}
+console.log(obj['name'])
+console.log(obj.sex)
+```
+
+### 3.44 类类型接口
+与面向对象语言相似(Java)
+
+## 4 Typescript泛型
+软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。
+
+通俗理解：泛型就是解决类、接口、方法的复用性、以及对不特定数据类型的支持。
+
+## 5 Typescript装饰器
+> 对修饰器的实验支持功能在将来的版本中可能更改。
+>
+> 在"tsconfig"或"jsconfig"中设置"experimentalDecorators"选项以删除此警告。
+>
+> "experimentalDecorators":true // 启用对ES7装饰器的实验性支持。
+
+装饰器是一种特殊类型的声明，它能够被附加到类、方法、属性或参数上，可以修改类的行为，通俗的讲装饰器就是一个方法，可以注入到类、方法、属性或参数上来扩展类、方法、属性或参数的功能。常见的装饰器有：类装饰器、方法装饰器、属性装饰器、参数装饰器。
+
+装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参），装饰器是过去几年中JS最大的成就之一，已是ES7的标准特性之一。
+
+### 5.1 类修饰器
+ 类装饰器: 普通装饰器(无法传参)
+    ```ts
+    function logClass(param: any){
+        // 获取到的参数是该实例化对象
+        console.log(param)
+        // 在这里可以对实例话对象进行动态挂载数据
+        param.prototype.apiUrl = 'http://localhost'
+        param.prototype.run = () => {
+            console.log("动态扩展的run方法")
+        }
+    }
+    
+    // 该类装饰器不能传递参数
+    @logClass
+    class HttpClient {}
+    
+    let http:any = new HttpClient()
+    console.log(http.apiUrl)
+    http.run()
+    ```
+
+ 类装饰器: 装饰器工厂(可传参)
+    ```ts
+    function logClass(...params: string[]) {
+        return function(target: any) {
+            // target是当前类的对象
+            console.log(target)
+            // params是装饰器中传递的参数, 可以定义多个参数
+            target.prototype.apiUrl = params[0] + params[1]
+        }
+    }
+    
+    @logClass('http://localhost', "/api/users")
+    class HttpClient{}
+    
+    let http: any = new HttpClient()
+    console.log(http.apiUrl)
+    ```
+
+### 5.2 属性修饰器
+属性装饰器会被应用到属性描述上，可以用来监视、修改或者替换属性的值。
+
+属性装饰器会在运行时传入下列2个参数：
+- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
+- 成员的名字。
+```ts
+function logProperty(params: string) {
+    return function(target: any, attr: any) {
+        // 装饰器传递的参数
+        console.log(params)
+        // 给类的属性挂载数据
+        target[attr] = params
+    }
+}
+
+class HttpClient {
+    @logProperty("http://localhost")
+    apiUrl: string | undefined;
+
+    getApiUrl() {
+        console.log(this.apiUrl)
+    }
+}
+
+let http: HttpClient = new HttpClient()
+http.getApiUrl()
+```
+
+### 5.3 方法修饰器
+方法装饰器会被应用到方法描述上，可以用来监视、修改或者替换方法定义。
+
+方法装饰器会在运行时传入下列3个参数：
+- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
+- 成员的名字。
+- 成员的属性描述符。
+```ts
+class HttpClient {
+    public url: any | undefined;
+
+    @get("http://localhost")
+    getData() {
+        console.log(this.url);
+    }
+}
+
+function get(param: string){
+    return function(target: any, methodName: any, desc: any){
+        console.log(target)
+        console.log(methodName)
+        console.log(desc)
+        // 可以通过类的原型对象target对该实例进行数据挂载
+        target.url = param
+        target.run = function(){
+            console.log('run')
+        }
+        // 可以修改装饰器所放置方法的实现, 以下的代码就是获取该方法的内容
+        console.log(desc.value)
+    }
+}
+
+let http: any = new HttpClient()
+http.getData()
+http.run()
+```
+
+### 5.4 参数修饰器
+参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据 ，传入下列3个参数：
+- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
+- 方法的名字。
+- 参数在函数参数列表中的索引。
+```ts
+function logParams(params: any) {
+    return function (target: any, methodName: any, paramsIndex: any) {
+        console.log(target);
+        console.log(methodName);
+        console.log(paramsIndex);
+        target.apiUrl = params;
+    }
+}
+
+class HttpClient {
+    getData(name: string, @logParams("10086") uuid: any) {
+        console.log(uuid);
+    }
+}
+
+let http: any = new HttpClient();
+http.getData('zhang', 123456);
+console.log(http.apiUrl);
+```
+
+### 5.5 修饰器的执行顺序
+装饰器执行顺序：++属性 > 方法 > 方法参数 > 类++
+
+如果有多个**同类型**的装饰器, 那么会++从后往前执行++
+
+## 6 Typescript模块化
+模块化的好处
+- 防止命名冲突
+- 代码复用
+- 高维护性
+
+模块功能主要由两个命令构成：export 和 import。
+- export 命令用于规定模块的对外接口
+- import 命令用于输入其它模块提供的功能
+
+## 7 Typescript命名空间
+命名空间：在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内，同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export关键字对外暴露。
+
+命名空间和模块的区别：
+- 命名空间：内部模块，主要用于组织代码，避免命名冲突。
+- 模块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。