Fix typo in declaration merging #207
Conversation
Translation of Declaration Merging.mdtitle: Declaration Merging translatable: trueIntroductionSome of the unique concepts in TypeScript describe the shape of JavaScript objects at the type level. Back to the point, "merging declarations" means that the compiler merges two separate declarations declared with the same name into one definition. Basic ConceptsIn TypeScript, a declaration creates an entity of at least one of three groups: namespace, type, or value.
Understanding the results produced by each declaration helps you understand the results of the merges when you merge declarations. Merging InterfacesThe simplest and most common type of declaration merging is interface merging. interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
let box: Box = { height: 5, width: 6, scale: 10 };The non-functional members of an interface must be unique. For function members, each function member with the same name is treated as overloading the same function. For example: interface Cloner {
clone(animal: Animal): Animal;
}
interface Cloner {
clone(animal: Sheep): Sheep;
}
interface Cloner {
clone(animal: Dog): Dog;
clone(animal: Cat): Cat;
}The above three interfaces can be merged into a single declaration as follows: interface Cloner {
clone(animal: Dog): Dog;
clone(animal: Cat): Cat;
clone(animal: Sheep): Sheep;
clone(animal: Animal): Animal;
}Note that the elements in each group maintain the same order, but the group itself is placed first as it becomes overloaded later. There are exceptions to this rule called specialized signatures. For example, the following interfaces are merged: interface Document {
createElement(tagName: any): Element;
}
interface Document {
createElement(tagName: "div"): HTMLDivElement;
createElement(tagName: "span"): HTMLSpanElement;
}
interface Document {
createElement(tagName: string): HTMLElement;
createElement(tagName: "canvas"): HTMLCanvasElement;
}
interface Document {
createElement(tagName: "canvas"): HTMLCanvasElement;
createElement(tagName: "div"): HTMLDivElement;
createElement(tagName: "span"): HTMLSpanElement;
createElement(tagName: string): HTMLElement;
createElement(tagName: any): Element;
}Merging NamespacesLike interfaces, namespaces with the same name merge with namespace members. To merge namespaces, type definitions are merged from the exported interfaces declared in each namespace, forming a single namespace with merged interface definitions inside. To merge namespace values, if each declaration location already has a namespace with the specified name, the namespace value is expanded by adding the exported member of the second namespace to the first existing namespace. An example of this: namespace Animals {
export class Zebra {}
}
namespace Animals {
export interface Legged {
numberOfLegs: number;
}
export class Dog {}
}They are as follows: namespace Animals {
export interface Legged {
numberOfLegs: number;
}
export class Zebra {}
export class Dog {}
}This model of merging namespaces is a good starting point, but we need to understand what happens to non-export members. This can be seen more clearly in the example below: namespace Animal {
let haveMuscles = true;
export function animalsHaveMuscles() {
return haveMuscles;
}
}
namespace Animal {
export function doAnimalsHaveMuscles() {
return haveMuscles; // 오류, haveMuscles가 여기에 접근할 수 없기 때문에
}
}
Merging namespaces with classes, functions, and enumsNamespaces are flexible enough to merge with other types of declarations. Merging Namespaces with ClassesThis part describes how the inner class is described. class Album {
label: Album.AlbumLabel;
}
namespace Album {
export class AlbumLabel {}
}The visibility rules for merged members are Merging Namespaces As described in the session, In addition to the inner class pattern, you should also be familiar with extending functions by creating functions and adding properties in JavaScript. function buildLabel(name: string): string {
return buildLabel.prefix + name + buildLabel.suffix;
}
namespace buildLabel {
export let suffix = "";
export let prefix = "Hello, ";
}
console.log(buildLabel("Sam Smith"));Similarly, namespaces can extend the enumeration of static members: enum Color {
red = 1,
green = 2,
blue = 4,
}
namespace Color {
export function mixColor(colorName: string) {
if (colorName == "yellow") {
return Color.red + Color.green;
} else if (colorName == "white") {
return Color.red + Color.green + Color.blue;
} else if (colorName == "magenta") {
return Color.red + Color.blue;
} else if (colorName == "cyan") {
return Color.green + Color.blue;
}
}
}Disallowed MergesNot all merges are allowed in TypeScript. Module AugmentationJavaScript does not support merging modules, but you can patch existing objects by importing and updating them. // observable.ts
export class Observable<T> {
// ... 연습을 위해 남겨둠 ...
}
// map.ts
import { Observable } from "./observable";
Observable.prototype.map = function (f) {
// ... 연습을 위해 남겨둠
};This works fine with TypeScript, but the compiler // observable.ts
export class Observable<T> {
// ... 연습을 위해 남겨둠 ...
}
// map.ts
import { Observable } from "./observable";
declare module "./observable" {
interface Observable<T> {
map<U>(f: (x: T) => U): Observable<U>;
}
}
Observable.prototype.map = function (f) {
// ... 연습을 위해 남겨둠
};
// consumer.ts
import { Observable } from "./observable";
import "./map";
let o: Observable<number>;
o.map((x) => x.toFixed());The module name is However, keep in mind two limitations:
Global augmentationYou can add declarations to the global scope from inside the module: // observable.ts
export class Observable<T> {
// ... 연습을 위해 남겨둠 ...
}
declare global {
interface Array<T> {
toObservable(): Observable<T>;
}
}
Array.prototype.toObservable = function () {
// ...
};Global enrichment has the same behavior and limitations as module augmentation. |
|
수정 감사합니다 👍 |
|
LGTM |
|
Merging because @bumkeyy is a code-owner of all the changes - thanks! |
non-function member가 함수 멤버로 잘못 번역되어 있어 비-함수 멤버로 수정이 필요합니다.
In English:
Non-function members of the interfaces should be unique. If they are not unique, they must be of the same type. The compiler will issue an error if the interfaces both declare a non-function member of the same name, but of different types.
In Korean:
인터페이스의 비-함수 멤버는 고유해야 합니다. 만약 고유하지 않으면, 모두 같은 타입이어야 합니다. 인터페이스가 동일한 이름의
함수 멤버 -> 비-함수 멤버를 선언하지만 다른 타입으로 선언하는 경우 컴파일러는 error를 발생시킵니다.