Back to Biomejs

noParameterProperties

src/content/docs/linter/rules/no-parameter-properties.mdx

latest4.2 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="TypeScript and TSX" icon="seti:typescript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/style/noParameterProperties`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Inspired from [`@typescript-eslint/parameter-properties`](https://typescript-eslint.io/rules/parameter-properties)

How to configure

json
{
	"linter": {
		"rules": {
			"style": {
				"noParameterProperties": "error"
			}
		}
	}
}

Description

Disallow the use of parameter properties in class constructors.

TypeScript includes a "parameter properties" shorthand for declaring a class constructor parameter and class property in one location. Parameter properties can confuse those new to TypeScript as they are less explicit than other ways of declaring and initializing class members. Moreover, private class properties, starting with #, cannot be turned into "parameter properties". This questions the future of this feature.

Examples

Invalid

ts
class A {
    constructor(readonly name: string) {}
}
<pre class="language-text"><code class="language-text">code-block.ts:2:17 <a href="https://biomejs.dev/linter/rules/no-parameter-properties">lint/style/noParameterProperties</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Use a more explicit </span><span style="color: Orange;"><strong>class property</strong></span><span style="color: Orange;"> instead of a </span><span style="color: Orange;"><strong>parameter property</strong></span><span style="color: Orange;">.</span> <strong>1 │ </strong>class A &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> constructor(readonly name: string) &#123;&#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125; <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;"><strong>Parameter properties</strong></span><span style="color: lightgreen;"> are less explicit than other ways of declaring and initializing </span><span style="color: lightgreen;"><strong>class properties</strong></span><span style="color: lightgreen;">.</span> </code></pre>

Valid

ts
class A {
    constructor(name: string) {}
}
</TabItem> </Tabs>