浏览器控制台花式打印 typescript全局注入
global.d.ts
/*** 全局定义花式打印类型 需要定义全局变量*/
declare interface PatternLog {Warn: (msg: string | Number, style?: Record<string, string>) => void;Log: (msg: string | Number, style?: Record<string, string>) => void;Error: (msg: string | Number, style?: Record<string, string>) => void;
}declare const PatternLog: PatternLog;//在window中定义 意在初始化全局变量时挂载到window上不报错
interface Window {PatternLog: PatternLog;
}
适当位置全局赋值
import { RandomColor, PatternLog } from "./utils";
//赋值 确保全局定义
window.PatternLog = PatternLog;
调用 不必在其他文件头部引入
PatternLog.Log(`共计算了${total}个物体的世界坐标 其中物体${mathCount}个`, {border: "2px solid #0f0",
});
代码
const defaultStyle = {"font-size": "10px",padding: "2px 4px","border-radius": "3px","letter-spacing": "1px",
};const warnStyle = { ...defaultStyle, color: "#fff", background: "#afa" };
const logStyle = { ...defaultStyle, color: "#fff", background: "#51f" };
const errorStyle = { ...defaultStyle, color: "#fff", background: "#f00" };const transitionStyle = (styleConf: Record<string, string>, mix?: Record<string, string>) => {let str = "";for (const [propName, value] of Object.entries(mix ? { ...styleConf, ...mix } : styleConf)) {str += `${propName}:${value};`;}return str;
};/*** 花样打印信息 拒绝朴素的平庸的打印信息* 但只能打印基本数据类型 其他类型会被转换成字符串 调用 toString()方法*/
export const PatternLog = {Warn: (msg: string | Number, style?: Record<string, string>): void => {console.log("%c%s", transitionStyle(warnStyle, style), `警告⚠️: ${msg}`);},Log: (msg: string | Number, style?: Record<string, string>): void => {console.log("%c%s", transitionStyle(logStyle, style), `${msg}`);},Error: (msg: string | Number, style?: Record<string, string>): void => {console.log("%c%s", transitionStyle(errorStyle, style), `错误
浏览器控制台花式打印 typescript全局注入相关推荐
- 三大框架之spring框架+IoC控制反转、DI依赖注入
三大框架:业务层框架Spring+IoC+DI 往期文章:jsp与cookie.重定向与RESTFul架构支持 下一章节: 持久层框架MyBatis 初识Spring框架 MyBatis 入门http ...
- 【Java从0到架构师】Spring - IoC 控制反转、DI 依赖注入
IoC 控制反转.DI 依赖注入 Spring 简介 Spring 基本使用 - IoC 容器 依赖注入 (Dependency Injection) 基于 setter 的注入 - 自定义对象 be ...
- 什么是IOC(控制反转)、DI(依赖注入)举个形象的例子通俗易懂
更多免费教学文章请关注这里 学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清 ...
- typescript全局安装卸载以及npm相关问题
全局安装 npm install -g typescript 全局安装之后,如果想要卸载要使用 npm uninstall -g typescript 全局安装之后可以在终端使用 tsc xxx 编 ...
- 电脑的“应用与浏览器控制”出现黄色感叹号
电脑中的"应用和浏览器控制"出现了感叹号,点进去却发现无最近操作,这可能是因为我们不小心安装了某个软件,然后又将其卸载,但仍然清理不干净导致的.这时,我们可以尝试将这些缓存清理干净 ...
- 浏览器控制bartender打印方案
通过浏览器控制bartender10.1打印程序,首先需要考虑浏览器怎么调用外部程序,外部程序怎么控制bartender进行打印?控制bartender打印,可以使用bartender 自动化(aut ...
- 控制反转(IoC)与依赖注入(DI)详解
文章目录 什么是控制反转(IoC) 控制反转(IoC)有什么作用 控制反转(IoC)是怎么分类的 依赖注入 接口注入 Setter方法注入 构造器注入 依赖查找 上下文依赖查找(Contextuali ...
- 什么是IOC(控制反转)、DI(依赖注入)
原文地址(摘要了部分内容):https://blog.csdn.net/qq_22654611/article/details/52606960/ 学习过Spring框架的人一定都会听过Spring的 ...
- 谈谈php里的IOC控制反转，DI依赖注入
理论 发现问题 在深入细节之前,需要确保我们理解"IOC控制反转"和"DI依赖注入"是什么,能够解决什么问题,这些在维基百科中有非常清晰的说明. 控制反转(In ...
最新文章
- 上传jar到nexus的thirdparty第三方库
- ROS调用本地摄像头数据并在rviz里显示
- C语言文件读写操作主要函数及其用例
- 领域驱动设计-什么是领域驱动设计和怎么使用它
- Linux 网络设备驱动开发（一） —— linux内核网络分层结构
- 无网络访问权限怎么办_老司机教你IPV4无网络访问权限怎么办
- 将Notepad++配置为Ruby编译器
- 操作手机数据库的uri
- 假如 C++ 是一只箭，你会用它来射哪只雕？
- 经典神经网络 -- SSD : 设计原理与pytorch实现
- 大端与小端字节数据详解（转）
- Dynamo和Bigtable对比研究
- 二值图像游程matlab,二值图像游程编码matlab代码.doc
- 【Android初学者】UI组件 介绍
- 那个卖了房子去大理的姑娘，4个月后又回来了
- 【高光谱、多光谱和全色图像融合】
- java excel单元格背景色,『excel表格尺寸设置』Java如何设置被导出excel单元格的样式？比如背景色，大小什么的？...
- Linux就业形势报告
- CS224d lecture 14札记
- Matlab将图例添加到图
热门文章