当 TypeScript 类型和常量在同一模块中共享相同名称时发出警告？

Question

当 TypeScript 类型和常量在同一模块中共享相同名称时发出警告？

我有

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

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

Run Code Online (Sandbox Code Playgroud)

在Project.ts我有

export type SomeType = JSX.Element;

Run Code Online (Sandbox Code Playgroud)

为什么 TS linter 不显示任何警告，但会抛出错误：

Identifier 'SomeType' has already been declared.

我认为类型和变量可以同名共存？

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

Answer 1

geo*_*rey -3

继评论中的讨论之后，我共享一个与@caTS具有相同源代码的配置，该配置不会重现问题，但将汇总作为捆绑器。

此设置不仅仅关闭类型安全，我还会在@rollup/plugin-typescript适用时收到编译错误。

文件夹结构如下：

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

Run Code Online (Sandbox Code Playgroud)

包.json

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

Run Code Online (Sandbox Code Playgroud)

tsconfig.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"
  }
}

Run Code Online (Sandbox Code Playgroud)

.babelrc

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

Run Code Online (Sandbox Code Playgroud)

rollup.config.js

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

Run Code Online (Sandbox Code Playgroud)

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>
    );
  }

Run Code Online (Sandbox Code Playgroud)

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>
);

Run Code Online (Sandbox Code Playgroud)

src/types.ts

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
}];

Run Code Online (Sandbox Code Playgroud)

公共/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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，11 月前
查看次数：	2922 次
最近记录：	1 年，11 月前