8000 docs(eslint-plugin): [prefer-nullish-coalescing] streamline code examples by OlivierZal · Pull Request #10735 · typescript-eslint/typescript-eslint · GitHub
[go: up one dir, main page]
Skip to content

docs(eslint-plugin): [prefer-nullish-coalescing] streamline code examples #10735

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 3, 2025
Merged

docs(eslint-plugin): [prefer-nullish-coalescing] streamline code examples #10735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3d9cb2e
docs(eslint-plugin): [prefer-nullish-coalescing] streamline code exam…
OlivierZal Jan 28, 2025
a20c5fa
make examples consistent
OlivierZal Feb 1, 2025
acb35a8
fix examples
OlivierZal Feb 2, 2025
f891ea7
fix examples 2
OlivierZal Feb 2, 2025
a26a25a
update snapshots
OlivierZal Feb 2, 2025
311a80b
Merge branch 'main' into prefer-nullish-coalescing-10566
OlivierZal Feb 2, 2025
bee3fdb
Merge branch 'main'
JoshuaKGoldberg Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 91 additions & 59 deletions packages/eslint-plugin/docs/rules/prefer-nullish-coalescing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,46 +28,48 @@ This rule will not work as expected if [`strictNullChecks`](https://www.typescri

{/* insert option description */}

Incorrect code for `ignoreTernaryTests: false`, and correct code for `ignoreTernaryTests: true`:

```ts option='{ "ignoreTernaryTests": false }' showPlaygroundButton
const foo: any = 'bar';
foo !== undefined && foo !== null ? foo : 'a string';
foo === undefined || foo === null ? 'a string' : foo;
foo == undefined ? 'a string' : foo;
foo == null ? 'a string' : foo;

const foo: string | undefined = 'bar';
foo !== undefined ? foo : 'a string';
foo === undefined ? 'a string' : foo;

const foo: string | null = 'bar';
foo !== null ? foo : 'a string';
foo ? foo : 'a string';
foo === null ? 'a string' : foo;
!foo ? 'a string' : foo;
Examples of code for this rule with `{ ignoreTernaryTests: false }`:

<Tabs>
<TabItem value="❌ Incorrect">

```ts option='{ "ignoreTernaryTests": false }'
declare const a: any;
a !== undefined && a !== null ? a : 'a string';
a === undefined || a === null ? 'a string' : a;
a == undefined ? 'a string' : a;
a == null ? 'a string' : a;

declare const b: string | undefined;
b !== undefined ? b : 'a string';
b === undefined ? 'a string' : b;
b ? b : 'a string';
!b ? 'a string' : b;

declare const c: string | null;
c !== null ? c : 'a string';
c === null ? 'a string' : c;
c ? c : 'a string';
!c ? 'a string' : c;
```

Correct code for `ignoreTernaryTests: false`:
</TabItem>
<TabItem value="✅ Correct">

```ts option='{ "ignoreTernaryTests": false }' showPlaygroundButton
const foo: any = 'bar';
foo ?? 'a string';
foo ?? 'a string';
foo ?? 'a string';
foo ?? 'a string';
```ts option='{ "ignoreTernaryTests": false }'
declare const a: any;
a ?? 'a string';

const foo: string | undefined = 'bar';
foo ?? 'a string';
foo ?? 'a string';
declare const b: string | undefined;
b ?? 'a string';

const foo: string | null = 'bar';
foo ?? 'a string';
foo ?? 'a string';
foo ?? 'a string';
foo ?? 'a string';
declare const c: string | null;
c ?? 'a string';
```

</TabItem>
</Tabs>

### `ignoreConditionalTests`

{/* insert option description */}
Expand All @@ -76,9 +78,12 @@ Generally expressions within conditional tests intentionally use the falsy fallt

If you're looking to enforce stricter conditional tests, you should consider using the `strict-boolean-expressions` rule.

Incorrect code for `ignoreConditionalTests: false`, and correct code for `ignoreConditionalTests: true`:
Examples of code for this rule with `{ ignoreConditionalTests: false }`:

<Tabs>
<TabItem value="❌ Incorrect">

```ts option='{ "ignoreConditionalTests": false }' showPlaygroundButton
```ts option='{ "ignoreConditionalTests": false }'
declare const a: string | null;
declare const b: string | null;

Expand All @@ -93,9 +98,10 @@ for (let i = 0; a || b; i += 1) {}
a || b ? true : false;
```

Correct code for `ignoreConditionalTests: false`:
</TabItem>
<TabItem value="✅ Correct">

```ts option='{ "ignoreConditionalTests": false }' showPlaygroundButton
```ts option='{ "ignoreConditionalTests": false }'
declare const a: string | null;
declare const b: string | null;

Expand All @@ -110,6 +116,9 @@ for (let i = 0; a ?? b; i += 1) {}
(a ?? b) ? true : false;
```

</TabItem>
</Tabs>

### `ignoreMixedLogicalExpressions`

{/* insert option description */}
Expand All @@ -118,9 +127,12 @@ Generally expressions within mixed logical expressions intentionally use the fal

If you're looking to enforce stricter conditional tests, you should consider using the `strict-boolean-expressions` rule.

Incorrect code for `ignoreMixedLogicalExpressions: false`, and correct code for `ignoreMixedLogicalExpressions: true`:
Examples of code for this rule with `{ ignoreMixedLogicalExpressions: false }`:

<Tabs>
<TabItem value="❌ Incorrect">

```ts option='{ "ignoreMixedLogicalExpressions": false }' showPlaygroundButton
```ts option='{ "ignoreMixedLogicalExpressions": false }'
declare const a: string | null;
declare const b: string | null;
declare const c: string | null;
Expand All @@ -133,9 +145,10 @@ a || (b && c) || d;
a || (b && c && d);
```

Correct code for `ignoreMixedLogicalExpressions: false`:
</TabItem>
<TabItem value="✅ Correct">

```ts option='{ "ignoreMixedLogicalExpressions": false }' showPlaygroundButton
```ts option='{ "ignoreMixedLogicalExpressions": false }'
declare const a: string | null;
declare const b: string | null;
declare const c: string | null;
Expand All @@ -148,6 +161,9 @@ a ?? (b && c) ?? d;
a ?? (b && c && d);
```

</TabItem>
</Tabs>

**_NOTE:_** Errors for this specific case will be presented as suggestions (see below), instead of fixes. This is because it is not always safe to automatically convert `||` to `??` within a mixed logical expression, as we cannot tell the intended precedence of the operator. Note that by design, `??` requires parentheses when used with `&&` or `||` in the same expression.

### `ignorePrimitives`
Expand All @@ -156,49 +172,65 @@ a ?? (b && c && d);

If you would like to ignore expressions containing operands of certain primitive types that can be falsy then you may pass an object containing a boolean value for each primitive:

- `string: true`, ignores `null` or `undefined` unions with `string` (default: false).
- `number: true`, ignores `null` or `undefined` unions with `number` (default: false).
- `bigint: true`, ignores `null` or `undefined` unions with `bigint` (default: false).
- `boolean: true`, ignores `null` or `undefined` unions with `boolean` (default: false).
- `string: true`, ignores `null` or `undefined` unions with `string` (default: `false`).
- `number: true`, ignores `null` or `undefined` unions with `number` (default: `false`).
- `bigint: true`, ignores `null` or `undefined` unions with `bigint` (default: `false`).
- `boolean: true`, ignores `null` or `undefined` unions with `boolean` (default: `false`).

Incorrect code for `ignorePrimitives: { string: false }`, and correct code for `ignorePrimitives: { string: true }`:
Examples of code for this rule with `{ ignorePrimitives: { string: false } }`:

<Tabs>
<TabItem value="❌ Incorrect">

```ts option='{ "ignorePrimitives": { "string": false } }'
declare const foo: string | undefined;

```ts option='{ "ignorePrimitives": { "string": true } }' showPlaygroundButton
const foo: string | undefined = 'bar';
foo || 'a string';
```

Correct code for both `ignorePrimitives: { string: false }` and `ignorePrimitives: { string: true }`:
</TabItem>
<TabItem value="✅ Correct">

```ts option='{ "ignorePrimitives": { "string": false } }'
declare const foo: string | undefined;

```ts option='{ "ignorePrimitives": { "string": true } }' showPlaygroundButton
const foo: string | undefined = 'bar';
foo ?? 'a string';
```

</TabItem>
</Tabs>

Also, if you would like to ignore all primitives types, you can set `ignorePrimitives: true`. It is equivalent to `ignorePrimitives: { string: true, number: true, bigint: true, boolean: true }`.

### `ignoreBooleanCoercion`

{/* insert option description */}

Incorrect code for `ignoreBooleanCoercion: false`, and correct code for `ignoreBooleanCoercion: true`:
Examples of code for this rule with `{ ignoreBooleanCoercion: false }`:

<Tabs>
<TabItem value="❌ Incorrect">

```ts option='{ "ignoreBooleanCoercion": true }' showPlaygroundButton
let a: string | true | undefined;
let b: string | boolean | undefined;
```ts option='{ "ignoreBooleanCoercion": false }'
declare const a: string | true | undefined;
declare const b: string | boolean | undefined;

const x = Boolean(a || b);
```

Correct code for `ignoreBooleanCoercion: false`:
</TabItem>
<TabItem value="✅ Correct">

```ts option='{ "ignoreBooleanCoercion": false }' showPlaygroundButton
let a: string | true | undefined;
let b: string | boolean | undefined;
```ts option='{ "ignoreBooleanCoercion": false }'
declare const a: string | true | undefined;
declare const b: string | boolean | undefined;

const x = Boolean(a ?? b);
```

</TabItem>
</Tabs>

### `allowRuleToRunWithoutStrictNullChecksIKnowWhatIAmDoing`

:::danger Deprecated
Expand Down
Loading
Loading
0