You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 12, 2022. It is now read-only.
Copy file name to clipboardExpand all lines: pages/Declaration Merging.md
+31-29Lines changed: 31 additions & 29 deletions
Original file line number
Diff line number
Diff line change
@@ -13,16 +13,18 @@ Declaration merging is not limited to just two declarations, as any number of de
13
13
14
14
# Basic Concepts
15
15
16
-
In TypeScript, a declaration exists in one of three groups: namespace/module, type, or value.
17
-
Declarations that create a namespace/module are accessed using a dotted notation when writing a type.
18
-
Declarations that create a type do just that, create a type that is visible with the declared shape and bound to the given name.
19
-
Lastly, declarations create a value are those that are visible in the output JavaScript (e.g. functions and variables).
16
+
In TypeScript, a declaration exists in one of three groups: namespace, type, or value.
17
+
Declarations that create a namespace are accessed using a dotted notation when writing a type.
18
+
Declarations that create a type do just that: create a type that is visible with the declared shape and bound to the given name.
19
+
Lastly, declarations that create a value are those that are visible in the output JavaScript (e.g. functions and variables).
20
20
21
21
| Declaration Type | Namespace | Type | Value |
22
22
|------------------|:---------:|:----:|:-----:|
23
-
|Module | X || X |
23
+
|Namespace| X || X |
24
24
| Class || X | X |
25
+
| Enum || X | X |
25
26
| Interface || X ||
27
+
| Type Alias || X ||
26
28
| Function ||| X |
27
29
| Variable ||| X |
28
30
@@ -82,23 +84,23 @@ interface Document {
82
84
```
83
85
84
86
85
-
# Merging Modules
87
+
# Merging Namespaces
86
88
87
-
Similarly to interfaces, modules of the same name will also merge their members.
88
-
Since modules create both a namespace and a value, we need to understand how both merge.
89
+
Similarly to interfaces, namespaces of the same name will also merge their members.
90
+
Since namespaces create both a namespace and a value, we need to understand how both merge.
89
91
90
-
To merge the namespaces, type definitions from exported interfaces declared in each module are themselves merged, forming a single namespace with merged interface definitions inside.
92
+
To merge the namespaces, type definitions from exported interfaces declared in each namespace are themselves merged, forming a single namespace with merged interface definitions inside.
91
93
92
-
To merge the value, at each declaration site, if a module already exists with the given name, it is further extended by taking the existing module and adding the exported members of the second module to the first.
94
+
To merge the value, at each declaration site, if a namespace already exists with the given name, it is further extended by taking the existing namespace and adding the exported members of the second namespace to the first.
93
95
94
96
The declaration merge of `Animals` in this example:
95
97
96
98
```TypeScript
97
-
moduleAnimals {
99
+
namespaceAnimals {
98
100
exportclassZebra { }
99
101
}
100
102
101
-
moduleAnimals {
103
+
namespaceAnimals {
102
104
exportinterfaceLegged { numberOfLegs:number; }
103
105
exportclassDog { }
104
106
}
@@ -107,59 +109,59 @@ module Animals {
107
109
is equivalent to:
108
110
109
111
```TypeScript
110
-
moduleAnimals {
112
+
namespaceAnimals {
111
113
exportinterfaceLegged { numberOfLegs:number; }
112
114
113
115
exportclassZebra { }
114
116
exportclassDog { }
115
117
}
116
118
```
117
119
118
-
This model of module merging is a helpful starting place, but to get a more complete picture we need to also understand what happens with non-exported members.
119
-
Non-exported members are only visible in the original (un-merged) module. This means that after merging, merged members that came from other declarations can not see non-exported members.
120
+
This model of namespace merging is a helpful starting place, but to get a more complete picture we need to also understand what happens with non-exported members.
121
+
Non-exported members are only visible in the original (un-merged) namespace. This means that after merging, merged members that came from other declarations can not see non-exported members.
120
122
121
123
We can see this more clearly in this example:
122
124
123
125
```TypeScript
124
-
moduleAnimal {
126
+
namespaceAnimal {
125
127
var haveMuscles =true;
126
128
127
129
exportfunction animalsHaveMuscles() {
128
130
returnhaveMuscles;
129
131
}
130
132
}
131
133
132
-
moduleAnimal {
134
+
namespaceAnimal {
133
135
exportfunction doAnimalsHaveMuscles() {
134
136
returnhaveMuscles; // <-- error, haveMuscles is not visible here
135
137
}
136
138
}
137
139
```
138
140
139
-
Because `haveMuscles` is not exported, only the `animalsHaveMuscles` function that shares the same un-merged module can see the symbol.
140
-
The `doAnimalsHaveMuscles` function, even though it's part of the merged Animal module can not see this un-exported member.
141
+
Because `haveMuscles` is not exported, only the `animalsHaveMuscles` function that shares the same un-merged namespace can see the symbol.
142
+
The `doAnimalsHaveMuscles` function, even though it's part of the merged `Animal` namespace can not see this un-exported member.
141
143
142
-
# Merging Modules with Classes, Functions, and Enums
144
+
# Merging Namespaces with Classes, Functions, and Enums
143
145
144
-
Modules are flexible enough to also merge with other types of declarations.
145
-
To do so, the module declaration must follow the declaration it will merge with. The resulting declaration has properties of both declaration types.
146
+
Namespaces are flexible enough to also merge with other types of declarations.
147
+
To do so, the namespace declaration must follow the declaration it will merge with. The resulting declaration has properties of both declaration types.
146
148
TypeScript uses this capability to model some of patterns in JavaScript as well as other programming languages.
147
149
148
-
The first module merge we'll cover is merging a module with a class.
150
+
The first namespace merge we'll cover is merging a namespace with a class.
149
151
This gives the user a way of describing inner classes.
150
152
151
153
```TypeScript
152
154
classAlbum {
153
155
label:Album.AlbumLabel;
154
156
}
155
-
moduleAlbum {
157
+
namespaceAlbum {
156
158
exportclassAlbumLabel { }
157
159
}
158
160
```
159
161
160
-
The visibility rules for merged members is the same as described in the 'Merging Modules' section, so we must export the `AlbumLabel` class for the merged class to see it.
162
+
The visibility rules for merged members is the same as described in the 'Merging Namespaces' section, so we must export the `AlbumLabel` class for the merged class to see it.
161
163
The end result is a class managed inside of another class.
162
-
You can also use modules to add more static members to an existing class.
164
+
You can also use namespaces to add more static members to an existing class.
163
165
164
166
In addition to the pattern of inner classes, you may also be familiar with JavaScript practice of creating a function and then extending the function further by adding properties onto the function.
165
167
TypeScript uses declaration merging to build up definitions like this in a type-safe way.
@@ -169,15 +171,15 @@ function buildLabel(name: string): string {
169
171
returnbuildLabel.prefix+name+buildLabel.suffix;
170
172
}
171
173
172
-
modulebuildLabel {
174
+
namespacebuildLabel {
173
175
exportvar suffix ="";
174
176
exportvar prefix ="Hello, ";
175
177
}
176
178
177
179
alert(buildLabel("Sam Smith"));
178
180
```
179
181
180
-
Similarly, modules can be used to extend enums with static members:
182
+
Similarly, namespaces can be used to extend enums with static members:
0 commit comments