TypeScript 之 console的使用

语言： TypeScript

在线工具： PlayGround

console

console 对象是一个非常强大的控制台日志显示工具，可以帮助我们在浏览器中调试代码。

注： console不属于TypeScript的语法，而是由JavaScript封装的内置对象。

简单的示例：

let array = [1, 2, 3, 4, 5];
console.log(array.toString());      // "1,2,3,4,5" 
console.log("hello", "TypeScript"); // "hello",  "TypeScript"

提供的接口有：

接口	说明
assert()	断言，如果断言为false，则将信息写入控制台
clear()	清空控制台，并输出 `Console was cleared`
count()	以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数
countReset()	重置指定标签的计数器值
debug()	在控制台打印一条 `debug` 级别的消息
dir()	显示一个由特定的 Javascript 对象列表组成的可交互列表
dirxml()	打印 XML/HTML 元素表示的指定对象，否则显示 JavaScript 对象视图
error()	打印一条错误信息
group()	创建一个新的内联分组, 后续所有打印内容将会以子层级的形式展示
groupCollapsed()	创建一个新的内联分组，同`group`类似，但它打印出来的内容默认是折叠的
groupEnd()	关闭内联分组，与`group`或`groupCollapsed`配合使用
info()	打印资讯类说明信息
log()	打印内容的通用方法
table()	将列表型的数据打印成表格
time()	启动一个以入参作为特定名称的定时器
timeEnd()	结束特定的定时器并以毫秒打印其从开始到结束所用的时间
timeLog()	打印特定定时器所运行的时间
timeStamp()	添加一个标记到浏览器的 Timeline 或 Waterfall 工具
trace()	输出堆栈信息
warn()	输出警告消息到控制台

注：更多内容可参考: Console API

示例

在项目中为标明不同类型信息的重要程度，主要调用的几个接口：

info()/log() 输出日志，灰色或黑色显示，用于表示正在进行的操作
debug() 测试日志，黑色显示，用于表示做的测试操作
warn() 警告日志，黄色显示，表示开发者最好处理，但不处理也不会影响运行
error() 错误日志，红色显示，表示开发者必须解决该问题

文字不同颜色的显示，主要得益于console 对象支持使用%c为内容定义样式，示例：

console.info("%cThis is info message", "color:gray;");
console.log("%cThis is log message", "color:block;");
console.debug("%cThis is debug message", "color:green;");
console.warn("%cThis is warn message", "color:yellow;");
console.error("%cThis is error message", "color:red;");

请添加图片描述

其他的一些示例如下：

assert 断言，如果条件为false，则输出日志

let obj = null;
console.assert(obj, "Error: obj is null");
// Error: obj is null

count()/countReset() 输出调用的次数或重置

function log() {
    console.count("count");
}
log();
log();
console.countReset("count");
log();

// count: 1
// count: 2
// count: 1

dir() 用于输出JavaScript对象表
**time()/timeLog()/timeEnd()**记录某一个操作的运行毫秒

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");