2 行 CSS 后的段落点 - TypeScript

TypeScript 是一个由微软开发的开源编程语言，它是 JavaScript 的超集，意味着任何合法的 JavaScript 代码都是合法的 TypeScript 代码。但 TypeScript 在语法上扩展了 JavaScript，增加了类、接口、泛型等特性，还提供了强类型校验和代码提示功能，让 JavaScript 具备了更好的可维护性和可读性。

2 行 CSS 后的段落点

以下是一个简单的段落样式：

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
}

这里的 margin-bottom 属性用于设置段落与下一个元素之间的距离。如果你希望段落之间有额外的距离，可以添加 margin-top 属性来控制上下间距。

不过，以上样式只适用于普通文本段落，如果你需要在段落内部添加其他元素比如列表、表格等，可能就需要对样式进行微调。这时，使用 CSS 的 ::before 伪元素可以方便地添加段落点（bullet）。

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 1em;
  position: relative;
}

p::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: 0.75em;
  left: -1.25em;
}

以上样式可以在每个段落前添加一个黑色圆点，代码中的 ::before 伪元素用于生成这个圆点。通过给 top 和 left 属性设置位置，可以调整圆点与段落文本的相对位置，当然你也可以使用其他形状代替圆点，只需要调整 content 属性和相应的样式即可。

TypeScript 与样式

那么 TypeScript 和样式有什么关系呢？实际上，TypeScript 中也有类似 CSS 的机制来处理代码的结构和外观，这就是 TypeScript 的装饰器（decorator）机制。装饰器可以视为一种特殊的函数，用于修改类、方法、属性等代码结构。比如，你可以通过装饰器来添加类成员的验证逻辑、记录日志等功能。

以下是一个简单的装饰器示例：

function log(target: any, name: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`[${name}] called with args: ${JSON.stringify(args)}`);
    return original.apply(this, args);
  }
}

class MyClass {
  @log
  multiply(a: number, b: number) {
    return a * b;
  }
}

以上代码中的 @log 装饰器用于在 multiply 方法被调用时记录日志。通过 TypeScript 的装饰器机制，可以将这个记录日志的逻辑与 multiply 方法绑定在一起，让代码更加简洁和易于维护。

总而言之，无论是 CSS 还是 TypeScript，都是用来增强代码的结构和可读性的工具，使用它们可以让你的代码更加优雅和易于维护。