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

Posted

技术标签:

【中文标题】如何使用从多个 ts 文件生成的单个 .d.ts 文件【英文标题】:How to use single .d.ts file generated from multiple ts files 【发布时间】:2017-12-11 10:31:19 【问题描述】:

我使用 TypeScript 编写了一个 React 库,并想在另一个项目中使用它。使用 dts-generator,我为这个库(项目)的多个 .ts 文件生成了一个 .d.ts 文件。本项目下的ts文件层次结构:

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

在Project文件夹下执行dts-generator --name TurIDM --project . --out public/turIDM.d.ts命令后生成的.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/reducers/Reducers' in '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 @多./src/index.tsx ./turIDM/turIDM.scss

./src/index.tsx 中的错误未找到模块:错误:无法解析 'TurIDM/containers/LoginContainer' 在 'C:\Users\syesilmurat\IdeaProjects\IkizIDM\src' @ ./src/index.tsx 15:23-66 @多./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 Child 提取文本 webpack 插件: [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”。)。 基本上,每个模块定义都在一个 .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 文件以供外部项目使用。可能吗?如果是这样,怎么做? :)

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"
        ]
    

【问题讨论】:

【参考方案1】:

两件事:

我会使用编译器本身生成类型,不需要外部生成器。您可以通过将declaration 属性添加到tsconfig.json 来做到这一点,请尝试将入口点添加为“文件”参数:


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

要为消费者指定输入的位置,您需要扩展库的package.json


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

这样在其他项目中使用该库时,类型应该可以正常工作。

【讨论】:

首先感谢您的回复。我的 tsconfig.json 中已经有声明:true,但生成的 index.d.ts 文件为空。基本上,我的问题是生成一个 .d.ts 文件。 您的配置中没有 "files" 键。请尝试将入口点添加为 "files" 参数,它应该可以使 d.ts 生成工作

以上是关于如何使用从多个 ts 文件生成的单个 .d.ts 文件的主要内容,如果未能解决你的问题,请参考以下文章

如何从流代码生成 .d.ts 类型?

如何使用 webpack 生成 d.ts 和 d.ts.map 文件?

控制 web essential 如何从 .cs 文件生成 d.ts 文件

TypeScript 类型定义文件(*.d.ts)自动生成工具

如何从 github 安装 .d.ts 文件:DefinitelyTypes using typings

如何使用在 .d.ts 文件中定义类型的模块?