TypeScriptでプログラミングをするとき、ソースコードを読みやすく書くために、コードの処理を何かしらの方法で分割したりしますよね。

例えば、顕著な例だと関数に分けたりするのが最近のJavaScriptの主流で、Reactなどは関数で分けることでコンポーネント化してプログラミングをしていきます。

しかしながら、TypeScriptのソースコードを色々と読んでたりすると、関数以外に様々な定義文章をよく見かけます。

なので、今日はTypeScriptのドキュメントを参照しながら、どのような方法でTypeScriptの処理の定義が出来るのか、見ていきたいと思います。

www.typescriptlang.org

 

84 Pockets

Documentation - Declaration Reference

https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html

How to create a d.ts file for a module

ちなみにですが、今回の記事では、例えばこういう書き方で処理を定義するのは、こういう時だよっていう感じの書き方のルールや道標はしません。

インターフェースとタイプはどういう時に書き分けるのか？みたいな話は別の記事でお願いします。

あくまでもこの記事の目的は、TypeScriptの定義文章の書き方を頭に入れることで、そういうコードが読めるようになることを目的としています！

では、早速行ってみましょう。

プロパティを持つオブジェクト

グローバル変数myLibには、挨拶を作成する関数makeGreetingと、これまでに作成した挨拶の数を示すプロパティnumberOfGreetingsがあります。

コード

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

宣言

ドット記法でアクセスする型や値を記述するには、declare名前空間を使用します。

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

オーバーロードされた関数

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[];

再利用可能な型（インターフェイス)

Greetingを指定する際には、GreetingSettingsオブジェクトを渡す必要があります。

このオブジェクトは以下のプロパティを持っています。

1 – Greeting。必須の文字列

2 – duration: 任意の時間（ミリ秒単位）任意の時間の長さ(ミリ秒単位)

3 – 色：任意の文字列（例：「#ff00ff」）

コード

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

宣言

インターフェイスを使用して、プロパティを持つタイプを定義します。

interface GreetingSettings {
greeting: string;
duration?: number;
color?: string;
}
declare function greet(setting: GreetingSettings): void;

再利用可能な型（タイプエイリアス)

グリーティングが求められる場所では、文字列、文字列を返す関数、Greeterインスタンスを提供することができます。

コード

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

宣言

型のエイリアスを使って、型の略語を作ることができます。

type GreetingLike = string | (() => string) | MyGreeter;
declare function greet(g: GreetingLike): void;

Organizing Types

greeterオブジェクトは、ファイルにログを記録したり、アラートを表示したりすることができます。.log(…)にはLogオプションを、.alert(…)にはalertオプションを与えることができます。

コード

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

宣言

Use namespaces to organize types.

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

また、1つの宣言でネストした名前空間を作ることもできます。

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

Classes

コード

const myGreeter = new Greeter("hello, world");
myGreeter.greeting = "howdy";
myGreeter.showGreeting();
class SpecialGreeter extends Greeter {
constructor() {
super("Very special greetings");
}
}

宣言

クラスまたはクラスに似たオブジェクトを記述するには、クラスを宣言します。クラスは、コンストラクタのほか、プロパティやメソッドを持つことができます。

declare class Greeter {
constructor(greeting: string);
greeting: string;
showGreeting(): void;
}

グローバル変数

グローバル変数fooには、存在するウィジェットの数が格納されています。

コード

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 関数

文字列を指定して関数greetを呼び出すと、ユーザーに挨拶を表示することができます。

コード

greet("hello, world");

宣言

関数を宣言するには declare function を使います。

declare function greet(greeting: string): void;