Skip to content

No Inline Signature Types

Suggestion
small-rules/no-inline-signature-types

Disallow inline object types in parameter and return type annotations; declare a named interface instead.

Rationale

An object type written inline in a parameter or a return type has no name. Callers can’t import it. Editors list every property on every hover. The next function that needs the same properties copies them. A named interface gives the type one home and one name, such as BadgeProperties for the props of Badge.

Return types include type predicates. The rule reports node is Reference & { name: Identifier } like any other return type. Set returnTypes to false to check only parameters.

Set functions to components to check only PascalCase function components. Those include the functions passed to memo or forwardRef. Set position to bare to report only an annotation that’s the object type itself. Set it to wrapped to also report one inside a generic such as Readonly. The default, anywhere, also looks inside unions, intersections, arrays, and tuples.

Diagnostic Messages

inlineParameterType
Parameter `{{parameter}}` uses an inline object type. Declare a named interface and reference it instead.
inlineReturnType
The return type uses an inline object type. Declare a named interface and reference it instead.

Configuration

This rule accepts one options object after the severity.

functionsOptional

Which functions to check: all checks every function and signature; components checks only PascalCase function components

positionOptional

Where an inline object type is reported: bare only as the whole annotation, wrapped also inside generic type arguments such as Readonly<{...}>, anywhere also inside unions, intersections, arrays, and tuples

returnTypesOptional

Whether to also check return types, including the type in a value is ... or asserts value is ... predicate

{
"jsPlugins": [
"@pobammer-ts/small-rules"
],
"rules": {
"small-rules/no-inline-signature-types": [
"error",
{
"functions": "all",
"position": "anywhere",
"returnTypes": true
}
]
}
}

Examples

Inline props type
export function Badge({ label }: Readonly<{ label: string }>): ReactNode {
return <span>{label}</span>;
}
Named props interface
interface BadgeProperties {
readonly label: string;
}
export function Badge({ label }: Readonly<BadgeProperties>): ReactNode {
return <span>{label}</span>;
}