使用Angular框架开发工作中，实现文件下载业务时，我们可以使用ANgular自带的HttpClient。下面我们就封装一下HttpClient实现文件下载，当接口返回文件流正常下载，返回json信息时也能返回，让使用者自行处理。



# 下载
HttpRequest.ts
```
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpUrlEncodingCodec } from "@angular/common/http";
import { Injectable, Component } from "@angular/core";
import { throwError } from "rxjs";
import { catchError, map } from "rxjs/operators";

import { environment } from "src/environments/environment";


@Injectable({
    providedIn: 'root'
})
export class HttpRequest{ 
    public downFileBlobPromise(url: string, data = {}) {
        let options: any = {}
        let header: { [name: string]: string } = {}
        header['Content-Type'] = 'application/x-www-form-urlencoded'
        header['Accept'] = '*/*'
        options['headers'] = header
        options['responseType'] = "blob"
        options['observe'] = "response"
        let obj = Object.assign({}, options, { params: data })
        return new Promise((resolve, reject) => {
            this.http.get(url, obj).subscribe(async res => {
                const txt = await this.convertRes2Blob(res)
                resolve(txt)
            }, err => {
                reject(err)
            })
        })
    }

    private async convertRes2Blob(response: any) {

        if (!response.headers.has("content-disposition")) {
            const blob = new Blob([response.body], { type: 'application/octet-stream' })
            const resultJson = await this.readBlob(blob)
            return resultJson
        }
        const fileName = this.getFileName(response)
        const blob = new Blob([response.body], { type: 'application/octet-stream' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(blob, fileName)
            return null
        } else {
            const blobUrl = window.URL.createObjectURL(blob)
            const tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = blobUrl
            tempLink.setAttribute('download', fileName)

            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
            window.URL.revokeObjectURL(blobUrl)
            return null
        }
    }

    private getFileName(response: any) {
        const encode = response.headers.get('content-type')?.match(/charset=(.*)/) ? response.headers.get('content-type').match(/charset=(.*)/)[1] : null
        let fileName: string = response.headers.get('content-disposition').match(/filename=(.*)/)[1].replaceAll("\"", "")
        if (encode && encode == 'ISO8859-1') {
            const fn = escape(fileName)
            fileName = decodeURI(escape(fileName)).replace(new RegExp("%3A", "gm"), ":")
        } else {
            fileName = decodeURI(fileName)
        }
        return fileName

    }

    private readBlob(blob:Blob){
        const f = new FileReader()
        f.readAsText(blob, "UTF-8")
        return new Promise((resolve,reject) => {
            f.onload = (evt: any) => {              
                const re = evt.target.result                
                const result = JSON.parse(re)
                resolve(result)
            }

            f.onerror = (evt:any) => {
                reject(evt)
            }
        })
        
    }
}

```

使用
```

constructor(
    private router: Router,
    private service: AccountIdentifyService,
    private confirmationService: ConfirmationService,
    private toast: Toast,
    private req: HttpRequest,
  ) { }
  
 export() {
    this.exportLoading = true
    this.req.downFileBlobPromise(`koa2/download/2.txt`, param).then((res:any) => {
      this.exportLoading = false
      if(res){
        this.toast.error(res.mess)
      }else{
        this.toast.success("下载成功")
      }
      
    }).catch(err => {
      this.exportLoading = false
      this.toast.showError("下载异常")
    })
  }
```

后端文件下载接口示例,使用koa2写的demo
```
/** 文件下载 */
router.get("/download/:filename",async function(ctx,next){
  const filename = ctx.params.filename;

  if(filename != "1.txt"){
    setTimeout(() => {
      ctx.body = { 
        resultStat: "1",
        mess:"文件不存在",
      };
      return 
    }, 5000);
    
  }

  //request里面切出标识符字符串
  let requestUrl = ctx.request.originalUrl;
  //获取资源文件的绝对路径
  let filePath = path.resolve(__dirname + "/uploads/" + decodeURI(filename));
  console.log(filePath);
  let resHred = readFile(ctx.headers.range, filePath);
  ctx.status = resHred.code
  ctx.set(resHred.head);
  ctx.set('Content-Disposition', `attachment; filename=${encodeURIComponent(filename)}`);
  ctx.set('Content-Type', 'application/octet-stream');
  let stream = fs.createReadStream(filePath, resHred.code == 200 ? {} : { start: resHred.start, end: resHred.end });
  stream.pipe(ctx.res);
  // //也可使用这种方式。
  // stream.on('data', e => ctx.res.write(e));
  // // 接收完毕
  // stream.on('end', e => ctx.res.end());
  ctx.respond = false;
  return
})

```

# 下载进度监控
进一步改善我们封装类实现文件下载进度监控
```ts
import { HttpClient, HttpEvent, HttpEventType } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { filter, map } from "rxjs/operators";

@Injectable({
    providedIn: 'root'
})
export class FileHttpRequest {

    constructor(private http: HttpClient) {

    }

    download(url: string, params: any) {
        let options: any = {}
        let header: { [name: string]: string } = {}
        header['Content-Type'] = 'application/x-www-form-urlencoded'
        header['Accept'] = '*/*'
        options['headers'] = header
        options['responseType'] = "arraybuffer"
        options['observe'] = "events"
        options["reportProgress"] = true

        options = Object.assign(options, { params })
        console.log(options);

        return new Promise((resolve, reject) => {
            this.http.get(url, options).pipe(
                map(event => this.getEventMessage(event)),
                filter(f => f != null)
            ).subscribe(async res => {
                const txt = await this.getFileFromStream(res)
                resolve(txt)
            }, err => {
                console.log(err);
                reject(err)

            })
        })

    }

    private getEventMessage(event: any): ArrayBuffer {
        console.log(event);

        switch (event.type) {

            case HttpEventType.DownloadProgress:
                // 计算出下载进度
                const percentDone = Math.round(100 * event.loaded / event.total);
                console.log(event, percentDone);
                return null;

            case HttpEventType.Response:
                return event;

            default:
                return null;
        }
    }

    private getFileName(response: any) {
        debugger
        const encode = response.headers.get('content-type')?.match(/charset=(.*)/) ? response.headers.get('content-type').match(/charset=(.*)/)[1] : null
        let fileName: string = response.headers.get('content-disposition').match(/filename=(.*)/)[1].replaceAll("\"", "")
        if (encode && encode == 'ISO8859-1') {
            const fn = escape(fileName)
            fileName = decodeURI(escape(fileName)).replace(new RegExp("%3A", "gm"), ":")
        } else {
            fileName = decodeURI(fileName)
        }
        return fileName

    }

    private readBlob(blob:Blob){
        const f = new FileReader()
        f.readAsText(blob, "UTF-8")
        return new Promise((resolve,reject) => {
            f.onload = (evt: any) => {              
                const re = evt.target.result                
                const result = JSON.parse(re)
                resolve(result)
            }

            f.onerror = (evt:any) => {
                reject(evt)
            }
        })
        
    }

    private async getFileFromStream(response: any){
        if (!response.headers.has("content-disposition")) {
            const blob = new Blob([response.body], { type: 'application/octet-stream' })
            const resultJson = await this.readBlob(blob)
            return resultJson
        }
        const fileName = this.getFileName(response)
        const blob = new Blob([response.body], { type: 'application/octet-stream' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(blob, fileName)
            return null
        } else {
            const blobUrl = window.URL.createObjectURL(blob)
            const tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = blobUrl
            tempLink.setAttribute('download', fileName)

            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
            window.URL.revokeObjectURL(blobUrl)
            return null
        }
    }
}

```

Angular封装HttpClient文件下载

使用Koa2实现服务端的文件上传下载



```js
const Koa = require("koa")
const router = require("koa-router")();
const cors = require("koa2-cors")
const fs = require('fs');
const path = require('path');
const {koaBody} = require('koa-body');
console.log(koaBody);
const {saveFile,getFileStream,readFile} = require("./utils/file")

const app = new Koa()


/** 文件上传 */
router.post("/upload",function(ctx,next){
  const file = ctx.request.files.file;
  const uniqueFilename = saveFile(file);
  ctx.body = { filename: uniqueFileName };
})

/** 文件下载 */
router.get("/download/:filename",async function(ctx,next){

  const filename = ctx.params.filename;
  //request里面切出标识符字符串
  let requestUrl = ctx.request.originalUrl;
  //获取资源文件的绝对路径
  let filePath = path.resolve(__dirname + "/uploads/" + decodeURI(filename));
  let resHred = readFile(ctx.headers.range, filePath);
  ctx.status = resHred.code
  ctx.set(resHred.head);
  ctx.set('Content-Disposition', `attachment; filename=${encodeURIComponent(filename)}`);
  ctx.set('Content-Type', 'application/octet-stream');
  let stream = fs.createReadStream(filePath, resHred.code == 200 ? {} : { start: resHred.start, end: resHred.end });
  stream.pipe(ctx.res);
  // //也可使用这种方式。
  // stream.on('data', e => ctx.res.write(e));
  // // 接收完毕
  // stream.on('end', e => ctx.res.end());
  ctx.respond = false;
  return
})
router.post("/index",function(ctx,next){
    ctx.body = {
        data:"token....",
        message:"获取token成功"
    }
})
// app.use(async (ctx) => {
//     ctx.body = "token....."
// })
// app.use(
//     cors({
//         origin: function(ctx){
//             return "*"  //解决跨域
//         },
//         maxAge:5,
//         credentials:true,//是否携带cookie
//         allowMethods:["GET","POST","PUT","DELETE"]
//     })
// )

// koa-body 中间件来解析包含文件的 multipart/form-data 表单数据
app.use(koaBody({ multipart: true }));
app.use(router.routes())
//app.use(router.allowedMethods())
app.listen(3000)
```

关于文件操作的工具函数file.js

```js
const fs = require('fs');
const path = require('path');

function saveFile(file) {
    const reader = fs.createReadStream(file.path);
    const fileExtension = path.extname(file.name);
    const uniqueFileName = `${Date.now()}${fileExtension}`;
    const writer = fs.createWriteStream(path.join(__dirname, 'uploads', uniqueFileName));
    reader.pipe(writer);
    return uniqueFileName;
}

function getFileStream(filename) {
    return fs.createReadStream(path.join(__dirname, '../uploads', filename));
}



  /**
 * [读文件]
 * @param  {String} range        [数据起始位]
 * @param  {String} filePath     [文件路径]
 * @param  {Number} chunkSize    [每次请求碎片大小 （900kb 左右）]
 */
function readFile(range, filePath, chunkSize = 499999 * 2) {
    //mime类型
    const mime = {
        "css": "text/css",
        "gif": "image/gif",
        "html": "text/html",
        "ico": "image/x-icon",
        "jpeg": "image/jpeg",
        "jpg": "image/jpeg",
        "js": "text/javascript",
        "json": "application/json",
        "pdf": "application/pdf",
        "png": "image/png",
        "svg": "image/svg+xml",
        "swf": "application/x-shockwave-flash",
        "tiff": "image/tiff",
        "txt": "text/plain",
        "mp3": "audio/mp3",
        "wav": "audio/x-wav",
        "wma": "audio/x-ms-wma",
        "wmv": "video/x-ms-wmv",
        "xml": "text/xml",
        "mp4": "video/mp4"
    };
    // 获取后缀名
    let ext = path.extname(filePath);
    ext = ext ? ext.slice(1) : 'unknown';
    //未知的类型一律用"text/plain"类型
    let contentType = mime[ext.toLowerCase()];
 
    //建立流对象，读文件
    let stat = fs.statSync(filePath)
    let fileSize = stat.size;
    let head = {
        code: 200,
        head: {
            'Content-Length': fileSize,
            'content-type': contentType,
        }
 
    };
    console.log("range: ",range);
    if (range) {
        // 大文件分片
        let parts = range.replace(/bytes=/, "").split("-");
        let start = parseInt(parts[0], 10);
        let end = parts[1] ? parseInt(parts[1], 10) : start + chunkSize;
        end = end > fileSize - 1 ? fileSize - 1 : end;
        chunkSize = (end - start) + 1;
        head = {
            code: 206,
            filePath,
            start,
            end,
            head: {
                'Content-Range': `bytes ${start}-${end}/${fileSize}`,
                'content-type': contentType,
                'Content-Length': chunkSize,
                'Accept-Ranges': 'bytes'
            }
        }
 
    }
    return head;
}


module.exports = {
    saveFile,
    getFileStream,
    readFile
}

```

koa2 文件上传下载

那些你忽略的typescript小技巧



# 运算符
## 空值合并运算符 ??

?? 与 || 功能很相似，不同的是 ??在左侧表达式为 `null` 或 `undefined` 时，才会右侧表达式。

```
const num = a ?? 10;

// 上面的写法等价于下面的写法

const num2 = ( a !== null && a !== void 0) ? a : 10;

```
在这里科普一下，`void 0` 会返回 `undefined`,那这里为什么不直接写`undefined`呢，是因为undefined是全局作用域中的一个变量，undefined的最初值就是原始数据类型undefined。
ES5之后的标准中，规定了全局变量下的undefined值为只读，不可改写的，但是局部变量中依然可以对之进行改写。
所以使用void 0来代替undefined就比较稳妥，防止出错。

## 非空断言运算符 !

这个运算符可以用在变量名或者函数名之后，用来强调对应的元素是非 null|undefined 的

```js
function clickHandle(){
    this.domRef!.open()  // ! 告诉编译器 变量不为null 或 undefinded
}
```

## 可选链运算符 ?.

相比上面!作用于编译阶段的非空判断，?.这个是开发者最需要的运行时(当然编译时也有效)的非空判断。

obj?.prop obj?.[index] func?.(args)

?.用来判断左侧的表达式是否是 null | undefined，如果是则会停止表达式运行，可以减少我们大量的&&运算。
比如我们写出a?.b时，编译器会自动生成如下代码

a === null || a === void 0 ? void 0 : a.b;

# 操作符

## 键值获取 keyof

keyof 可以获取一个类型所有键值，返回一个联合类型

```ts
type Person = {
  name: string;
  age: number;
}
type PersonKey = keyof Person; 
// PersonKey得到的类型为 'name' | 'age'

```
keyof 的一个典型用途是限制访问对象的 key 合法化，因为 any 做索引是不被接受的

```ts
function getValue (p: Person, k: keyof Person) {
  return p[k];  // 如果k不如此定义，则无法以p[k]的代码格式通过编译
}

```

## 实例类型获取 typeof

typeof 是获取一个对象/实例的类型

```ts
const me: Person = { name: 'gzx', age: 16 };
type P = typeof me;  // { name: string, age: number | undefined }
const you: typeof me = { name: 'mabaoguo', age: 69 }  // 可以通过编译

```

## 遍历属性 in
 
 in 只能用在类型的定义中，可以对枚举类型进行遍历

```ts
// 这个类型可以将任何类型的键值转化成number类型
type TypeToNumber<T> = {
  [key in keyof T]: number
}

```
keyof返回泛型 T 的所有键枚举类型，key是自定义的任何变量名，中间用in链接，外围用[]包裹起来(这个是固定搭配)，冒号右侧number将所有的key定义为number类型。

于是可以这样使用了：

const obj: TypeToNumber<Person> = { name: 10, age: 10 }
    
总结起来 in 的语法格式如下：
    
```
[ 自定义变量名 in 枚举类型 ]: 类型
```
    
# 内置高级类型
    
## Parameters
Parameters 用于提取函数类型的参数类型。
```ts
type Parameters<T extends (...args: any) => any> 
    = T extends (...args: infer P) => any 
        ? P 
        : never;

```
类型参数 T 为待处理的类型，通过 extends 约束为函数，参数和返回值任意。
通过 extends 匹配一个模式类型，提取参数的类型到 infer 声明的局部变量 P 中返回。

![image.png](/static/img/48d5664024a9d8af3c30ed5b78ffaf5a.image.webp)

## ReturnType
ReturnType 用于提取函数类型的返回值类型
```ts
type ReturnType<T extends (...args: any) => any> 
    = T extends (...args: any) => infer R 
        ? R 
        : any;

```
类型参数 T 为待处理的类型，通过 extends 约束为函数类型，参数和返回值任意。

用 T 匹配一个模式类型，提取返回值的类型到 infer 声明的局部变量 R 里返回。

![image.png](/static/img/b712dbdbe10c23e1353dd38bc65d40f6.image.webp)
    
    
## ConstructorParameters
    
构造器类型和函数类型的区别就是可以被 new。

Parameters 用于提取函数参数的类型，而 ConstructorParameters 用于提取构造器参数的类型。
```ts   
type ConstructorParameters<T extends abstract new (...args: any) => any> 
    = T extends abstract new (...args: infer P) => any 
        ? P 
        : never;
```
类型参数 T 是待处理的类型，通过 extends 约束为构造器类型，加个 abstract 代表不能直接被实例化（其实不加也行）。

用 T 匹配一个模式类型，提取参数的部分到 infer 声明的局部变量 P 里，返回 P。
    

![image.png](/static/img/65784f68e2342dc564b6c4342b05b4c5.image.webp)
    
## InstanceType
    
提取了构造器参数的类型，自然也可以提取构造器返回值的类型，就是 InstanceType。
```ts
type InstanceType<T extends abstract new (...args: any) => any> 
    = T extends abstract new (...args: any) => infer R 
        ? R 
        : any;
  
```
整体和 ConstructorParameters 差不多，只不过提取的不再是参数了，而是返回值。

通过模式匹配提取返回值的类型到 infer 声明的局部变量 R 里返回。
    
   
![image.png](/static/img/eecda1fbf807256a833f98ce4a6cab59.image.webp)
    
## ThisParameterType
    
函数里可以调用 this，这个 this 的类型也可以约束
```ts
 type ThisParameterType<T> = 
    T extends (this: infer U, ...args: any[]) => any 
        ? U 
        : unknown;
  
```
## Partial
将泛型中全部属性变为可选

```TS
type Partial<T> = {
    [P in keyof T]?: T[P]
}

```
    
```ts
 type Animal = {
  name: string,
  category: string,
  age: number,
  eat: () => number
}
// 用Partial包裹一下
type PartOfAnimal = Partial<Animal>;
const ww: PartOfAnimal = { name: 'ww' }; // 属性全部可选后，可以只赋值部分属性了
    
```

![image.png](/static/img/f7349a1be65f34a3f5426d5e8f7391ea.image.webp)
    
## Required
作用：将类型 T 中所有的属性变为必选项。
```ts
type Required<T> = {
  [P in keyof T]-?: T[P]
}  
```
这里有一个很有意思的语法-?，你可以理解为就是 TS 中把?可选属性减去的意思。

![image.png](/static/img/743f470bc73ebfa3b3aa5a47ea5d69ed.image.webp)
    
## Readonly
将所有属性变为只读
```ts
 type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
   
```

![image.png](/static/img/c2107290ee84556d0552df8daee40b88.image.webp)
    
## Pick
映射类型的语法用于构造新的索引类型，在构造的过程中可以对索引和值做一些修改或过滤
```ts
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
  
```
类型参数 T 为待处理的类型，类型参数 K 为要过滤出的索引，通过 extends 约束为只能是 T 的索引的子集。

构造新的索引类型返回，索引取自 K，也就是 P in K，值则是它对应的原来的值，也就是 T[P]。

![image.png](/static/img/c6157550038747aa604a1346359952a1.image.webp)
       
## Record<K, T>
作用：将K中所有属性值转化为T类型，常用来声明一个普通object对象。
```ts
 type Record<K extends keyof any,T> = {
  [key in K]: T
}   
```
这里特别说明一下，keyof any对应的类型为number | string | symbol，也就是可以做对象键(专业说法叫索引 index)的类型集合。

![image.png](/static/img/c2321661ba107a69a370fada7929d916.image.webp)

举例如下
    
const obj: Record<string, string> = { 'name': 'zhangsan', 'tag': '打工人' }

![image.png](/static/img/267053d69f3d93f24417655c6c851265.image.webp)

![image.png](/static/img/8fc69739d3347064b253bf9588e535f0.image.webp)


## Exclude<T, U>
作用：在 T 类型中，去除 T 类型和 U 类型的交集，返回剩余的部分。
    
当想从一个联合类型中去掉一部分类型时，可以用 Exclude 类型
```ts
type Exclude<T, U> = T extends U ? never : T
```
注意这里的 extends 返回的 T 是原来的 T 中和 U 无交集的属性，而任何属性联合 never 都是自身
    
联合类型中的每个类型都是相互独立的，TypeScript 对它做了特殊处理，也就是遇到字符串类型、条件类型的时候会把每个类型单独传入做计算，最后把每个类型的计算结果合并成联合类型。

条件类型左边是联合类型的时候就会触法这种处理，叫做分布式条件类型
```ts
   type T0 = Exclude<"a" | "b" | "c", "a" | "f">
            = "a" extends "a"|"f" ? never : "a" | //never
              "b" extends "a"|"f" ? never : "b" |   //"b"
              "c" extends "a"|"f" ? never : "c"     //"c"
            = "b"|"c" 
 ```
    
## Extract
可以过滤掉，自然也可以保留，Exclude 反过来就是 Extract，也就是取交集
```ts
type Extract<T, U> = T extends U ? T : never;
 
```

![image.png](/static/img/a3c5693e36f9e2db89e0a73e6a00cc38.image.webp)

## Omit<T, K>
    
我们知道了 Pick 可以取出索引类型的一部分索引构造成新的索引类型，那反过来就是去掉这部分索引构造成新的索引类型。
    
作用：适用于键值对对象的 Exclude，它会去除类型 T 中包含 K 的键值对。
```ts
type Omit = Pick<T, Exclude<keyof T, K>>
```

![image.png](/static/img/a6fc848312c033a8cc83db8c3939ce20.image.webp)

    
## Awaited
获取多层嵌套Promise的返回值
```ts
 type Awaited<T> =
    T extends null | undefined
        ? T 
        : T extends object & { then(onfulfilled: infer F): any }
            ? F extends ((value: infer V, ...args: any) => any)
                ? Awaited<V>
                : never 
            : T;
   
```
类型参数 T 是待处理的类型。

如果 T 是 null 或者 undefined，就返回 T。

如果 T 是对象并且有 then 方法，那就提取 then 的参数，也就是 onfulfilled 函数的类型到 infer 声明的局部变量 F。

继续提取 onfullfilled 函数类型的第一个参数的类型，也就是 Promise 返回的值的类型到 infer 声明的局部变量 V。

递归的处理提取出来的 V，直到不再满足上面的条件。

![image.png](/static/img/def88e2b465873dc22658c3f0e27f046.image.webp)
    
## Uppercase、Lowercase、Capitalize、Uncapitalize
    
这四个类型是分别实现大写、小写、首字母大写、去掉首字母大写的。

    
    
    

# 模式匹配
## 字符串
### StartsWith
判断字符串是否以某个前缀开头
 ```ts
    type StartsWith<Str extends string, Prefix extends string> = 
    Str extends `${Prefix}${string}` ? true : false;
 ```
 eg: 16进制颜色值
 ```ts
    const color: `#${string}` = "#fff"
  ```

typescript高级技巧篇

typescript的装饰器有点类似Java里的注解，方便便捷对原有函数进行特定功能增强，本文列举了一些小编用到的案例，方便大家参考。



# 统计函数方法运行消耗的时间

```ts
const methodRunTime = () => {
    return function(target:any,methodName:string,desc:PropertyDescriptor){
        // 保存原来的函数
        const originMethod: Function = desc.value;
        // 改造函数实现
        desc.value = function(...args:any[]){
            const start = Date.now();
            try {
                originMethod.apply(this,args);
            } catch (error) {
                throw error
            } finally {
                const end = Date.now()
                console.log(`函数 ${methodName} 运行时间： ${end - start} ms`)
            }            
        }
    }
}

// 测试案例使用
@methodRunTime()
function fun1(){
    // Todo
}
```

# 同步异常捕捉
上面的代码稍加改造也可以成为同步异常捕捉器
```ts
const methodTryCatch = (errBubble = false) => {
    return function(target:any,methodName:string,desc:PropertyDescriptor){
        // 保存原来的函数
        const originMethod: Function = desc.value;
        // 改造函数实现
        desc.value = function(...args:any[]){
            try {
                originMethod.apply(this,args);
            } catch (error) {
                console.error(`函数 ${methodName} 运行异常 ${error}`)
                if(errBubble){
                   throw error 
                }
            }           
        }
    }
}

// 测试案例使用
@methodTryCatch()
function fun1(){
    // Todo
}
```

typescript装饰器的使用案例

在Web应用开发中，为敏感内容添加水印是常见的安全需求。本文基于Vue 3实现了一个可定制的水印组件，支持动态文本、样式配置和防篡改功能，适用于文档保护、数据安全等场景。


# 核心实现方案
## Canvas绘制技术
组件采用Canvas API进行水印绘制，相比DOM方案具有以下优势：

- 性能优化：单Canvas元素替代大量DOM节点，减少重绘和回流
- 样式灵活：支持透明度、旋转角度等复杂样式配置
- 防篡改：通过MutationObserver监控DOM变化

# 组件代码
```vue
<template>
  <div ref="watermarkContainer" class="watermark-container" :style="containerStyle">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'

interface Props {
  text: string | string[]
  color?: string
  fontSize?: number | string
  fontStyle?: 'normal' | 'italic' | 'oblique'
  fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number
  fontFamily?: string
  rotate?: number
  lineHeight?: number
  gapX?: number
  gapY?: number
  opacity?: number
  fullScreen?: boolean
  zIndex?: number
  preventTamper?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  text: 'Vue3 Watermark',
  color: 'rgba(0, 0, 0, 0.1)',
  fontSize: 14,
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontFamily: 'sans-serif',
  rotate: -15,
  lineHeight: 1.5,
  gapX: 100,
  gapY: 80,
  opacity: 1,
  fullScreen: false,
  zIndex: 9999,
  preventTamper: true
})

const emit = defineEmits(['mounted', 'updated', 'error'])

const watermarkContainer = ref<HTMLDivElement | null>(null)
const watermarkElement = ref<HTMLDivElement | null>(null)
const resizeObserver = ref<ResizeObserver | null>(null)
const mutationObserver = ref<MutationObserver | null>(null)

// 临时Canvas：用于计算文字真实宽高（不渲染到页面）
const tempCanvas = document.createElement('canvas')
const tempCtx = tempCanvas.getContext('2d')

const containerStyle = computed(() => ({
  position: props.fullScreen ? 'fixed' : 'relative',
  top: props.fullScreen ? 0 : 'inherit',
  left: props.fullScreen ? 0 : 'inherit',
  width: props.fullScreen ? '100vw' : '100%',
  height: props.fullScreen ? '100vh' : '100%',
  overflow: 'hidden',
  zIndex: props.fullScreen ? 'inherit' : props.zIndex
}))

/**
 * 计算文字的真实宽高（不旋转）
 * @param text 单段文字
 * @returns {width: number, height: number}
 */
const calculateTextRect = (text: string): { width: number; height: number } => {
  if (!tempCtx) return { width: 0, height: 0 }
  const fontSize = typeof props.fontSize === 'number' ? props.fontSize : parseInt(props.fontSize)
  // 设置临时Canvas字体样式，与实际水印完全一致
  tempCtx.font = `${props.fontStyle} ${props.fontWeight} ${fontSize}px ${props.fontFamily}`
  // 获取文字的包围盒信息
  const textMetrics = tempCtx.measureText(text)
  const textWidth = textMetrics.width
  const textHeight = fontSize
  return { width: textWidth, height: textHeight }
}

/**
 * 计算旋转后的包围盒尺寸
 * @param width 原始宽度
 * @param height 原始高度
 * @param angle 旋转角度（角度制）
 * @returns {width: number, height: number}
 */
const calculateRotatedRect = (width: number, height: number, angle: number): { width: number; height: number } => {
  const radian = (angle * Math.PI) / 180
  const rotatedWidth = width * Math.abs(Math.cos(radian)) + height * Math.abs(Math.sin(radian))
  const rotatedHeight = width * Math.abs(Math.sin(radian)) + height * Math.abs(Math.cos(radian))
  return { width: rotatedWidth, height: rotatedHeight }
}

/**
 * 生成水印图片URL + Canvas尺寸（核心修改：返回对象而非单一URL）
 * @returns {url: string, canvasWidth: number, canvasHeight: number}
 */
const generateWatermarkUrl = (): { url: string; canvasWidth: number; canvasHeight: number } => {
  try {
    if (!tempCtx) throw new Error('Canvas 上下文获取失败')
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    if (!ctx) throw new Error('Canvas 上下文获取失败')

    const textList = Array.isArray(props.text) ? props.text : [props.text]
    const fontSize = typeof props.fontSize === 'number' ? props.fontSize : parseInt(props.fontSize)
    const singleLineHeight = fontSize * props.lineHeight

    // 1. 计算所有文字中最长的宽度
    let maxTextWidth = 0
    textList.forEach(text => {
      const { width } = calculateTextRect(text)
      if (width > maxTextWidth) maxTextWidth = width
    })
    // 2. 计算单段文字高度和总文本高度
    const singleTextHeight = fontSize
    const totalTextHeight = textList.length * singleLineHeight

    // 3. 计算旋转后的包围盒尺寸
    const { width: rotatedWidth, height: rotatedHeight } = calculateRotatedRect(maxTextWidth, totalTextHeight, props.rotate)

    // 4. 设置Canvas尺寸为旋转后的包围盒尺寸（兜底防止过小）
    const canvasWidth = Math.max(rotatedWidth, props.gapX / 2)
    const canvasHeight = Math.max(rotatedHeight, props.gapY / 2)
    canvas.width = canvasWidth
    canvas.height = canvasHeight
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // 5. 配置水印样式
    ctx.fillStyle = props.color
    ctx.font = `${props.fontStyle} ${props.fontWeight} ${fontSize}px ${props.fontFamily}`
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.globalAlpha = props.opacity

    // 6. 平移+旋转：保证文字居中旋转
    ctx.translate(canvas.width / 2, canvas.height / 2)
    ctx.rotate((props.rotate * Math.PI) / 180)
    ctx.translate(-canvas.width / 2, -canvas.height / 2)

    // 7. 绘制多段文字
    textList.forEach((text, index) => {
      const x = canvas.width / 2
      const y = (canvas.height / 2) - (totalTextHeight / 2) + (index + 0.5) * singleLineHeight
      ctx.fillText(text, x, y)
    })

    // 核心修改：返回URL + Canvas宽高
    return {
      url: canvas.toDataURL('image/png'),
      canvasWidth,
      canvasHeight
    }
  } catch (err) {
    const error = err as Error
    emit('error', error.message)
    console.error('水印图片生成失败：', error)
    // 异常时返回默认值，避免后续报错
    return { url: '', canvasWidth: props.gapX, canvasHeight: props.gapY }
  }
}

// 渲染水印（核心修改：接收并使用Canvas尺寸）
const renderWatermark = () => {
  nextTick(() => {
    if (!watermarkContainer.value) return
    // 移除旧水印
    if (watermarkElement.value) {
      watermarkElement.value.remove()
      watermarkElement.value = null
    }
    // 获取水印URL和Canvas尺寸（核心修改）
    const { url: watermarkUrl, canvasWidth, canvasHeight } = generateWatermarkUrl()
    if (!watermarkUrl) return

    const watermark = document.createElement('div')
    watermarkElement.value = watermark
    Object.assign(watermark.style, {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      pointerEvents: 'none',
      background: `url(${watermarkUrl}) repeat`,
      zIndex: props.zIndex,
      userSelect: 'none',
      // 使用返回的Canvas尺寸，不再引用局部变量（核心修复）
      backgroundSize: `${canvasWidth}px ${canvasHeight}px`
    })

    watermarkContainer.value.appendChild(watermark)
    emit('updated')
  })
}

// 防篡改监听
const startTamperPrevent = () => {
  if (!watermarkContainer.value || !props.preventTamper) return
  const observerOptions = {
    childList: true,
    attributes: true,
    subtree: true,
    attributeFilter: ['style', 'class']
  }
  mutationObserver.value = new MutationObserver((mutations) => {
    const isWatermarkChanged = mutations.some(mutation => 
      mutation.target === watermarkElement.value || mutation.removedNodes[0] === watermarkElement.value
    )
    if (isWatermarkChanged) renderWatermark()
  })
  mutationObserver.value.observe(watermarkContainer.value, observerOptions)
}

// 尺寸监听
const startResizeObserve = () => {
  if (!watermarkContainer.value) return
  resizeObserver.value = new ResizeObserver(() => {
    renderWatermark()
  })
  resizeObserver.value.observe(watermarkContainer.value)
}

// 停止所有监听
const stopAllObserve = () => {
  if (resizeObserver.value) {
    resizeObserver.value.disconnect()
    resizeObserver.value = null
  }
  if (mutationObserver.value) {
    mutationObserver.value.disconnect()
    mutationObserver.value = null
  }
}

// 生命周期
onMounted(() => {
  if (watermarkContainer.value) {
    renderWatermark()
    startResizeObserve()
    startTamperPrevent()
    emit('mounted')
  }
})

onUnmounted(() => {
  stopAllObserve()
  if (watermarkElement.value) {
    watermarkElement.value.remove()
    watermarkElement.value = null
  }
  // 销毁临时Canvas，避免内存泄漏
  tempCanvas.remove()
})

// 监听Props变化，自动重绘水印
watch(
  () => [
    props.text, props.color, props.fontSize, props.fontStyle, props.fontWeight,
    props.fontFamily, props.rotate, props.lineHeight, props.gapX, props.gapY,
    props.opacity, props.fullScreen, props.zIndex
  ],
  () => {
    renderWatermark()
    if (props.preventTamper) startTamperPrevent()
  },
  { deep: true }
)
</script>

<style scoped>
.watermark-container {
  box-sizing: border-box;
}
:slotted(*) {
  position: relative;
  z-index: 1;
}
</style>
```

# demo
```vue
<WaterMark :text="['我的水印', '2026-02-05']" :rotate="-20" fontSize="16"
  color="rgba(0, 128, 0, 0.2)"
  :gapX="200"
  :gapY="160">
      <HelloWorld></HelloWorld>
    </WaterMark>
```


![image.png](/static/img/9258a4d60265aa18369c22e825cadbca.image.webp)