Checking for default values in Typescript

Question

Is there any way in typescript / typescript-eslint to render an error when an optional parameter does not have a a default value? I am trying to convert my React codebase from JSX to TSX and no longer having the warnings about not having defaultProps defined is worrisome. Thanks.

bad: title does not have default prop value

import * as React from 'react';

interface Props {
  title?: string;
}

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

export default SampleComponent;

good: title has default prop value

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;

Tim Perry Tim Perry · Accepted Answer · 2019-07-24T10:19:21

This isn't something TypeScript will do for you, so there's no reliable & easy option available.

However, with a little work it is something that could be implemented as an ESLint rule. Linting rules are given the abstract syntax tree of your code (AST - a data structure describing the code of a program), and can then run checks against it, such as getting every parameter, filtering to just the optional parameters, and then checking if those all have a default value.

To actually do this, I would suggest:

Set up ESLint with the ESLint-TypeScript plugin in your project
Read this introduction to writing a custom ESLint rule: https://blog.yonatan.dev/writing-a-custom-eslint-rule-to-spot-undeclared-props/ (note that this is looking at the JavaScript AST, not TypeScript, but it's very similar, and pure JS is a good starting point)
Take a look at simple existing TS linting rules like no-parameter-properties (no private/public/etc properties on constructor arguments), and make sure you understand how they work
Have a go at writing your own

Note that tslint also exists, as a purely TypeScript-focused linting tool. This may be an option, and historically this has been more popular for TS linting, but it's now deprecated in favour of eslint-typescript, so I would avoid starting with it nowadays.

Checking for default values in Typescript

1 Answers