TypeScript imported type with the same name as a constant inside possible?

Question

I have

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

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

in Project.ts I have

export type SomeType = JSX.Element;

Why does the TS linter not show any warnings, but it will throw an error:

Identifier 'SomeType' has already been declared.

I thought types and variables can coexist with the same name?

Example: https://codesandbox.io/s/objective-glade-y94j58?file=/src/App.tsx

Answer 1

While the solution @Joel provided is a possible solution, I do not think it correctly answers the question by saying "No".

Have a look at the answers here

The answer to your question is YES you can have a type & variable with the same name since TS typing will be removed at compile time (unlike variables).

What you are looking for is the following ESLint Rule: no-shadow

// .eslintrc.js
module.exports = {
  "rules": {
    ...<your_other_rules>,
    // Note: you must disable the base rule as it can report incorrect errors
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["off", { ignoreTypeValueShadow: true, ignoreFunctionTypeParameterNameValueShadow: true }]
  }
};

Answer 2

Simple answer, nope

Even if it's declared as a type, SomeType needs to have an available identifier (aka a name not already in use in the current scope).

If you can not change the name on the type or on the variable, you can alias it.

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

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

Answer 3

Following up the discussion in the comments, I'm sharing a config with the same source code as @caTS that does not reproduce the problem, but with rollup as a bundler.

This set up does not simply turn off type safety, I get compile errors from @rollup/plugin-typescript when applicable.

The folder structure is the following:

public/
   - dist/
   - index.html
src/
   - App.tsx
   - index.tsx
   - types.ts
- package.json
- tsconfig.json
- .babelrc
- rollup.config.js

package.json

{
  "type": "module",
  "scripts": {
    "server": "http-server",
    "build/watch": "rollup --config --watch"
  },
  "dependencies": {
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-react": "^7.18.6",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^5.0.0",
    "@rollup/plugin-typescript": "^9.0.1",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "http-server": "^14.1.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.3"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "rootDir": "./src",
        "moduleResolution": "node",
        "module": "ES2020",
        "target": "ES2020",
        "strictFunctionTypes": true,
        "noImplicitAny": true,
        "strict": true,
        "jsx": "react-jsx"
    },
}

.babelrc

{
    "presets": ["@babel/preset-react"]
}

rollup.config.js

import { nodeResolve } from '@rollup/plugin-node-resolve';
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';

const environment = 'development';

const plugins = [
    replace({
        'process.env.NODE_ENV': JSON.stringify(environment),
        preventAssignment: true
    }),
    typescript({
        target: 'es5',
        module: 'ESNext',
     }),
    babel({
        babelHelpers: 'bundled',
        exclude: [/\/node_modules\//]
    }),
    commonjs(),
    nodeResolve(),
];

export default [{
    input: './src/index.tsx',
    output: {
        file: './public/dist/index.js',
        sourcemap: true,
        format: 'es'
    },
    plugins
}];

src/App.tsx

import type { SomeType } from "./types";

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

export default function App() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }

src/index.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

src/types.ts

export type SomeType = JSX.Element

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./dist/index.js"></script>
</body>
</html>