Q: 请教一个关于 JS 类型的问题？

[c3de3f21]

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 一些小小的约束？

[iOCZ]

对于脚本语言而言，就是没有。。。如果你要类型，就要额外的编译器支持。除了用 TS ，以前还有 flow 这种东西。

[c3de3f21]

@iOCZ 啊~~~好吧

[codehz]

怎么能说没有呢
虽然没有标注，但是你可以根据使用情况和作者预期推断需要的数据形状（ shape ），甚至于 flow 和 ts 都有提供自动根据使用情况推断的工具，自动的准不准确另说，但起码能用
此外即使文件是 js ，你依旧可以通过 jsdoc 来注释类型，而且 ts 是支持这样的 https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

[lzgshsj]

纯 js 想要使用者好懂，就需要开发者花时间写详细的 jsdoc 或者.d.ts 声明文件。编辑器和 IDE 是可以通过 jsdoc 和.d.ts 文件智能提示类型的。

[DOLLOR]

0 、不像用 TS 就用 jsdoc + ts-check
1 、如何规定参数类型： https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#param-and-returns

不要小瞧 jsdoc ，在 vscode 里开 ts-check ，已经能达到 TS 八成功力了。

[aikilan]

楼上说的对，日常 jsdoc 也够

[subframe75361]

ts 最有用的是类型推断和函数重载，其他的基本 jsdoc 就行

[jones2000]

f12 直接调试就能看到整个 logObj 的信息了。js 本来就是一个轻量型的开发， 一个记事本+浏览器就可以完成开发。 非要搞这么复杂， 最后还不是转成 js 执行。

[jiejiss]

jsdoc 表达能力很强。所有 ts types 功能里面，jsdoc 不支持的应该只有 declaration merging

[c3de3f21]

@jiejiss 是不是这种
```
/**
* @typedef {Logger & Object.<LogType,LogFn>} LoggerInstance
*/

```

[humbass]

我们其实是另一种方式来解决这个问题，写一份专门的文档，来解释需要交互的 API 具体参数内容。