Проверка значений по умолчанию в Typescript

Есть ли способ в 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;

reactjs typescript javascript eslint typescript-eslint
person Jimmy    schedule 24.07.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это не то, что TypeScript сделает для вас, поэтому надежного и простого варианта не существует.

Однако, немного поработав, это можно реализовать как правило ESLint. Правилам линтинга предоставляется абстрактное синтаксическое дерево вашего кода (AST - структура данных, описывающая код программы), и затем они могут выполнять проверки против него, такие как получение каждого параметра, фильтрация только до необязательных параметров, а затем проверка того, все они имеют значение по умолчанию.

Для этого я бы посоветовал:

  • Настройте ESLint с помощью плагин ESLint-TypeScript в вашем проекте
  • Прочтите введение в создание собственного правила ESLint: https://blog.yonatan.dev/writing-a-custom-eslint-rule-to-spot-undeclared-props/ (обратите внимание, что здесь рассматривается AST JavaScript, а не TypeScript, но он очень похоже, и чистый JS - хорошая отправная точка)
  • Взгляните на простые существующие правила линтинга TS, такие как no-parameter-properties (без свойств _1 _ / _ 2_ / etc в аргументах конструктора) и убедитесь, что вы понимаете, как они работают.
  • Попробуй написать свой собственный

Обратите внимание, что tslint также существует как инструмент линтинга, ориентированный исключительно на TypeScript. Это может быть вариантом, и исторически это было более популярно для линтинга TS, но это теперь устарел в пользу eslint-typescript, поэтому я бы не стал начинать с него в настоящее время.

person Tim Perry    schedule 24.07.2019
comment
К вашему сведению, я понял, что оговорился, и я, по сути, использую typescript-eslint, а не ts-lint. Спасибо! - person Jimmy; 25.07.2019