magazine off

テクノロジー・マガジン OFFです!コラム ✖️ 最新ニュースをほぼ毎日お届けしています。

TypeScriptの定義ファイルの書き方まとめ ClassやFunctionsやInterfacesやType Aliases

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

 

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

 

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

 

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

 

 

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

 

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

 

あくまでもこの記事の目的は、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;

コメントを残す