Intro

• 0.首先在不使用 ts 的情况下讨论问题

例子代码类似如下

 log(logObj) {
    const consoleLogFn = this._getLogFn(logObj.level);

    // Type
    const type = logObj.type === 'log' ? '' : logObj.type;

    // Tag
    const tag = logObj.tag || '';

    // Styles
    const color =
      this.typeColorMap[logObj.type] ||
      this.levelColorMap[logObj.level] ||
      this.defaultColor;
    const style = `
      background: ${color};
      border-radius: 0.5em;
      color: white;
      font-weight: bold;
      padding: 2px 0.5em;
    `;

    const badge = `%c${[tag, type].filter(Boolean).join(':')}`;

    // Log to the console
    if (typeof logObj.args[0] === 'string') {
      consoleLogFn(
        `${badge}%c ${logObj.args[0]}`,
        style,
        // Empty string as style resets to default console style
        '',
        ...logObj.args.slice(1)
      );
    } else {
      consoleLogFn(badge, style, ...logObj.args);
    }
  }

• 1.这是一段 console.log 的包装函数，通过读以下代码，我们好像无法理会它的意思
• 2.首先第一个问题 logObj 就难住了调用者,这个 logObj 是什么，有什么属性，每个属性是做什么用的？
  • 我们可以通过 JSDoc 的方式来不太良好的解决这个问题，也可以通过注释说明，但是编辑器可不会推断出对象中的属性都有些什么
• 3.在我们使用 React 的纯 JS 时，PropType 可以帮助我们规定每个组件中的 this.props 属性类型

Question

• 0.如何只使用 JS 或者 JS 第三方库来写出好的代码（代码消费者好懂，代码生产者工作量少）？
• 1.如何规定参数的类型？或者说给我们的 JS 一些小小的约束？