javaScriptのアロー関数は、より短く簡潔に関数を記述するための構文です。以下にアロー関数の基本的な書き方を紹介します。
基本の構文
const 関数名 = (引数1, 引数2, ...) => {
// 関数の処理
return 結果;
};
例として、2つの数を足す関数をアロー関数で表すと:
const add = (a, b) => {
return a + b;
};
console.log(add(2, 3)); // 5
処理が1行の場合、returnを省略できる
アロー関数の処理が1行の場合、returnを省略して書くことができます。
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
引数が1つの場合、カッコを省略できる
引数が1つだけの場合、引数を囲む括弧 () を省略することも可能です。
const square = x => x * x;
console.log(square(4)); // 16
引数がない場合
引数がない場合は、() をそのまま使います。
const sayHello = () => console.log("Hello!");
sayHello(); // "Hello!"
オブジェクトを返す場合
オブジェクトリテラルを返す場合、{} が関数のブロックと認識されないように、オブジェクトを丸括弧 () で囲む必要があります。
const getPerson = () => ({
name: "Alice",
age: 30
});
console.log(getPerson()); // { name: 'Alice', age: 30 }
まとめ
- 短い関数を簡潔に書くことができる。
- 引数が1つなら括弧を省略できる。
- 1行の処理なら
returnを省略できる。
このように、アロー関数は短く記述できるため、特にコールバック関数などでよく使われます。
ここにTypeScriptの型注釈を付けます。
型注釈（Type Annotation） は、TypeScriptで変数や関数の引数、返り値などにデータの型を明示的に指定する機能です。これにより、プログラムの安全性を向上させ、予期しないエラーを防ぐことができます。
型注釈の基本
型注釈を行うには、変数名や引数の後にコロン : を付け、その後に型を指定します。
変数に対する型注釈
let age: number = 30;
let name: string = "Alice";
let isStudent: boolean = true;
age: 数値型numbername: 文字列型stringisStudent: 真偽値型boolean
関数の引数に対する型注釈
関数の引数に型を注釈することで、その関数に渡せるデータの型を制約することができます。
const greet = (name: string): string => {
return `Hello, ${name}!`;
};
console.log(greet("Alice")); // "Hello, Alice!"
- 引数
nameはstring型でなければなりません。 - 関数の返り値も
string型であることを指定しています。
関数の返り値に対する型注釈
関数の返り値の型を注釈することもできます。関数がどの型の値を返すべきかを明示的に示すことで、型の安全性が向上します。
const add = (a: number, b: number): number => {
return a + b;
};
この例では、a と b は number 型の引数であり、関数は number 型の値を返すと注釈されています。
よく使われる型
- 基本型
string: 文字列型number: 数値型boolean: 真偽値型any: 任意の型（あまり推奨されない）void: 戻り値がない（主に関数で使う）null/undefined: null または undefined
- 配列 配列には要素の型を注釈できます。例えば、
number型の配列は次のように指定します。typescriptコードをコピーするlet numbers: number[] = [1, 2, 3];または、Array<型>という形式も使えます。typescriptコードをコピーするlet numbers: Array<number> = [1, 2, 3]; - オブジェクト オブジェクトのプロパティにも型を注釈できます。typescriptコードをコピーする
let person: { name: string; age: number } = { name: "Alice", age: 30 }; - ユニオン型 1つ以上の型を持つ可能性がある場合、ユニオン型を使います。例えば、
numberまたはstringの値を持つ変数には次のように型注釈します。typescriptコードをコピーするlet value: number | string = "Hello"; value = 42; // これもOK
型注釈の使用例
配列の型注釈
const numbers: number[] = [1, 2, 3, 4];
numbers は number 型の要素を持つ配列であることを示しています。
オブジェクトの型注釈
const person: { name: string, age: number } = {
name: "Alice",
age: 30
};
この例では、person は name プロパティが string 型、age プロパティが number 型のオブジェクトです。
関数の型注釈
const multiply = (a: number, b: number): number => {
return a * b;
};
この関数では、引数 a と b が number 型で、関数の戻り値も number 型であることを指定しています。
インターフェースを使った型注釈
より複雑なオブジェクトの型注釈を扱う場合、インターフェースを使うことができます。
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Alice",
age: 30
};
インターフェースを使うと、複数の場所で同じ型定義を再利用できるので、コードの可読性や保守性が向上します。
型注釈のまとめ
- 型注釈は、変数や関数に対して期待される型を明示的に指定するためのものです。
- これにより、コンパイル時に型のミスを防ぎ、より安全で信頼性の高いコードを書くことができます。
- 基本型だけでなく、配列、オブジェクト、関数などにも型を注釈できます。
- ユニオン型やインターフェースを使うことで、複雑なデータ構造や柔軟な型を扱うことができます。
TypeScriptの型注釈は、型推論と併用することで、開発時のバグを減らし、安心してコードを書くことができる強力なツールです。
追加
TypeScript では、引数が1つでもアロー関数の型注釈をする際には括弧が必要です。
これはJavaScriptの通常のアロー関数では、引数が1つだけの場合に括弧を省略することができますが、TypeScriptで引数に型注釈を付けると、括弧が必須となるためです。
例: 引数が1つの関数に型注釈を付けた場合
以下のように、引数 x に number 型の注釈を付ける場合は、括弧を省略できません。
const square = (x: number): number => {
return x * x;
};
この例では、x に number 型の注釈が付けられ、関数の戻り値も number です。
括弧を省略するとエラーになる例
括弧を省略してしまうと、TypeScriptは構文として解釈できず、エラーになります。
// エラー: 型注釈を付けた引数には括弧が必要
const square = x: number => {
return x * x;
};
この場合は、x: number の部分が正しく解釈されず、文法エラーが発生します。
結論
TypeScript でアロー関数に型注釈を付ける際は、引数が1つでも必ず括弧 () が必要です。
