javascript - 检查 Typescript 中的默认值

Question

当可选参数没有默认值时，typescript/typescript-eslint 是否有任何方法可以呈现错误？我正在尝试将我的 React 代码库从 JSX 转换为 TSX，并且不再出现有关未定义 defaultProps 的令人担忧的警告。谢谢。

不好:标题没有默认属性值

import * as React from 'react';

interface Props {
  title?: string;
}

const SampleComponent: React.FC<Props> = ({ title }) => (
  <h1>
    {title && <p>{title}</p>}
  </h1>
);

export default SampleComponent;

好:标题具有默认属性值

import * as React from 'react';

interface Props {
  title?: string;
}

const SampleComponent: React.FC<Props> = ({ title = 'foo' }) => (
  <h1>
    {title && <p>{title}</p>}
  </h1>
);

export default SampleComponent;

Answer 1

这不是 TypeScript 会为您做的事情，因此没有可靠且简单的选项可用。

但是，只需做一点工作，就可以将其实现为 ESLint 规则。 Linting 规则被赋予代码的抽象语法树(AST - 描述程序代码的数据结构)，然后可以对其进行检查，例如获取每个参数，仅过滤可选参数，然后检查是否这些都有一个默认值。

要真正做到这一点，我建议:

• 设置ESLint与 ESLint-TypeScript plugin在你的项目中
• 阅读有关编写自定义 ESLint 规则的介绍:https://blog.yonatan.dev/writing-a-custom-eslint-rule-to-spot-undeclared-props/ (请注意，这是 JavaScript AST，而不是 TypeScript，但它非常相似，纯 JS 是一个很好的起点)
• 查看简单的现有 TS linting 规则，例如 no-parameter-properties (构造函数参数上没有 private/public/etc 属性)，并确保您了解它们的工作原理
• 尝试编写自己的

请注意，tslint 也存在，作为一个纯粹专注于 TypeScript 的 linting 工具。这可能是一个选项，历史上这对于 TS linting 来说更受欢迎，但它是 now deprecated支持 eslint-typescript，所以我现在会避免从它开始。