带有 2.0 库的三斜杠 Typescript 参考

Question

我有一个最初基于 Typescript 1.4 构建的项目

它的主要文件设置如下：

/// <reference path="typedefinitions/jquery/jquery.d.ts" />
/// <reference path="typedefinitions/jqueryui/jqueryui.d.ts" />
/// <reference path="typedefinitions/moment/moment.d.ts" />
module myApp {
   ...
}

所有其他文件仅引用此主文件：

/// <reference path="../mainfile.ts" />
module myApp {
   //more code that can reference anything else in myApp
}

我们构建过程的一部分将我们所有的应用程序打字稿文件连接在一起，因此我们没有使用任何模块加载器。

过去这很好用，但是，越来越多的库将它们的定义文件设置为 import，并且使用上述方法引用它们不起作用。

以ui-router为例，如果我加上：

/// <reference path="../node_modules/angular-ui-router/lib/index.d.ts"  />

引用的类型似乎没有出现在任何地方。如果我这样做：

import * as router from 'angular-ui-router';

然后所有其他文件都不能再引用 'myApp'。

在重构摆脱这种情况的同时仍然能够将所有 TS 文件编译成单个 javascript 文件的最佳选择是什么？

有我可以更改的 tsconfig 设置吗？或者我还缺少其他东西？

Answer 1

这里有几个选项。

其他选项

您可以在短期内通过从 DefinitelyTyped 存储库手动下载 .d.ts 文件（当然也可以使用类型，如果您遵循此路线，我建议您这样做）来凑合使用命名空间。几个 npm 包现在在它们的依赖项中列出了 @types 包，因此您可能需要设置 types: [] 配置属性以确保不使用 @types 中的任何内容，从而避免冲突。

虽然这仍然是一个可行的选择，但我建议采用 ES6 模块。这不是 typescript 可以决定的问题，JS 社区非常清楚地朝着这个方向发展，作为 JS 的超集，主要的结构 JS 决策将渗透到 TS，这将成为默认。我觉得命名空间将很快成为遗留代码，有些人认为命名空间已经成为遗留代码。

Answer 2

Paarth，我想我将以类似的方式处理这个问题 angular 2，我将在其父组件中注册子组件：

hello.component.ts:

import Component from './component.decorator';

@Component('hello', {
    controllerAs: 'vm',
    template: '<div>Hi</div>'
})
export default class HelloComponent { }

app.component.ts:

import Component from './component.decorator';
import HelloComponent from './hello.component';

@Component('app', {
    controllerAs: 'vm',
    directives: [HelloComponent],
    template: `<div>
                <div>{{vm.Message}}</div>
                <hello></hello>
               </div>`
})
export class AppComponent {
    Message: string;

    $onInit() {
        this.Message = 'Hi!!!';
    }
}

component.decorator.ts:

import * as angular from 'angular';
import app from './main';

export interface ComponentBridgeOptions extends ng.IComponentOptions {
    directives?: any[];
}

export default function Component(selector: string, options: ComponentBridgeOptions) {
    return (controller: Function) => {
        app.component(selector, angular.extend(options, { controller: controller }));
    }
}

带有 2.0 库的三斜杠 Typescript 参考

Triple Slash Typescript References with 2.0 Libraries

typescript

typescript2.0

推荐的方法

其他选项