如何使用從多個ts文件生成的single.d.ts文件

Question

我使用 TypeScript 編寫了一個 React 庫，並想在另一個項目中使用它。 使用 dts-generator，我為這個庫（項目）的 multiple.ts 文件生成了 adts 文件。 本項目下的ts文件層次結構：

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

執行命令dts-generator --name TurIDM --project. --out public/turIDM.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...

我把這個 generated.d.ts 文件放在消費者項目下，這個項目中的 index.tsx 導入並使用了一些定義在那里的模塊：

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

索引.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 中的錯誤未找到模塊：錯誤：無法解析“C:\Users\syesilmurat\IdeaProjects\IkizIDM\src”中的“TurIDM/reducers/Reducers”@./src/index.tsx 13 :17-52 @ multi./src/index.tsx./turIDM/turIDM.scss

./src/index.tsx 中的錯誤未找到模塊：錯誤：無法解析“C:\Users\syesilmurat\IdeaProjects\IkizIDM\src”中的“TurIDM/containers/Main”@./src/index.tsx 14 :13-46 @ multi./src/index.tsx./turIDM/turIDM.scss

/src/index.tsx 中的錯誤未找到模塊：錯誤：無法解析“C:\Users\syesilmurat\IdeaProjects\IkizIDM\src”中的“TurIDM/containers/LoginContainer”@./src/index.tsx 15 :23-66 @ multi./src/index.tsx./turIDM/turIDM.scss

./src/index.tsx 中的錯誤未找到模塊：錯誤：無法解析“C:\Users\syesilmurat\IdeaProjects\IkizIDM\src”中的“TurIDM/util/Constants”@./src/index.tsx 16 :18-50 @ multi./src/index.tsx./turIDM/turIDM.scss 子提取文本-webpack-plugin: [0]./~/css-loader/lib/css-base.js 2.26 kB { 0} [內置] [1]./~/css-loader../~/sass-loader/lib/loader.js../turIDM/turIDM.scss

當我為同一層次結構中的每個 ts 文件生成 .d.ts 文件並將它們放在“nodeModules”下時，如下所示，它起作用了。 （為此，我在 tsconfig.json 的“compilerOptions”下添加了“declaration: true”。）。 基本上，每個模塊定義都在放置在特定文件夾層次結構中的 adts 文件中進行搜索。

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

但這不是我想要的。 我想為我的庫生成 one.d.ts 和 one.js 文件以供外部項目使用。 可能嗎？ 如果是這樣，如何？ :)

tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./public",
        "sourceMap": true,
        "noImplicitAny": false,
        "experimentalDecorators": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "lib": [
            "es6",
            "es7",
            "dom"
        ],
        "declaration": true,
        "exclude": [
            "node_modules",
            "public"
        ]
    }
}

Answer 1

兩件事情：

我會使用編譯器本身生成類型，不需要外部生成器。 您可以通過將declaration屬性添加到tsconfig.json來執行此操作，請嘗試將入口點添加為“文件”參數：

{
    "files": [
        "./path/to/entry/file"
    ]
    "compilerOptions": {
        "declaration": true
    }
}

要為消費者指定輸入的位置，您需要擴展庫的package.json

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

這樣，當在其他項目中使用該庫時，這些類型應該可以正常工作。

如何使用從多個ts文件生成的single.d.ts文件

問題描述

1 個解決方案

解決方案1
-1 2017-07-15 09:52:14

如何使用從多個ts文件生成的single.d.ts文件

問題描述

1 個解決方案

解決方案1 -1 2017-07-15 09:52:14

解決方案1
-1 2017-07-15 09:52:14