関数の型
TypeScript型システムは、関数の機能に対して多くの愛を与えています。結局の所、関数は、構成可能なシステムの核となる建築ブロックです。
パラメータの型アノテーション
もちろん、他の変数にアノテーションを付けることができるように、関数のパラメータにアノテーションを付けることもできます。
1
// variable annotation
2
var sampleVariable: { bar: number }
3
4
// function parameter annotation
5
function foo(sampleParameter: { bar: number }) { }
Copied!
ここでは、インライン型アノテーションを使用しました。もちろん、インターフェースなどを使用することができます
戻り値の型アノテーション
戻り値の型には、変数に使用するのと同じスタイルの関数パラメータリストの後にアノテーションを付けることができます。
: Fooの例です：1
interface Foo {
2
foo: string;
3
}
4
5
// Return type annotated as `: Foo`
6
function foo(sample: Foo): Foo {
7
return sample;
8
}
Copied!
もちろん、ここではインターフェースを使用しましたが、他のアノテーション（インライン型アノテーションなど）を自由に使用できます。
コンパイラが型推論できる場合は、関数の戻り値の型アノテーションが必要ないことはよくあります。
1
interface Foo {
2
foo: string;
3
}
4
5
function foo(sample: Foo) {
6
return sample; // inferred return type 'Foo'
7
}
Copied!
しかし、一般的には、これらのアノテーションを追加してエラー対処をしやすくする方が良い考えです。例：
1
function foo() {
2
return { fou: 'John Doe' }; // You might not find this misspelling of `foo` till it's too late
3
}
4
5
sendAsJSON(foo());
Copied!
関数から何かを返す予定がないなら、
:voidとアノテーションを付けることができます。通常、:voidを書かずに型推論に任せることができます。オプションパラメータ
パラメータをオプションとしてマークすることができます：
1
function foo(bar: number, bas?: string): void {
2
// ..
3
}
4
5
foo(123);
6
foo(123, 'hello');
Copied!
あるいは、パラメータ宣言の後に
= someValueを使用してデフォルト値を提供することもできます。これは、呼び出し元がその引数を提供しない場合に設定されます。1
function foo(bar: number, bas: string = 'hello') {
2
console.log(bar, bas);
3
}
4
5
foo(123); // 123, hello
6
foo(123, 'world'); // 123, world
Copied!
オーバーロード
TypeScriptでは、関数のオーバーロードを宣言できます。これは、ドキュメントと型の安全性を高める目的に役立ちます。次のコードを考えてみましょう：
1
function padding(a: number, b?: number, c?: number, d?: any) {
2
if (b === undefined && c === undefined && d === undefined) {
3
b = c = d = a;
4
}
5
else if (c === undefined && d === undefined) {
6
c = a;
7
d = b;
8
}
9
return {
10
top: a,
11
right: b,
12
bottom: c,
13
left: d
14
};
15
}
Copied!
コードを注意深く見ると、
a、b、 c、dの意味は、渡される引数の数に応じて変化することがわかります。関数の引数は1、2、または4つです。これらの制約は、関数のオーバーロードを使用して強制と文書化を行うことができます。関数ヘッダを複数回宣言するだけです。最後の関数ヘッダは、関数本体内で実際に有効なものですが、外部では使用できません。これを以下に示します。
1
// Overloads
2
function padding(all: number);
3
function padding(topAndBottom: number, leftAndRight: number);
4
function padding(top: number, right: number, bottom: number, left: number);
5
// Actual implementation that is a true representation of all the cases the function body needs to handle
6
function padding(a: number, b?: number, c?: number, d?: number) {
7
if (b === undefined && c === undefined && d === undefined) {
8
b = c = d = a;
9
}
10
else if (c === undefined && d === undefined) {
11
c = a;
12
d = b;
13
}
14
return {
15
top: a,
16
right: b,
17
bottom: c,
18
left: d
19
};
20
}
Copied!
ここで最初の3つの関数ヘッダは
paddingへの有効な呼び出しとして利用できます：1
padding(1); // Okay: all
2
padding(1,1); // Okay: topAndBottom, leftAndRight
3
padding(1,1,1,1); // Okay: top, right, bottom, left
4
5
padding(1,1,1); // Error: Not a part of the available overloads
Copied!
もちろん、最後の宣言(関数内部から見た真の宣言)はすべてのオーバーロードと互換性があることが重要です。これは、それが関数本体が本当に必要とする関数呼び出しの性質であるからです。
TypeScriptの関数オーバーロードにランタイムでのオーバーヘッドはありません。関数が呼び出されると予想される方法を文書化し、コンパイラがコードの残りの部分をチェックするだけです。
関数の宣言
簡単なヒント: 型の定義とは、既存の実装に対してあなたが型をどのように書くかということです。
具体的な実装を示さずに関数の型を宣言する方法には、2つの方法があります。以下に例を示します。
1
type LongHand = {
2
(a: number): number;
3
};
4
5
type ShortHand = (a: number) => number;
Copied!
上の2つの例は完全に同じ宣言です。違いがあるのは、関数のオーバーロードを行おうとする場合です。前者の長い書き方の宣言で定義したときのみ、以下のようにオーバーロードを追加できます。
1
type LongHandAllowsOverloadDeclarations = {
2
(a: number): number;
3
(a: string): string;
4
};
Copied!
最終更新 2yr ago