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规则。为规则规则提供了代码的抽象语法树（AST-描述程序代码的数据结构），然后可以对其进行检查，例如获取每个参数，仅过滤至可选参数，然后检查是否这些都具有默认值。

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

在项目中使用ESLint设置ESLint-TypeScript plugin
请阅读以下介绍如何编写自定义ESLint规则的说明：https://blog.yonatan.dev/writing-a-custom-eslint-rule-to-spot-undeclared-props/（请注意，这是针对JavaScript AST而不是TypeScript，但它非常相似，纯JS是一个很好的起点）
看看简单的现有TS插入规则，例如no-parameter-properties（构造函数参数上没有private / public / etc属性），并确保您了解它们的工作原理
可以自行编写

请注意，tslint也存在，它是纯粹以TypeScript为重点的整理工具。这可能是一个选择，而且从历史上看，这在TS linting上更为流行，但是now deprecated赞成使用eslint打字稿，因此，我现在避免使用它。

检查打字稿中的默认值

1 个答案: