使用 Redux、Typescript 在与 JS 模块不同的文件夹中键入。如何告诉它模块所在的位置？

Question

我在我的应用程序中使用 Redux。我正在使用 Visual Studio 2015 和 npm 来下载 Redux 作为依赖项。

我有以下文件夹结构：

MySolution.sln
├── node_modules
│   ├── redux
│   │   ├── index.d.ts
|   |   ├── dist
│   │   |   ├── redux.js
│   │   |   ├── redux.min.js
├── Scripts
│   ├── myscript.ts
│   ├── myscript.js

Redux 的节点结构与使用 npm 下载时的节点结构相同

npm install redux

我有一个使用 Redux 的 TypeScript 脚本 (myscript.ts)，我从中导入 createStore 和 combineReducers。

myscript.ts

/// <reference path="../node_modules/redux/index.d.ts" />
import { combineReducers, createStore } from "../node_modules/redux/index";

//... more code
const myApp = combineReducers({
    SelectedAnswers: selectedAnswers
});

var store = createStore(myApp);

编译为以下内容 (myscript.js):

define(["require", "exports", "../node_modules/redux/index"], function (require, exports, index_1) {
    "use strict";
    var _this = this;
    Object.defineProperty(exports, "__esModule", { value: true });

    var questionApp = index_1.combineReducers({
        SelectedAnswers: selectedAnswers
    });

    var store = index_1.createStore(questionApp);
});

如您所见，我的代码使用了导入脚本，这是由 Visual Studio/TypeScript 自动生成的。

这对于编译目的来说很好，因为它指向 ../../../node_modules/redux/index 这将允许它获取 index.d.ts 这是 TypeScript 类型文件（明确类型化）。

所以当应用程序实际上运行s 时，我的问题就来了，Redux 的真正脚本在下一个文件夹中，/redux.js，所以当我运行我的脚本它告诉我说模块无法加载。

如何告诉 TypeScript 该脚本在运行时间存在于 /redux？

我想，如果我在 require.config 中针对 TypeScript 生成的 define() 方法中出现的名称 htat 指定它，我可以告诉 RequireJS 脚本在哪里，但这并没有有什么影响：

require.config({
    baseUrl: "/",
    paths: {
        "../node_modules/redux/index": "../node_modules/redux/dist/redux"
    }
});

感谢您的帮助。

注意：如果我将 index.d.ts 移动到与 redux.js 相同的文件夹中并命名为 redux.d.ts，它工作正常，但这不是它在 npm 下载中的显示方式。我不想每次更新都将它们移动到同一个文件夹中。

Answer 1

好吧，看来我痛苦的主要原因是我混淆了内部模块和外部模块的概念。

外部模块通常不会通过它们在构成应用程序的 TypeScript 文件挂毯中的相对路径来引用，这些应该在 require.config().

中指定

可以通过相对路径引用内部模块和TypeScript文件。

所以答案是 redux，一个外部模块，应该在 TypeScript 中通过 redux 定义文件中指定的名称来引用。

import { combineReducers, createStore } = require("redux");

//... now we can use the imported external module
const myApp = combineReducers({
    SelectedAnswers: selectedAnswers
});

var store = createStore(myApp);

你还必须确保你有外部模块的类型，我没有这个，所以这导致我的 TypeScript 文件编译失败并出现错误 Cannot find module 'redux'。所以我通过安装明确类型的定义来获得类型，这允许 TypeScript 文件编译：

Install-Package react-redux.TypeScript.DefinitelyTyped

似乎这通常适用于您可能想要导入的大多数外部模块，但如果它们不是，您可以指定您自己的定义（将其放在您的 *.d.ts 文件中解决方案），这将允许您编译 TypeScript 文件：

// This can be redux, or any other module that you'd like to use in require() to enable it to compile your TypeScript code
declare module "redux" {
    var _temp: any;
    export = _temp;
}

如果这样做，您自然不会获得智能感知，因此首选 TypeScript 类型。

当谈到设置你的属性时 require.config()，它被称为你的应用程序的入口点，你应该：

指定您的外部模块相对于您的 baseUrl
指定要解析为相对位置的内部模块

这是我的示例的入口点示例（main.ts，编译为main.js供以后使用）：

require.config({
    baseUrl: "/", // The base url
    paths: {
        // Named external module (redux in this case)
        "redux": "../node_modules/redux/dist/redux"
    }
});

// Bootstrap the entry point module, notice that this is an 'internal module', hence the relative location being used as the module name
require(["Scripts/myscript"], () => {
    console.log("Your internal module has been resolved and should be running now!")
});

这可以从您的应用程序页面中调用，如下所示：

<script "/node_modules/requirejs/require.js" data-main="scripts/main.js"></script>

使用 Redux、Typescript 在与 JS 模块不同的文件夹中键入。如何告诉它模块所在的位置？

Using Redux, Typescript Typing in different folder to the JS module. How to tell it where the module lives?

javascript

requirejs

typescript

typescript-typings