对于使用TypeScript编写的项目，使用变量而不是字符串和相对路径

Question

我可以在大型项目中使用类似命名空间的东西进行导入吗？

例如，而不是

import {formatNumber} from '../../../utils/formatters'

我可以用

import {formatNumber} from utils.formatters

我认为它可以简化项目结构的未来变化，当我移动一些组件而不必寻找改变的相对路径时。

我该如何解决这个问题？

Answer 1

当我移动一些组件而不必寻找改变的相对路径时

使用TypeScript的FWIW将是一个编译错误（你可以轻松修复路径完成https://basarat.gitbooks.io/alm/content/features/autocomplete.html#path-completions之类的东西），所以你比你将使用纯JavaScript。

我可以在我的大型项目中使用类似名称空间的东西进行导入

不。目前它需要手动管理文件排序，这很快就会变成一种痛苦： https ： //github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

更多

拥有相对文件路径确实很痛苦。 但这就是一些JavaScript模块系统的工作方式（尤其是nodejs）。

Answer 2

我建议遵循称为“桶”的技术（doc链接来自angular2但它是一般概念）

https://angular.io/docs/ts/latest/guide/style-guide.html#!#create-and-import-barrels

因此，在全局文件夹级别创建一个包含所有这些链接的文件（并且仅保留对每个文件的引用）

export * from './config';
export * from './entity.service';
export * from './exception.service';
export * from './filter-text';
export * from './init-caps.pipe';
export * from './modal';
export * from './nav';
export * from './spinner';
export * from './toast';

后来， 随时随地深文件夹结构中 ，只要保持引用此文件...

你可以拥有更多，甚至使用某种内部子命名空间。 例如，这是root / global'ng.ts'的示例

// Detail
export * from "@angular/core";

import * as common from "@angular/common";
import * as http from "@angular/http";
import * as upgrade from "@angular/upgrade";
import * as platform from "@angular/platform-browser-dynamic";

// with sub namespaces
export { common, http, platform, upgrade };

然后这是有效的

import * as ng from "../../../ng";

@ng.Component(... // root is 'core'
...
let control = new ng.common.Control(); // 'common' is nested as common