如何将命名空间与 TypeScript 外部module一起使用?

IT技术 javascript module typescript
2021-01-13 03:09:54

我有一些代码:

基本类型.ts

export namespace Living.Things {
  export class Animal {
    move() { /* ... */ }
  }
  export class Plant {
    photosynthesize() { /* ... */ }
  }
}

狗.ts

import b = require('./baseTypes');

export namespace Living.Things {
  // Error, can't find name 'Animal', ??
  export class Dog extends Animal {
    woof() { }
  }
}

树.ts

// Error, can't use the same name twice, ??
import b = require('./baseTypes');
import b = require('./dogs');

namespace Living.Things {
  // Why do I have to write b.Living.Things.Plant instead of b.Plant??
  class Tree extends b.Living.Things.Plant {

  }
}

这一切都非常令人困惑。我想让一堆外部module都为同一个命名空间贡献类型,Living.Things. 看来,这并不在所有的工作-我看不到Animaldogs.ts我必须b.Living.Things.Planttree.ts. 跨文件组合同一命名空间中的多个对象是行不通的。我该怎么做呢?

6个回答

糖果杯比喻

版本 1:每个糖果一个杯子

假设你写了一些这样的代码:

Mod1.ts

export namespace A {
    export class Twix { ... }
}

Mod2.ts

export namespace A {
    export class PeanutButterCup { ... }
}

Mod3.ts

export namespace A {
     export class KitKat { ... }
}

您已创建此设置: 在此处输入图片说明

每个module(一张纸)都有自己的杯子,名为A. 这是没用的——你实际上并没有在这里整理你的糖果,你只是在你和零食之间增加了一个额外的步骤(把它从杯子里拿出来)。


版本 2:全球范围内的一杯

如果你没有使用module,你可能会写这样的代码(注意缺少export声明):

global1.ts

namespace A {
    export class Twix { ... }
}

global2.ts

namespace A {
    export class PeanutButterCup { ... }
}

global3.ts

namespace A {
     export class KitKat { ... }
}

代码A在全局范围内创建了一个合并的命名空间

在此处输入图片说明

此设置很有用,但不适用于module的情况(因为module不会污染全局范围)。


版本 3:无杯

回到最初的例子,杯子AA、 和A对你没有任何帮助。相反,您可以将代码编写为:

Mod1.ts

export class Twix { ... }

Mod2.ts

export class PeanutButterCup { ... }

Mod3.ts

export class KitKat { ... }

创建一个看起来像这样的图片:

在此处输入图片说明

好多了!

现在,如果您仍在考虑您真正想要在module中使用命名空间的程度,请继续阅读...


这些不是您要寻找的概念

我们首先需要回到命名空间存在的起源,并检查这些原因是否对外部module有意义。

组织:命名空间可方便地将逻辑相关的对象和类型组合在一起。例如,在 C# 中,您将在System.Collections. 通过将我们的类型组织到分层命名空间中,我们为这些类型的用户提供了良好的“发现”体验。

名称冲突:命名空间对于避免命名冲突很重要。例如,您可能有My.Application.Customer.AddFormMy.Application.Order.AddForm-- 两种名称相同但名称空间不同的类型。在所有标识符都存在于同一个根作用域中并且所有程序集加载所有类型的语言中,将所有内容都放在一个命名空间中是至关重要的。

这些原因在外部module中有意义吗?

组织:外部module必然已经存在于文件系统中。我们必须通过路径和文件名来解析它们,因此我们可以使用一个逻辑组织方案。我们可以有一个/collections/generic/包含listmodule文件夹

名称冲突:这根本不适用于外部module。一个module中,没有合理的理由有两个同名的对象。从消费方面来看,任何给定module消费者都可以选择他们将用来引用module的名称,因此不可能发生意外的命名冲突。


即使您不相信module的工作方式可以充分解决这些原因,尝试在外部module中使用命名空间的“解决方案”甚至不起作用。

盒中盒盒中盒

一个故事:

你的朋友鲍勃给你打电话。“我家里有一个很棒的新组织计划”,他说,“快来看看吧!”。好吧,让我们去看看鲍勃想出了什么。

你从厨房开始,打开储藏室。有 60 个不同的盒子,每个盒子都标有“Pantry”。你随机挑选一个盒子并打开它。里面是一个标有“谷物”的盒子。你打开“谷物”盒子,找到一个标有“意大利面”的盒子。你打开“Pasta”盒子,找到一个标有“Penne”的盒子。你打开这个盒子,如你所料,发现了一袋通心粉。

有点困惑,你拿起一个相邻的盒子,也标有“Pantry”。里面是一个盒子,同样标有“谷物”。你打开“谷物”盒子,再次找到一个标有“意大利面”的盒子。你打开“Pasta”盒子,找到一个盒子,这个盒子标有“Rigatoni”。你打开这个盒子,发现……一袋意大利通心粉。

“这很棒!” 鲍勃说。“一切都在一个命名空间中!”。

“但是鲍勃……”你回答。“你的组织方案没用。你必须打开一堆盒子才能找到任何东西,而且实际上并没有比将所有东西放在一个盒子而不是三个盒子里更方便。事实上,因为你的储藏室已经逐个分类了,你根本不需要盒子。为什么不把意大利面放在架子上,需要的时候拿起来呢?”

“你不明白——我需要确保没有其他人把不属于 'Pantry' 命名空间的东西放进去。而且我已经安全地将我所有的意大利面组织到了Pantry.Grains.Pasta命名空间中,这样我就可以很容易地找到它”

鲍勃是一个非常困惑的人。

module是他们自己的盒子

你可能在现实生活中遇到过类似的事情:你在亚马逊上订购了一些东西,每件商品都出现在自己的盒子里,里面有一个较小的盒子,你的物品用自己的包装包裹。即使内部包装盒相似,货物也不能有效地“组合”。

与盒子类比,关键观察是外部module是它们自己的盒子它可能是一个具有很多功能的非常复杂的项目,但任何给定的外部module都是它自己的盒子。


外部module指南

既然我们已经发现我们不需要使用“命名空间”,那么我们应该如何组织我们的module呢?以下是一些指导原则和示例。

尽可能接近顶级导出

  • 如果您只导出单个类或函数,请使用export default

MyClass.ts

export default class SomeType {
  constructor() { ... }
}

MyFunc.ts

function getThing() { return 'thing'; }
export default getThing;

消耗

import t from './MyClass';
import f from './MyFunc';
var x = new t();
console.log(f());

这对消费者来说是最佳选择。他们可以随意命名您的类型(t在这种情况下),并且无需进行任何无关的打点即可找到您的对象。

  • 如果您要导出多个对象,请将它们全部放在顶层:

我的东西.ts

export class SomeType { ... }
export function someFunc() { ... }

消耗

import * as m from './MyThings';
var x = new m.SomeType();
var y = m.someFunc();
  • 如果您要导出大量内容,那么您才应该使用module/namespace关键字:

MyLargeModule.ts

export namespace Animals {
  export class Dog { ... }
  export class Cat { ... }
}
export namespace Plants {
  export class Tree { ... }
}

消耗

import { Animals, Plants} from './MyLargeModule';
var x = new Animals.Dog();

红旗

以下所有内容都是module结构的危险信号。如果其中任何一个适用于您的文件,请仔细检查您是否没有尝试命名外部module:

  • 一个文件,其唯一的顶级声明是export module Foo { ... }(删除Foo并将所有内容“向上”移动一个级别)
  • 一个文件有一个export classexport function没有export default
  • export module Foo {在顶层具有相同的多个文件(不要认为这些文件会合并为一个Foo!)
这是一个没有答案的。您不需要或不需要外部module的命名空间的前提是错误的。虽然文件系统是一种可以组织方案的还挺用于这些目的,它是几乎没有很好的为消费者有n个利用从给定的项目N个类别或功能import语句; 特别是因为当您在实际代码中失败时,它也会混淆命名约定。
2021-03-13 03:09:54
我不明白,我们不再写 pascal 了。从什么时候开始使用文件系统进行组织?
2021-03-18 03:09:54
写得很好,谢谢。我觉得你应该从 www.typescriptlang.org/docs/handbook/namespaces.html 链接到这个。我一定已经阅读了 typescriptlang.org 链接 3 到 4 次,作为 C# 开发人员,我自然希望将所有内容都放在一个命名空间中。我读过一些建议说不要,但没有解释为什么,也没有像这样明确(并且描述得很好)。加上typescript文档中没有提到这个 AFAIK
2021-03-22 03:09:54
不管人们多么想要它,它仍然是不可能的
2021-03-31 03:09:54
您可以通过使用“包装器”module来导入和重新导出库的使用者感兴趣的所有内容。但同样,使用“命名空间”除了为使用您的代码的任何人强制执行另一个间接级别外,不会提供任何value。
2021-04-02 03:09:54

Ryan 的回答没有任何问题,但是对于来到这里寻找如何在仍然正确使用 ES6 命名空间的同时维护一个类每个文件结构的人,请参考来自 Microsoft 的这个有用资源。

阅读文档后,我不清楚的一件事是:如何使用单个 import.

编辑 回圈以更新此答案。TS 中出现了一些命名空间的方法。

一个文件中的所有module类。

export namespace Shapes {
    export class Triangle {}
    export class Square {}      
}

将文件导入命名空间,并重新分配

import { Triangle as _Triangle } from './triangle';
import { Square as _Square } from './square';

export namespace Shapes {
  export const Triangle = _Triangle;
  export const Square = _Square;
}

// ./shapes/index.ts
export { Triangle } from './triangle';
export { Square } from './square';

// in importing file:
import * as Shapes from './shapes/index.ts';
// by node module convention, you can ignore '/index.ts':
import * as Shapes from './shapes';
let myTriangle = new Shapes.Triangle();

最后的考虑。可以命名每个文件

// triangle.ts
export namespace Shapes {
    export class Triangle {}
}

// square.ts
export namespace Shapes {
    export class Square {}
}

但是当从同一个命名空间导入两个类时,TS 会抱怨有一个重复的标识符。这次唯一的解决方案是为命名空间设置别名。

import { Shapes } from './square';
import { Shapes as _Shapes } from './triangle';

// ugh
let myTriangle = new _Shapes.Shapes.Triangle();

这种混叠是绝对令人憎恶的,所以不要这样做。你最好采用上面的方法。就个人而言,我更喜欢“桶”。

什么是“ES6 命名空间”?
2021-03-13 03:09:54
我知道这一点,但你最好在回答中解释一下。然而,ES6 命名空间实际上是一回事,require由于多种原因,示例并不适用于它们,包括 ES6 命名空间可能不会被调用,而require返回一个很可能是可调用的普通对象。
2021-03-16 03:09:54
我不遵循,因为无论导入的东西是否可调用,从逻辑上讲,它仍然充当命名空间我不认为这些警告对我上面的回答很重要。
2021-04-02 03:09:54
@AluanHaddad 在导入 es2015+ 时,导入的东西要么是默认的,要么是解构的,要么是命名空间的。const fs = require('fs'),fs是命名空间。import * as moment from 'moment',moment是命名空间。这是本体论,而不是规范。
2021-04-06 03:09:54

尝试按文件夹组织:

基本类型.ts

export class Animal {
    move() { /* ... */ }
}

export class Plant {
    photosynthesize() { /* ... */ }
}

狗.ts

import b = require('./baseTypes');

export class Dog extends b.Animal {
    woof() { }
}   

树.ts

import b = require('./baseTypes');

class Tree extends b.Plant {
}

LivingThings.ts

import dog = require('./dog')
import tree = require('./tree')

export = {
    dog: dog,
    tree: tree
}

主文件

import LivingThings = require('./LivingThings');
console.log(LivingThings.Tree)
console.log(LivingThings.Dog)

这个想法是你的module本身不应该关心/知道他们参与了一个命名空间,但这以一种紧凑、明智的方式向消费者公开你的 API,这与你用于项目的module系统类型无关。

LivingThings.dog.Dog 就是你在这里所拥有的。
2021-03-11 03:09:54
我建议保持字母大小写一致,如果您导出“树”,则导入“树”,而不是“树”。
2021-03-14 03:09:54
另外,tree.ts当它根本没有导出成员时,您如何导入任何内容
2021-04-04 03:09:54
Man TS 肯定有一些愚蠢的旧语法,就像importrequire一起在一个语句中。
2021-04-10 03:09:54

我在这个主题周围看到的几个问题/评论对我来说听起来好像这个人正在使用Namespace他们的意思是“module别名”。正如 Ryan Cavanaugh 在他的评论之一中提到的,您可以让“包装器”module重新导出多个module。

如果您真的想从相同的module名称/别名中导入它,请将包装器module与tsconfig.json.

例子:

./path/to/CompanyName.Products/Foo.ts

export class Foo {
    ...
}


./path/to/CompanyName.Products/Bar.ts

export class Bar {
    ...
}


./path/to/CompanyName.Products/index.ts

export { Foo } from './Foo';
export { Bar } from './Bar';



tsconfig.json

{
    "compilerOptions": {
        ...
        paths: {
            ...
            "CompanyName.Products": ["./path/to/CompanyName.Products/index"],
            ...
        }
        ...
    }
    ...
}



main.ts

import { Foo, Bar } from 'CompanyName.Products'

注意:输出 .js 文件中的module解析需要以某种方式处理,例如使用此https://github.com/tleunen/babel-plugin-module-resolver

.babelrc处理别名解析的示例

{
    "plugins": [
        [ "module-resolver", {
            "cwd": "babelrc",
            "alias": {
                "CompanyName.Products": "./path/to/typescript/build/output/CompanyName.Products/index.js"
            }
        }],
        ... other plugins ...
    ]
}

试试这个命名空间module

命名空间module文件.ts

export namespace Bookname{
export class Snows{
    name:any;
    constructor(bookname){
        console.log(bookname);
    }
}
export class Adventure{
    name:any;
    constructor(bookname){
        console.log(bookname);
    }
}
}





export namespace TreeList{
export class MangoTree{
    name:any;
    constructor(treeName){
        console.log(treeName);
    }
}
export class GuvavaTree{
    name:any;
    constructor(treeName){
        console.log(treeName);
    }
}
}

bookTreeCombine.ts

---编译部分---

import {Bookname , TreeList} from './namespaceModule';
import b = require('./namespaceModule');
let BooknameLists = new Bookname.Adventure('Pirate treasure');
BooknameLists = new Bookname.Snows('ways to write a book'); 
const TreeLis = new TreeList.MangoTree('trees present in nature');
const TreeLists = new TreeList.GuvavaTree('trees are the celebraties');