TypeScript

【TypeScript入門】基本的な関数の使い方7選!コードを用いて徹底解説

こんにちは、アプリ開発者のテルです!

本記事では、TypeScriptにおける「基本的な関数」の使い方をご紹介します。

どれも初学者向けに「シンプルで分かりやすい」にこだわって解説しています。

厳選した7選は、TypeScriptを用いたWeb開発には欠かせない知識です。基礎をしっかりと押さえて開発の幅を広げていきましょう。

テル

ぜひ参考にしてみてください!!

本記事を読むメリット
  1. TypeScriptの基本的な関数の使い方を一覧で確認できる
  2. コードを用いて解説しているため、すぐに理解できる

TypeScriptにおける基本的な関数の使い方7選

従来の関数

// (a:第1引数の型, b:第2引数の型):戻り値の型
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」がおすすめです。私も含め、現役エンジニアの多くが技術のキャッチアップに利用しています。

▼TypeScript学習におすすめのUdemy講座はこちら

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

参考:https://www.typescriptlang.org

エンジニア就活対策