|
| 1 | +--- |
| 2 | +title: Declaration Reference |
| 3 | +layout: docs |
| 4 | +permalink: /ko/docs/handbook/declaration-files/by-example.html |
| 5 | +oneline: "How to create a d.ts file for a module" |
| 6 | +--- |
| 7 | + |
| 8 | +# 소개 (Introduction) |
| 9 | + |
| 10 | +이 가이드는 양질의 선언 파일을 작성하는 방법을 설명하기 위해 작성되었습니다. |
| 11 | +이 가이드는 일부 API 문서를 해당 API 사용 예시와 함께 보여주고, |
| 12 | + 상응하는 선언을 작성하는 방법을 설명합니다. |
| 13 | + |
| 14 | +예제는 대체로 후반부로 갈수록 복잡해집니다. |
| 15 | + |
| 16 | +* [프로퍼티를 갖는 객체 (Objects with Properties)](#프로퍼티를-갖는-객체-objects-with-properties) |
| 17 | +* [오버로드된 함수 (Overloaded Function)](#오버로드된-함수-overloaded-functions) |
| 18 | +* [재사용 가능한 타입 (인터페이스) (Reusable Types (Interfaces))](#재사용-가능한-타입-인터페이스-reusable-types-interfaces) |
| 19 | +* [재사용 가능한 타입 (타입 별칭) (Reusable Types (Type Aliases))](#재사용-가능한-타입-타입-별칭-reusable-types-type-aliases) |
| 20 | +* [타입 구조화하기 (Organizing Types)](#타입-구조화하기-organizing-types) |
| 21 | +* [클래스 (Classes)](#클래스-classes) |
| 22 | +* [전역 변수 (Global Variables)](#전역-변수-global-variables) |
| 23 | +* [전역 함수 (Global Functions)](#전역-함수-global-functions) |
| 24 | + |
| 25 | +# 예제 (The Examples) |
| 26 | + |
| 27 | +## 프로퍼티를 갖는 객체 (Objects with Properties) |
| 28 | + |
| 29 | +_문서_ |
| 30 | + |
| 31 | +> 전역 변수 `myLib`에는 인사말을 만드는 함수 `makeGreeting`와, |
| 32 | +> 지금까지 생성한 인사말의 수를 가리키는 `numberOfGreetings` 프로퍼티가 있습니다. |
| 33 | +
|
| 34 | +_코드_ |
| 35 | + |
| 36 | +```ts |
| 37 | +let result = myLib.makeGreeting("hello, world"); |
| 38 | +console.log("The computed greeting is:" + result); |
| 39 | + |
| 40 | +let count = myLib.numberOfGreetings; |
| 41 | +``` |
| 42 | + |
| 43 | +_선언_ |
| 44 | + |
| 45 | +점 표기법으로 접근하는 타입이나 값을 설명하기 위해 `declare namespace`를 사용하세요. |
| 46 | + |
| 47 | +```ts |
| 48 | +declare namespace myLib { |
| 49 | + function makeGreeting(s: string): string; |
| 50 | + let numberOfGreetings: number; |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +## 오버로드된 함수 (Overloaded Functions) |
| 55 | + |
| 56 | +_문서_ |
| 57 | + |
| 58 | +`getWidget` 함수는 숫자를 인자로 받아 Widget을 반환하거나, 문자열을 인자로 받아 Widget 배열을 반환합니다. |
| 59 | + |
| 60 | +_코드_ |
| 61 | + |
| 62 | +```ts |
| 63 | +let x: Widget = getWidget(43); |
| 64 | + |
| 65 | +let arr: Widget[] = getWidget("all of them"); |
| 66 | +``` |
| 67 | + |
| 68 | +_선언_ |
| 69 | + |
| 70 | +```ts |
| 71 | +declare function getWidget(n: number): Widget; |
| 72 | +declare function getWidget(s: string): Widget[]; |
| 73 | +``` |
| 74 | + |
| 75 | +## 재사용 가능한 타입 (인터페이스) (Reusable Types (Interfaces)) |
| 76 | + |
| 77 | +_문서_ |
| 78 | + |
| 79 | +> greeting을 명시할 때, 반드시 `GreetingSettings` 객체를 전달해야 합니다. |
| 80 | +> 이 객체는 다음의 프로퍼티를 갖고 있습니다: |
| 81 | +> |
| 82 | +> 1 - greeting: 필수 문자열 |
| 83 | +> |
| 84 | +> 2 - duration: 선택적 시간 (밀리초) |
| 85 | +> |
| 86 | +> 3 - color: 선택적 문자열, 예. '#ff00ff' |
| 87 | +
|
| 88 | +_코드_ |
| 89 | + |
| 90 | +```ts |
| 91 | +greet({ |
| 92 | + greeting: "hello world", |
| 93 | + duration: 4000 |
| 94 | +}); |
| 95 | +``` |
| 96 | + |
| 97 | +_선언_ |
| 98 | + |
| 99 | +프로퍼티를 갖는 타입을 정의하기 위해 `interface`를 사용하세요. |
| 100 | + |
| 101 | +```ts |
| 102 | +interface GreetingSettings { |
| 103 | + greeting: string; |
| 104 | + duration?: number; |
| 105 | + color?: string; |
| 106 | +} |
| 107 | + |
| 108 | +declare function greet(setting: GreetingSettings): void; |
| 109 | +``` |
| 110 | + |
| 111 | +## 재사용 가능한 타입 (타입 별칭) (Reusable Types (Type Aliases)) |
| 112 | + |
| 113 | +_문서_ |
| 114 | + |
| 115 | +> 인사말이 예상되는 어느 곳에나, `string`, `string`을 반환하는 함수, 또는 `Greeter` 인스턴스를 전달할 수 있습니다. |
| 116 | +
|
| 117 | +_코드_ |
| 118 | + |
| 119 | +```ts |
| 120 | +function getGreeting() { |
| 121 | + return "howdy"; |
| 122 | +} |
| 123 | +class MyGreeter extends Greeter { } |
| 124 | + |
| 125 | +greet("hello"); |
| 126 | +greet(getGreeting); |
| 127 | +greet(new MyGreeter()); |
| 128 | +``` |
| 129 | + |
| 130 | +_선언_ |
| 131 | + |
| 132 | +타입에 대한 약칭으로 타입 별칭을 사용할 수 있습니다: |
| 133 | + |
| 134 | +```ts |
| 135 | +type GreetingLike = string | (() => string) | Greeter; |
| 136 | + |
| 137 | +declare function greet(g: GreetingLike): void; |
| 138 | +``` |
| 139 | + |
| 140 | +## 타입 구조화하기 (Organizing Types) |
| 141 | + |
| 142 | +_문서_ |
| 143 | + |
| 144 | +> `greeter` 객체는 파일에 로그를 작성하거나 경고 창을 띄울 수 있습니다. |
| 145 | +> 로그 옵션을 `.log(...)` 내부에, 경고 창 옵션을 `.alert(...)` 내부에 전달할 수 있습니다. |
| 146 | +
|
| 147 | +_코드_ |
| 148 | + |
| 149 | +```ts |
| 150 | +const g = new Greeter("Hello"); |
| 151 | +g.log({ verbose: true }); |
| 152 | +g.alert({ modal: false, title: "Current Greeting" }); |
| 153 | +``` |
| 154 | + |
| 155 | +_선언_ |
| 156 | + |
| 157 | +타입을 구조화하기 위해 네임스페이스를 사용하세요. |
| 158 | + |
| 159 | +```ts |
| 160 | +declare namespace GreetingLib { |
| 161 | + interface LogOptions { |
| 162 | + verbose?: boolean; |
| 163 | + } |
| 164 | + interface AlertOptions { |
| 165 | + modal: boolean; |
| 166 | + title?: string; |
| 167 | + color?: string; |
| 168 | + } |
| 169 | +} |
| 170 | +``` |
| 171 | + |
| 172 | +중첩된 네임스페이스를 하나의 선언으로 만들 수 있습니다: |
| 173 | + |
| 174 | +```ts |
| 175 | +declare namespace GreetingLib.Options { |
| 176 | + // Refer to via GreetingLib.Options.Log |
| 177 | + interface Log { |
| 178 | + verbose?: boolean; |
| 179 | + } |
| 180 | + interface Alert { |
| 181 | + modal: boolean; |
| 182 | + title?: string; |
| 183 | + color?: string; |
| 184 | + } |
| 185 | +} |
| 186 | +``` |
| 187 | + |
| 188 | +## 클래스 (Classes) |
| 189 | + |
| 190 | +_문서_ |
| 191 | + |
| 192 | +> `Greeter` 객체를 인스턴스화해서 greeter를 생성하거나, 이 객체를 상속해서 커스텀 greeter를 생성할 수 있습니다. |
| 193 | +
|
| 194 | +_코드_ |
| 195 | + |
| 196 | +```ts |
| 197 | +const myGreeter = new Greeter("hello, world"); |
| 198 | +myGreeter.greeting = "howdy"; |
| 199 | +myGreeter.showGreeting(); |
| 200 | + |
| 201 | +class SpecialGreeter extends Greeter { |
| 202 | + constructor() { |
| 203 | + super("Very special greetings"); |
| 204 | + } |
| 205 | +} |
| 206 | +``` |
| 207 | + |
| 208 | +_선언_ |
| 209 | + |
| 210 | +클래스 혹은 클래스-같은 객체를 설명하기 위해 `declare class`를 사용하세요. |
| 211 | +클래스는 생성자 뿐만 아니라 프로퍼티와 메서드를 가질 수 있습니다. |
| 212 | + |
| 213 | +```ts |
| 214 | +declare class Greeter { |
| 215 | + constructor(greeting: string); |
| 216 | + |
| 217 | + greeting: string; |
| 218 | + showGreeting(): void; |
| 219 | +} |
| 220 | +``` |
| 221 | + |
| 222 | +## 전역 변수 (Global Variables) |
| 223 | + |
| 224 | +_문서_ |
| 225 | + |
| 226 | +> 전역 변수 `foo`는 존재하는 위젯의 수를 포함합니다. |
| 227 | +
|
| 228 | +_코드_ |
| 229 | + |
| 230 | +```ts |
| 231 | +console.log("Half the number of widgets is " + (foo / 2)); |
| 232 | +``` |
| 233 | + |
| 234 | +_선언_ |
| 235 | + |
| 236 | +변수를 선언하기 위해 `declare var`를 사용하세요. |
| 237 | +만약 변수가 읽기-전용이라면, `declare const`를 사용하세요. |
| 238 | +변수가 블록-스코프인 경우 `declare let` 또한 사용할 수 있습니다. |
| 239 | + |
| 240 | +```ts |
| 241 | +/** 존재하는 위젯의 수 */ |
| 242 | +declare var foo: number; |
| 243 | +``` |
| 244 | + |
| 245 | +## 전역 함수 (Global Functions) |
| 246 | + |
| 247 | +_문서_ |
| 248 | + |
| 249 | +> 사용자에게 인사말을 보여주기 위해 `greet` 함수를 호출할 수 있습니다. |
| 250 | +
|
| 251 | +_코드_ |
| 252 | + |
| 253 | +```ts |
| 254 | +greet("hello, world"); |
| 255 | +``` |
| 256 | + |
| 257 | +_선언_ |
| 258 | + |
| 259 | +함수를 선언하기 위해 `declare function`을 사용하세요. |
| 260 | + |
| 261 | +```ts |
| 262 | +declare function greet(greeting: string): void; |
| 263 | +``` |
0 commit comments