Question

我有一个带有电子的弹出 CRA，我一直试图将 .js|.jsx 文件转换为 .ts|.tsx。我遵循的步骤是：

将 tsconfig.json 文件添加到我的项目根目录。
npm 安装各种@types/** 依赖
将 ts-loader 和 source-map-loader 添加到 webpack.config.js
将文件扩展名更改为主电子进程：electron.js 和渲染器进程：renderer.js 分别为 .ts 和 .tsx

虽然我可以使用 npm start 运行应用程序，只需将我的主进程文件：electron.js 更改为 Electron.ts 以及渲染器进程文件：renderer.js 到 renderer.tsx，我是无法解决转换其他源文件时出现的问题和冲突。以下是我尝试将 .js 文件转换为 .tsx 文件的步骤：

将 .js 文件重命名为 .tsx 文件
使用 npm start
检查并修复打字稿问题，无论是编译错误还是未为类型检查器定义类型。

冲洗并重复

这是我在尝试将 .js 转换为 .tsx 源文件时遇到的一个具体问题：

//MyNav.tsx
import * as React from 'react';
import {Navbar, Nav, Collapse} from 'react-bootstrap';
import {Link} from 'react-router-dom';

const MyNav:React.FC<{}> = () => {
  return(
    <Navbar bg="light" expand="lg">
      <Navbar.Brand as={Link} to={"/"}>BRAND</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Collapse>
        <Nav className="mr-auto">      
          <Nav.Link as={Link} to={"/"}>Dashboard</Nav.Link>
        </Nav>
      </Collapse>
    </Navbar>
    );
  }
  
export default MyNav;

这是具有 MyNav 组件的父组件

//App.js <- it is still currently a .js file, I have not changed it to a .tsx
import React from 'react';
import MyNav from './MyNav';
import {HashRouter, Switch, Route} from 'react-router-dom';
import DashboardPage from './DashboardPage';

function App() {
  //...

  return (
    <div className="app">
      <HashRouter>
        <MyNav />
        <Switch>
          <Route path="/">
            <DashboardPage
              {/*various props being passed*/}
            />
          </Route>
        </Switch>
      </HashRouter>
    </div>
  );
}


export default App;

我在转换 MyNav.tsx 时遇到的错误：

<块引用>

[tsl] 错误在 C:\Users\kde-embed-soft-dev\Projects\kde-origin-connect\src\MyNav.tsx(28,5) [0] TS2769：没有与此调用匹配的过载。 [0] 最后一次重载出现以下错误。 [0] '{ bg: string; } 类型的参数展开：“lg”； __self：未定义； __source: { 文件名: 字符串;行号：编号； columnNumber：编号； }; }' 不能分配给 'Attributes & NavbarProps' 类型的参数。 [0] 对象字面量只能指定已知属性，并且在类型 'Attributes & NavbarProps' 中不存在 '__self'。

第一行告诉我应该查看的行号，但它指向的行在指向实际错误方面看起来毫无意义。

关于我的项目设置的更多信息，我仍在学习 webpack，但我已经制定了规则来查找与 ts-loader 一起使用的 .ts 和 .tsx 文件以及将 .js 文件放入source-map-loader 加载程序（尽管我在项目中的任何地方都没有看到 .map 文件）。

我已经设置了一个基本的 tsconfig.json 文件，如下所示：

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": false,
    "jsx": "react",
    "outDir": "./dist/",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "./dist",
    "types": ["node"],
    "baseUrl": "./"
  },
  "exclude": ["dist", "node_modules", "user_data", "scripts"],
  "include": ["src", "electron"]
}

类型的开发依赖项在我的 package.json 文件中如下所示：

//package.json
{
//...
  "devDependencies": {
    "@types/node": "^14.14.14",
    "@types/react": "^17.0.0",
    "@types/react-bootstrap": "^0.32.25",
    "@types/react-dom": "^17.0.0",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "electron": "^10.1.3",
    "electron-builder": "^22.8.1",
    "electron-devtools-installer": "^3.1.1",
    "electron-rebuild": "^2.0.3",
    "react-test-renderer": "^17.0.0",
    "ts-loader": "^8.0.12",
    "typescript": "^4.1.3",
    "webpack-cli": "^4.1.0"
  }
}

我开始使用类叶模块，即不依赖于其他文件的文件。然后我转到一个有依赖关系的模块，错误消息变得模糊，错误行号与我的文件不匹配，甚至超过了文件中的总行数。我了解（或者我可能不了解）该错误必须是指已编译的 tsx 文件，但我无法找到/知道该文件在我的项目中的位置。

问题

为什么我不能使用 React Bootstrap 等库中的 React 组件，即我错过了什么/完全没有做来解决匹配重载的错误。我不明白 __self 在错误消息中代表什么。
为什么我收到错误消息的错误行号，在我弹出的 CRA 电子应用程序上启用打字稿时，我可能做错了什么/遗漏了什么？
在配置 webpack 时，我是否会像在弹出的 CRA 中已经包含 babel/其他加载器时那样，在添加加载器时遇到问题？

感谢您的时间和努力。

使用库反应组件的打字稿错误：TS2769

0 个答案: