prefer-destructuring-assignment
Rule category
Style.
What it does
Enforces the use of destructuring assignment over property assignment.
Examples
This rule aims to enforce the use of destructuring assignment over property assignment.
Failing
import React from "react";
interface ExampleProps {
ExampleProps.items: string[]items: string[];
}
function function Example(props: ExampleProps): React.JSX.ElementExample(props: ExamplePropsprops: ExampleProps) {
const const items: string[]items = props: ExamplePropsprops.ExampleProps.items: string[]items;
// - Prefer destructuring assignment.
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{const items: string[]items}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}import React from "react";
interface ExampleProps {
ExampleProps.items: string[]items: string[];
}
function function Example(props: ExampleProps): React.JSX.ElementExample(props: ExamplePropsprops: ExampleProps) {
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{props: ExamplePropsprops.ExampleProps.items: string[]items}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
// - Prefer destructuring assignment.
}Passing
import React from "react";
interface ExampleProps {
ExampleProps.items: string[]items: string[];
}
function function Example(props: ExampleProps): React.JSX.ElementExample(props: ExamplePropsprops: ExampleProps) {
const { const items: string[]items } = props: ExamplePropsprops;
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{const items: string[]items}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}import React from "react";
interface ExampleProps {
ExampleProps.items: string[]items: string[];
}
function function Example({ items }: ExampleProps): React.JSX.ElementExample({ items: string[]items }: ExampleProps) {
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{items: string[]items}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}import React from "react";
interface ExampleProps {
ExampleProps.items: string[]items: string[];
}
function function Example({ items, ...rest }: ExampleProps): React.JSX.ElementExample({ items: string[]items, ...rest: {}rest }: ExampleProps) {
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div {...rest: {}rest}>{items: string[]items}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>;
}