Skip to content

fix(eslint-plugin): [no-unnecessary-template-expression] handle template literal type #10612

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 12 commits into from
Jan 27, 2025
Merged

fix(eslint-plugin): [no-unnecessary-template-expression] handle template literal type #10612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9bde9b8
fix(eslint-plugin): handle expressions in template literal type
yeonjuan Jan 5, 2025
d7bfc3c
Update no-unnecessary-template-expression.test.ts
yeonjuan Jan 6, 2025
556b483
add docs
yeonjuan Jan 6, 2025
d16be87
update snapshots
yeonjuan Jan 6, 2025
2ae997b
handle undefined & null
yeonjuan Jan 6, 2025
c9e1fe8
add tests
yeonjuan Jan 6, 2025
435bb86
add tests
yeonjuan Jan 6, 2025
88766d3
Merge branch 'main' into fixes/9971
yeonjuan Jan 8, 2025
b76c79f
Merge branch 'main' into fixes/9971
yeonjuan Jan 17, 2025
de4d428
apply review
yeonjuan Jan 20, 2025
256040f
apply reviews
yeonjuan Jan 23, 2025
14beb1a
add comments
yeonjuan Jan 24, 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
19 changes: 19 additions & 0 deletions packages/eslint-plugin/docs/rules/no-unnecessary-template-expression.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ The new name is a drop-in replacement with identical functionality.

const ab1 = `${'a'}${'b'}`;
const ab2 = `a${'b'}`;
type AB1 = `${'A'}${'B'}`;
type AB2 = `A${'B'}`;

const stringWithNumber = `${'1 + 1 = '}${2}`;

Expand All @@ -38,9 +40,13 @@ const stringWithBoolean = `${'true is '}${true}`;

const text = 'a';
const wrappedText = `${text}`;
type Text = 'A';
type WrappedText = `${Text}`;

declare const intersectionWithString: string & { _brand: 'test-brand' };
const wrappedIntersection = `${intersectionWithString}`;
type IntersectionWithString = string & { _brand: 'test-brand' };
type WrappedIntersection = `${IntersectionWithString}`;
```

</TabItem>
Expand All @@ -51,6 +57,15 @@ const wrappedIntersection = `${intersectionWithString}`;

const ab1 = `ab`;
const ab2 = `ab`;
type AB = `AB`;

// Transforming enum members into string unions using template literals is allowed.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, what's the reasoning for this? I'm not familiar with this usage, so I'm curious for a reference on it, and not seeing one on the issue

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kirkwaiblinger
I should have written an explanation for this, but I missed it. This is an easy way to change an enum to a union type, and the union type is not the same as the enum.

playground

enum Enum {
  A = 'A',
  B = 'B',
  C = 'C'
}

type Union = `${Enum}`;

function foo(a: Enum) {}

foo("A"); // ts error: Argument of type '"A"' is not assignable to parameter of type 'EnumA'.
foo(Enum.A);


function bar(a: Union) {}

bar("A");

typescript-eslint is also using this approach.

typescript-eslint/packages/utils/tests/ts-eslint/Rule.type-test.ts

Line 15 in e4f5a52

| `${TSESTree.AST_NODE_TYPES}`;

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok 👍 Seems plausible to me! I'll defer to you and other reviewers on this, thanks for the explanation!

enum ABC {
A = 'A',
B = 'B',
C = 'C',
}
type ABCUnion = `${ABC}`;

const stringWithNumber = `1 + 1 = 2`;

Expand All @@ -61,9 +76,13 @@ const stringWithBoolean = `true is true`;

const text = 'a';
const wrappedText = text;
type Text = 'A';
type WrappedText = Text;

declare const intersectionWithString: string & { _brand: 'test-brand' };
const wrappedIntersection = intersectionWithString;
type IntersectionWithString = string & { _brand: 'test-brand' };
type WrappedIntersection = IntersectionWithString;
```

</TabItem>
Expand Down
Loading
Loading