こんにちは、テルプロです！
本記事では、TypeScriptにおける「基本的な関数」の使い方をご紹介します。
どれも初学者向けに「シンプルで分かりやすい」にこだわって解説しています。
厳選した7選は、TypeScriptを用いたWeb開発には欠かせない知識です。基礎をしっかりと押さえて開発の幅を広げていきましょう。
本記事ではそんな悩みを解決していきます！
本記事を読むことで
- TypeScriptの基本的な関数の使い方を一覧で確認できる
- コードを用いて解説しているため、すぐに理解できる
TypeScriptにおける基本的な関数の使い方7選
従来の関数
// (a:第１引数の型, b:第２引数の型):戻り値の型
function sum(a: number, b:number):number {
return a + b;
}
console.log(sum(10,20)) //実行結果：30無名関数
// [関数sum]に対して型を指定できる
let sum: (a: number, b: number) => number = function (
a: number,
b: number
): number {
return a + b;
};
console.log(sum(10, 20)); //実行結果：30アロー関数
// 従来の関数とは書き方が異なる
let sum: (a: number, b: number) => number = (
a: number,
b: number
): number => {
return a + b;
};
// ラムダ式（returnを省略して書ける）
let sum: (a: number, b: number) => number = (
a: number,
b: number
): number => a + b;
console.log(sum(10, 20)); //実行結果：30オプショナル引数
// 引数の隣に[?]を記述することで、値を省略可能にする
let sum: (a: number, b: number, c?:number) => number = (
a: number,
b: number,
c?: number,
): number => {
if (c) return a + b + c
return a + b;
};
console.log(sum(10, 20)); //実行結果：30
console.log(sum(10, 20, 30)); //実行結果：60デフォルト引数
// 引数にデフォルト値を指定できる
let sum = ( a: number = 10, b: number = 20): number => {
return a + b;
};
console.log(sum()); //実行結果：30残余引数
// previousValue(累積値) currentValue(現在処理されている要素）
const reducer = (previousValue: number, currentValue: number) => {
return previousValue + currentValue;
};
// [...values] = 残余引数(不定数の引数を配列として受け取る）
const sum: (...values: number[]) => number = (...values: number[]): number => {
// reduce = 配列データの各要素を累積して1つの値にする関数
const result = values.reduce(reducer);
return result;
};
console.log(sum(1, 2, 3, 4, 5)); //実行結果：15オーバーロード
// 関数を定義する際の名前は同じだけど、引数や戻り値の値が違うもの
// 関数の前に型を宣言する(シグネチャー)
function foo(value: string): string;
function foo(value: number): number;
// シグネチャーで宣言した関数以外はやってこない - だからany型で良い
function foo(value: any): any {
if (typeof value === "string") {
return value + value;
} else {
return value * 2;
}
}
console.log(foo("Nice! ")); //実行結果 Nice! Nine!
console.log(foo(100)); // 200まとめ
今回は「TypeScriptにおける基本的な関数の使い方」をご紹介しました。
今回ご紹介した7選は、TypeScriptを用いたWeb開発には欠かせない知識になっています。基礎をしっかりと押さえて開発の幅を広げていきましょう。
TypeScriptの実践的なスキルを身につけたい方には「Udemy」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。
▼下記の記事で「TypeScript学習におすすめのUdemy講座3選」をご紹介しています！
最後までご覧いただきありがとうございました。ではまた！
