선언 참조

선언 참조 (Declaration Reference)

이 가이드의 목적은 "고품질 정의 파일"을 작성하는 법을 알려주는 것이에요. 구성은 이러합니다. 어떤 API의 문서와 그 API를 쓰는 예시 코드를 보여주고, 그에 대응하는 선언(declaration)을 어떻게 써야 하는지 설명하는 방식이죠.

예시들은 대략 난이도가 높아지는 순서로 정렬되어 있어요.

출처: TypeScript 핸드북

속성을 가진 객체 (Objects with Properties)

문서

전역 변수 myLib에는 인사말을 만드는 함수 makeGreeting이 있고, 지금까지 만든 인사말의 개수를 나타내는 속성 numberOfGreetings도 있어요.

코드

let result = myLib.makeGreeting("hello, world");
console.log("The computed greeting is:" + result);

let count = myLib.numberOfGreetings;

선언

점 표기법(dotted notation)으로 접근하는 타입이나 값은 declare namespace로 표현해요.

declare namespace myLib {
  function makeGreeting(s: string): string;
  let numberOfGreetings: number;
}

오버로드된 함수 (Overloaded Functions)

문서

getWidget 함수는 숫자를 받으면 Widget을 반환하고, 문자열을 받으면 Widget 배열을 반환해요.

코드

let x: Widget = getWidget(43);

let arr: Widget[] = getWidget("all of them");

선언

declare function getWidget(n: number): Widget;
declare function getWidget(s: string): Widget[];

재사용 가능한 타입 - 인터페이스 (Reusable Types - Interfaces)

문서

인사말을 지정할 때는 GreetingSettings 객체를 반드시 전달해야 해요. 이 객체는 다음과 같은 속성들을 갖습니다.

1 - greeting: 필수 문자열

2 - duration: 선택적인 시간(밀리초 단위)

3 - color: 선택적인 문자열, 예: '#ff00ff'

코드

greet({
  greeting: "hello world",
  duration: 4000
});

선언

속성을 가진 타입을 정의할 때는 interface를 사용해요.

interface GreetingSettings {
  greeting: string;
  duration?: number;
  color?: string;
}

declare function greet(setting: GreetingSettings): void;

재사용 가능한 타입 - 타입 별칭 (Reusable Types - Type Aliases)

문서

인사말이 필요한 어디든 string, 문자열을 반환하는 함수, 또는 Greeter 인스턴스를 제공하면 됩니다.

코드

function getGreeting() {
  return "howdy";
}
class MyGreeter extends Greeter {}

greet("hello");
greet(getGreeting);
greet(new MyGreeter());

선언

타입 별칭(type alias)을 쓰면 타입의 줄임말을 만들 수 있어요.

type GreetingLike = string | (() => string) | MyGreeter;

declare function greet(g: GreetingLike): void;

타입 정리하기 (Organizing Types)

문서

greeter 객체는 파일에 로그를 남기거나 알림(alert)을 띄울 수 있어요. .log(...)에는 LogOptions를, .alert(...)에는 알림 옵션을 전달할 수 있습니다.

코드

const g = new Greeter("Hello");
g.log({ verbose: true });
g.alert({ modal: false, title: "Current Greeting" });

선언

타입을 정리할 때는 네임스페이스(namespace)를 사용해요.

declare namespace GreetingLib {
  interface LogOptions {
    verbose?: boolean;
  }
  interface AlertOptions {
    modal: boolean;
    title?: string;
    color?: string;
  }
}

또한 한 번의 선언 안에서 네임스페이스를 중첩해서 만들 수도 있어요.

declare namespace GreetingLib.Options {
  // Refer to via GreetingLib.Options.Log
  interface Log {
    verbose?: boolean;
  }
  interface Alert {
    modal: boolean;
    title?: string;
    color?: string;
  }
}

클래스 (Classes)

문서

Greeter 객체를 인스턴스화해서 그리터를 만들 수도 있고, 그것을 상속해서 나만의 그리터를 만들 수도 있습니다.

코드

const myGreeter = new Greeter("hello, world");
myGreeter.greeting = "howdy";
myGreeter.showGreeting();

class SpecialGreeter extends Greeter {
  constructor() {
    super("Very special greetings");
  }
}

선언

클래스나 클래스와 비슷한 객체를 표현할 때는 declare class를 사용해요. 클래스는 생성자뿐만 아니라 속성과 메서드도 가질 수 있어요.

declare class Greeter {
  constructor(greeting: string);

  greeting: string;
  showGreeting(): void;
}

전역 변수 (Global Variables)

문서

전역 변수 foo는 현재 존재하는 widget의 개수를 담고 있습니다.

코드

console.log("Half the number of widgets is " + foo / 2);

선언

변수를 선언할 때는 declare var를 사용해요. 변수가 읽기 전용이라면 declare const를 쓸 수 있고, 블록 스코프 변수라면 declare let을 쓸 수도 있어요.

/** The number of widgets present */
declare var foo: number;

전역 함수 (Global Functions)

문서

문자열을 greet 함수에 전달하면 사용자에게 인사말을 보여줄 수 있습니다.

코드

greet("hello, world");

선언

함수를 선언할 때는 declare function을 사용해요.

declare function greet(greeting: string): void;

더 알아보기 (Learn more)