TypeScript 矢印関数 戻り型
TypeScriptの矢印関数
TypeScriptの矢印関数は、JavaScriptの関数式を拡張したもので、より簡潔かつ読みやすいコードを書くことができます。矢印関数は、以下のような構文で定義されます。
(parameters) => expression;
ここで、parametersは関数の引数を表し、expressionは関数の戻り値を表します。
戻り型の指定
TypeScriptでは、矢印関数の戻り型を明示的に指定することができます。これにより、コードの可読性と型安全性を向上させることができます。戻り型の指定は、以下のように行います。
(parameters): returnType => expression;
ここで、returnTypeは関数の戻り型を表します。
例
以下の例では、戻り型がnumberである矢印関数を定義しています。
const add = (a: number, b: number): number => {
return a + b;
};
この関数は、2つの数値を引数として受け取り、それらの和を返します。戻り型がnumberであることが明示されているため、この関数は常に数値を返すことが保証されます。
推論された戻り型
TypeScriptは、関数の戻り型を推論することもできます。つまり、戻り型の指定がなくても、TypeScriptが関数の戻り型を自動的に推測します。以下の例では、戻り型がnumberであることが推論されています。
const add = (a: number, b: number) => {
return a + b;
};
TypeScript 矢印関数 戻り型: 例
戻り型を明示的に指定する例
// 戻り型が number の矢印関数
const add = (a: number, b: number): number => {
return a + b;
};
// 戻り型が string の矢印関数
const greet = (name: string): string => {
return `Hello, ${name}!`;
};
// 戻り型が void の矢印関数
const logMessage = (message: string): void => {
console.log(message);
};
戻り型を推論する例
// 戻り型が number と推論される
const subtract = (a: number, b: number) => {
return a - b;
};
// 戻り型が string と推論される
const reverseString = (str: string) => {
return str.split('').reverse().join('');
};
戻り型が void の例
// 戻り型が void の場合、何も返さない
const printGreeting = (name: string) => {
console.log(`Hello, ${name}!`);
};
戻り型が never の例
// 戻り型が never の場合、関数は決して正常に終了しない
const throwError = (message: string): never => {
throw new Error(message);
};
戻り型が Promise の例
// 戻り型が Promise の場合、非同期処理の結果を返す
const fetchData = (url: string): Promise<string> => {
return fetch(url)
.then(response => response.text())
.catch(error => {
throw new Error(`Failed to fetch data: ${error.message}`);
});
};
TypeScriptは、関数の戻り型を推論することができます。つまり、戻り型の指定がなくても、TypeScriptが関数の戻り型を自動的に推測します。
const add = (a: number, b: number) => {
return a + b;
};
この例では、戻り型がnumberであることが推論されています。
ジェネリック型
ジェネリック型を使用することで、関数の戻り型を柔軟に指定することができます。
const identity = <T>(value: T): T => {
return value;
};
この例では、identity関数は任意の型の値を受け取り、同じ型の値を返します。
型アサーション
const fetchData = (url: string): string => {
const response = fetch(url);
return response.text() as string;
};
この例では、response.text()の戻り型がPromise<string>であることが推論されますが、型アサーションを使用してstring型に強制的にキャストしています。
型ガード
型ガードを使用することで、関数の戻り型を条件に基づいて指定することができます。
const getValue = (value: string | number): string | number => {
if (typeof value === 'string') {
return value.toUpperCase();
} else {
return value + 1;
}
};
この例では、valueがstring型の場合はstring型を返し、number型の場合はnumber型を返します。
typescript
