Skip to main content

sort-type-constituents

Enforce constituents of a type union/intersection to be sorted alphabetically.

🔧

Some problems reported by this rule are automatically fixable by the --fix ESLint command line option.

💡

Some problems reported by this rule are manually fixable by editor suggestions.

Sorting union (|) and intersection (&) types can help:

  • keep your codebase standardized
  • find repeated types
  • reduce diff churn

This rule reports on any types that aren't sorted alphabetically.

Types are sorted case-insensitively and treating numbers like a human would, falling back to character code sorting in case of ties.

.eslintrc.cjs
module.exports = {
"rules": {
"@typescript-eslint/sort-type-constituents": "error"
}
};

Try this rule in the playground ↗

Examples

type T1 = B | A;

type T2 = { b: string } & { a: string };

type T3 = [1, 2, 4] & [1, 2, 3];

type T4 =
| [1, 2, 4]
| [1, 2, 3]
| { b: string }
| { a: string }
| (() => void)
| (() => string)
| 'b'
| 'a'
| 'b'
| 'a'
| readonly string[]
| readonly number[]
| string[]
| number[]
| B
| A
| string
| any;
Open in Playground

Options

This rule accepts the following options:

type Options = [
{
/** Whether to sort using case sensitive sorting. */
caseSensitive?: boolean;
/** Whether to check intersection types. */
checkIntersections?: boolean;
/** Whether to check union types. */
checkUnions?: boolean;
/** Ordering of the groups. */
groupOrder?: (
| 'conditional'
| 'function'
| 'import'
| 'intersection'
| 'keyword'
| 'literal'
| 'named'
| 'nullish'
| 'object'
| 'operator'
| 'tuple'
| 'union'
)[];
},
];

const defaultOptions: Options = [
{
checkIntersections: true,
checkUnions: true,
caseSensitive: false,
groupOrder: [
'named',
'keyword',
'operator',
'literal',
'function',
'import',
'conditional',
'object',
'tuple',
'intersection',
'union',
'nullish',
],
},
];

caseSensitive

Whether to sort using case sensitive string comparisons.

Examples of code with { "caseSensitive": true }:

type T = 'DeletedAt' | 'DeleteForever';
Open in Playground

checkIntersections

Whether to check intersection types (&).

Examples of code with { "checkIntersections": true } (the default):

type ExampleIntersection = B & A;
Open in Playground

checkUnions

Whether to check union types (|).

Examples of code with { "checkUnions": true } (the default):

type ExampleUnion = B | A;
Open in Playground

groupOrder

Each constituent of the type is placed into a group, and then the rule sorts alphabetically within each group. The ordering of groups is determined by this option.

  • conditional - Conditional types (A extends B ? C : D)
  • function - Function and constructor types (() => void, new () => type)
  • import - Import types (import('path'))
  • intersection - Intersection types (A & B)
  • keyword - Keyword types (any, string, etc)
  • literal - Literal types (1, 'b', true, etc)
  • named - Named types (A, A['prop'], B[], Array<C>)
  • object - Object types ({ a: string }, { [key: string]: number })
  • operator - Operator types (keyof A, typeof B, readonly C[])
  • tuple - Tuple types ([A, B, C])
  • union - Union types (A | B)
  • nullish - null and undefined

For example, configuring the rule with { "groupOrder": ["literal", "nullish" ]}:

type ExampleGroup = null | 123;
Open in Playground

When Not To Use It

This rule is purely a stylistic rule for maintaining consistency in your project. You can turn it off if you don't want to keep a consistent, predictable order for intersection and union types. However, keep in mind that inconsistent style can harm readability in a project.

Resources