Is it necessary to alert when there is a collision between a TypeScript type and a constant with the same name in a

Question

Is it necessary to alert when there is a collision between a TypeScript type and a constant with the same name in a

I am encountering an issue with my TypeScript code. Here is a snippet from Project.ts:

import type { SomeType } from '../../types/Project';
// import { SomeType } from '../../types/Project'; tried this too

const SomeType = ({ s }: { s: SomeType }): JSX.Element => {
  return <>${s}</>;
};

Additionally, in the same file, I have:

export type SomeType = JSX.Element;

Even though I thought types and variables could coexist with the same name, the TS linter does not show any warnings but throws an error:

Identifier 'SomeType' has already been declared.

This has left me puzzled. Any ideas why this might be happening?

You can view this example on CodeSandbox: https://codesandbox.io/s/objective-glade-y94j58?file=/src/App.tsx

javascript typescript

Answer 1

Answer №1

Although the solution provided by @Joel is a potential answer, I believe it does not fully address the question when simply stating "No".

To find more insights, you can refer to the solutions available here

Your query has an affirmative answer: YES, it is possible to use a type and variable with the same name in TypeScript as the typing will be eliminated during compilation (unlike variables).

The specific ESLint Rule that you are searching for is detailed here: no-shadow

// .eslintrc.js
module.exports = {
  "rules": {
    ...<your_other_rules>,
    // Make sure to disable the base rule to avoid incorrect errors being reported
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["off", { ignoreTypeValueShadow: true, ignoreFunctionTypeParameterNameValueShadow: true }]
  }
};

Answer 2

Although the solution provided by @Joel is a potential answer, I believe it does not fully address the question when simply stating "No".

To find more insights, you can refer to the solutions available here

Your query has an affirmative answer: YES, it is possible to use a type and variable with the same name in TypeScript as the typing will be eliminated during compilation (unlike variables).

The specific ESLint Rule that you are searching for is detailed here: no-shadow

// .eslintrc.js
module.exports = {
  "rules": {
    ...<your_other_rules>,
    // Make sure to disable the base rule to avoid incorrect errors being reported
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["off", { ignoreTypeValueShadow: true, ignoreFunctionTypeParameterNameValueShadow: true }]
  }
};

Answer 3

Answer №2

Short and sweet, nah

Even if it's defined as a type, SomeType must have an available identifier (meaning a name not already utilized in the current context).

If altering the name of either the type or variable is not an option, you can create an alias for it.

import type { SomeType as AnotherNameForSameType } from '../../types/Project';

const SomeType = ({ s }: { s: AnotherNameForSameType }): JSX.Element => {
  return <>${s}</>;
};

Answer 4

Short and sweet, nah

Even if it's defined as a type, SomeType must have an available identifier (meaning a name not already utilized in the current context).

If altering the name of either the type or variable is not an option, you can create an alias for it.

import type { SomeType as AnotherNameForSameType } from '../../types/Project';

const SomeType = ({ s }: { s: AnotherNameForSameType }): JSX.Element => {
  return <>${s}</>;
};

Is it necessary to alert when there is a collision between a TypeScript type and a constant with the same name in a

Answer №1

Answer №2

Similar questions

Fade or animate the opacity in jQuery to change the display type to something other than block

What is the best way to create a function that can identify and change URLs within a JSON file?

Leveraging Javascript within MVC3, either on a master page or child page

I am currently struggling with a Typescript issue that I have consulted with several individuals about. While many have found a solution by upgrading their version, unfortunately, it

Can Puppeteer extract the complete HTML content of a webpage, including any shadow roots?

Best practices for effectively dismantling a Paper.js Scope

JSReports encountered an unexpected token "<" in the JSON at position 0

PHP returns the result of form submission to JavaScript, allowing for distinction between successful and unsuccessful outcomes

The Angular $http.post() successfully communicates with the server, however, it does not trigger any alerts within

Encountering surprising results while verifying a session token with parse.com

Leveraging JQuery to Invoke Partial View

Converting a string to a Date using TypeScript

Updating nested forms in Angular 4

What is the best way to change CSS style for a button when clicked using JavaScript?

The output is generated by React useContext with a delay

Evaluating function declaration - comparing interface to type alias

Print out two forms separately using HTML5

Creating dynamic types in TypeScript through existing types

How to conceal certain columns in Angular Material when in mobile view

Error 400: Token Obtain Pair request failed in Django REST with simpleJWT and Vue 3 composition API