Question

我使用TypeScript编写了一个React库，并希望从中使用它另一个项目。使用dts-generator，我生成了一个.d.ts文件该库的多个.ts文件（Project）。 ts文件层次结构这个项目：

Project
 - src
  - actions
    Action.ts
    ActionTypes.ts
  - components
     // Some ts files
  - containers
     // Some ts files
  - reducers
    Reducers.ts

生成的.d.ts文件在执行命令后如下所示项目文件夹下的dts-generator --name TurIDM --project . --out public/turIDM.d.ts。

declare module 'TurIDM/actions/ActionTypes' {
    export const ACTIVE_MENU_CHANGE = "ACTIVE_MENU_CHANGE";
    export const AUTHENTICATE = "AUTHENTICATE";

}
declare module 'TurIDM/reducers/Reducers' {
     const reducers: ReduxActions.Reducer<StoreState, any>;
    export default reducers;

}

// Rest of the module declarations...

我把这个生成的.d.ts文件放在了消费者项目下 index.tsx在这个项目中导入并使用那里定义的一些模块：

ConsumerProject
 - public
    index.js
 - src
    index.tsx
 - turIDM
    turIDM.d.ts
    turIDM.js
 index.html

index.jsx：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import { logger } from "redux-logger";
import {Route, Switch} from "react-router";
import { ConnectedRouter, routerMiddleware } from "react-router-redux";
import createHistory from "history/createBrowserHistory"
import reducers from "TurIDM/reducers/Reducers";
import Main from "TurIDM/containers/Main";
import Login from "TurIDM/containers/LoginContainer";
import {LOGIN_PATH, MAIN_PATH} from "TurIDM/util/Constants";

const history = createHistory();
const middleware = routerMiddleware(history);
const store = createStore(reducers, applyMiddleware(middleware));

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route path={LOGIN_PATH} component={Login}/>
                <Route path={MAIN_PATH} component={Main}/>
            </Switch>
        </ConnectedRouter>
    </Provider>,
    document.getElementById("main")
);

添加了turIDM.js和index.js（由webpack从index.jsx生成）在index.html：

<html lang="en"<head</head<body <div id="main"></div    <script
   src="turIDM/turIDM.js"></script  <script
   src="public/index.js"></script</body</html>

当我使用webpack构建此代码时，出现以下错误消息。

   ./src/index.tsx中的错误找不到模块：错误：无法解决   'TurIDM / Reducer / Reducers'中   'C：\ Users \ syesilmurat \ IdeaProjects \ IkizIDM \ src'@ ./src/index.tsx   13：17-52 @ multi ./src/index.tsx ./turIDM/turIDM.scss
      ./src/index.tsx中的错误找不到模块：错误：无法解决   'TurIDM / containers / Main'中   'C：\ Users \ syesilmurat \ IdeaProjects \ IkizIDM \ src'@ ./src/index.tsx   14：13-46 @ multi ./src/index.tsx ./turIDM/turIDM.scss
      ./src/index.tsx中的错误找不到模块：错误：无法解决   'TurIDM / containers / LoginContainer'中   'C：\ Users \ syesilmurat \ IdeaProjects \ IkizIDM \ src'@ ./src/index.tsx   15：23-66 @ multi ./src/index.tsx ./turIDM/turIDM.scss
      ./src/index.tsx中的错误找不到模块：错误：无法解决   'TurIDM / util / Constants'中   'C：\ Users \ syesilmurat \ IdeaProjects \ IkizIDM \ src'@ ./src/index.tsx   16：18-50 @ multi ./src/index.tsx ./turIDM/turIDM.scss儿童   提取文本-的WebPack-插件：          [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]          [1] ./~/css-loader！./~ / sass-loader / lib / loader.js！./ turIDM / turIDM.scss

当我为同一层次结构中的每个ts文件生成.d.ts文件时把它们放在“nodeModules”下，如下图所示，它可以工作。（为此，我在tsconfig.json中的“compilerOptions”下添加了“declaration：true”。）。基本上，在放置的.d.ts文件中搜索每个模块定义具有特定的文件夹层次结构。

Project
   - nodeModules
     - TurIDM
      - actions
        Action.d.ts
        ActionTypes.d.ts
      - components
         // Some .d.ts files
      - containers
         // Some .d.ts files
      - reducers
        Reducers.d.ts

但这不是我想要的。我想生成一个.d.ts和我的库的一个.js文件供外部项目使用。是吗可能？如果是这样，如何：）

Answer 1

两件事：

我会使用编译器本身生成输入，不需要外部生成器。您可以通过将declaration属性添加到tsconfig.json：

来执行此操作

{
    "compilerOptions": {
        "declaration": true
    }
}

要指定消费者的打字位置，您需要扩展图书馆的package.json

{
    "typings": "./path/to/the/generated/index.d.ts"
}

这种方式在其他项目中使用库时，类型应该可以正常工作。

如何使用从多个ts文件生成的单个.d.ts文件

1 个答案: