【问题标题】:TypeScript definition for RequireJS Module return without exportRequireJS Module 的 TypeScript 定义返回而不导出
【发布时间】:2017-11-16 00:11:08
【问题描述】:

在没有 TypeScript 的情况下使用

我有一个无法编辑的 RequireJS 模块

RequireJS 模块:

//app/Router.js
define([], function() {
  return {
    generate: function(route) { /*do something*/ }
  }
});

该模块没有任何导出,但使用 return 语句,它可以在其他 require 模块中使用,如下所示:

define(['app/Router'], function(router) {
  router.generate('myRoute');
});

我想在 TypeScript 中使用 app/Router.js

变体1:TypeScript知道类型,但JS有错误

所以我尝试制作我的定义模块:

//Router.d.ts
export interface Router
{
    generate(route:string): string;
}
declare let router: Router;
export default router;

在我的 TypeScript 文件中使用它,例如:

import router from 'app/Router'

router.generate('something');

将生成该文件:

define(
  ["require", "exports", "app/Router"], 
  function (require, exports, Router_1)
) {
   Router_1.default.generate();
}

问题是默认属性。 JS 说不能在 null 上调用 generate。因为Router_1已经是我想要的对象了。

变体 2:JS 正确但 TypeScript 不知道类型

我也试过了:

//Router.d.ts
export interface Router
{
    generate(route:string): string;
}
declare let router: Router;
declare module "router" {
    export = router;
}

像这样使用它:

import * as router from 'app/Router'

router.generate('something');

输出正确:

define(["require", "exports", "app/Router"], function (require, exports, router) {
  router.generate();
});

但是 TypeScript 编译器说:类型上不存在属性“生成”

问题

我的 Router.d.ts 和 import 语句必须是什么样子才能获得正确的输出并且 TypeScript 知道正确的类型?

【问题讨论】:

    标签: typescript typescript2.0


    【解决方案1】:

    当你使用 export default stuff 时,你告诉编译器导出的对象有一个名为 default 的属性em> 作为值 stuff,如果在 .js 文件中 object.default == undefined 它作为函数调用时会抛出 TypeError。试试这种方法:

    //Router.d.ts
    
    declare module "app/Router" { // <- this must contain the path and the file's name;
    
        const router: { 
            generate: (route: string) => string; 
        }
    
        export = router;
    }
    
    // in the .ts file ...
    
    import * as router from "app/Router";
    
    router.generate("go/some/url");
    

    使用 tsc 2.6.1 输出:

    define(["require", "exports", "app/Router"], function (require, exports, router) {
                                                                   //^^^^^^^
        "use strict";                                              //|||||||      
        exports.__esModule = true; // <- it extends this object that was passed as argument ... 
        router.generate("go/some/url");// <- but this was the desired effect, right?
    });
    

    我没有 AMD 系统的先验知识,所以我无法判断在函数主体内扩展或设置导出对象的后果是什么。我认为所做的更改并不重要,但无论如何最好自己检查一下。

    【讨论】:

    • 之前我也尝试过声明模块“app/Router”,但出现错误“模块扩充中不允许导出和导出分配”。我想这是因为我在声明模块之外定义了我的接口。您的代码运行良好。谢谢!
    猜你喜欢
    • 1970-01-01
    • 2021-08-21
    • 2017-09-14
    • 2014-03-04
    • 2014-10-05
    • 1970-01-01
    • 2020-07-24
    • 2013-08-28
    • 2017-08-19
    相关资源
    最近更新 更多