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

我使用TypeScript编写了一个React库，并希望使用它从另一个项目。使用dts-generator，我为该库（Project）的多个.ts文件生成了一个.d.ts文件，用于。在该项目下的TS文件层次：如何使用从多个ts文件生成的单个.d.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...

我把这个产生在这个项目中的进口消费项目和 index.tsx下.d.ts文件，并使用定义有一些模块：

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

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

<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构建此代码时，出现以下错误消息。

ERROR in ./src/index.tsx Module not found: Error: Can't resolve 'TurIDM/reducers/Reducers' in 'C:\Users\syesilmurat\IdeaProjects\IkizIDM\src' @ ./src/index.tsx 13:17-52 @ multi ./src/index.tsx ./turIDM/turIDM.scss

ERROR in ./src/index.tsx Module not found: Error: Can't resolve 'TurIDM/containers/Main' in 'C:\Users\syesilmurat\IdeaProjects\IkizIDM\src' @ ./src/index.tsx 14:13-46 @ multi ./src/index.tsx ./turIDM/turIDM.scss

ERROR in ./src/index.tsx Module not found: Error: Can't resolve 'TurIDM/containers/LoginContainer' in 'C:\Users\syesilmurat\IdeaProjects\IkizIDM\src' @ ./src/index.tsx 15:23-66 @ multi ./src/index.tsx ./turIDM/turIDM.scss

ERROR in ./src/index.tsx Module not found: Error: Can't resolve 'TurIDM/util/Constants' in 'C:\Users\syesilmurat\IdeaProjects\IkizIDM\src' @ ./src/index.tsx 16:18-50 @ multi ./src/index.tsx ./turIDM/turIDM.scss Child extract-text-webpack-plugin: [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [1] ./~/css-loader!./~/sass-loader/lib/loader.js!./turIDM/turIDM.scss

当我生成.d.ts文件为每个在同一层级TS文件和将它们放在“nodeModules”，如下图所示，它的工作原理。（要做到这一点，我在tsconfig.json中的“compilerOptions”下添加了“declarations：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文件供外部项目使用。是否可以使用？如果是这样，如何:)

来源

2017-07-07 Serdar Yeşilmurat

两件事情：

我使用的编译器本身，不再需要外接发电机将产生的分型。您可以通过添加declaration属性的tsconfig.json做到这一点：

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

要指定的分型是在对消费者来说，你需要扩大图书馆的package.json

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

这样使用时其他项目的图书馆，类型应该工作得很好。

来源

2017-07-15 09:52:14

首先，感谢您的回复。我已经在我的tsconfig.json中声明了：true，但生成的index.d.ts文件是空的。基本上，我的问题是生成一个.d.ts文件。 –

你可以发表你的'tsconfig.json'看起来像什么吗？ –

'“编译器选项”：{ “outDir”：“。/公共 “ ”sourceMap“：真， ”noImplicitAny“：假， ”experimentalDecorators“：真， ”模块“： ”CommonJS的“， ”目标“： ”ES5“， ”JSX“：” 反应” “LIB”： “ES6”， “ES7”， “DOM” ]， “宣言”：真实， “排除”： “node_modules”， “公共” ] } } ' –

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

回答

相关问题