TypeScript の関数

TypeScript の関数

1. 関数の定義

1.1 JavaScript の関数

TypeScript の関数について学習する前に、JavaScript でよく使用される次の関数定義を確認しましょう。

最初の方法: functionキーワードを使用して関数を宣言する

関数 add1 (x, y) {
    x + yを返す
}


2番目の方法: リテラル値を使用して関数を宣言する

定数add2 = 関数(x, y) {
    x + yを返す
}


3番目の方法: 矢印関数を使用して関数を宣言する

定数add3 = (x, y) => {
    x + yを返す
}


1.2 TypeScriptの関数

TS での関数宣言方法は JS と似ています。唯一の違いは、パラメータの型と戻り値の型が固定されていることです。戻り値がない場合は、戻り値の型を空白のままにするのではなく、void にする必要があります。

次に、TS を使用して上記の 3 つの関数を再宣言します。

最初の方法は、function キーワードを使用して関数を宣言することです。

/*
 構文構造は次のようになります: 関数 関数名 (パラメータ 1: 型、パラメータ 2: 型、...): 戻り値の型 {
     関数本体}
 */
関数 add4(x: 数値, y: 数値): 数値 {
    x + yを返す
}


2番目の方法: リテラル値を使用して関数を宣言する

/*
 構文構造は次のようになります: const 関数名 = 関数 (パラメータ 1: 型、パラメータ 2: 型、...): 戻り値の型 {
     関数本体}
 */
const add5 = 関数 (x: 数値, y: 数値): 数値 {
    x + yを返す
}


3番目の方法: 矢印関数を使用して関数を宣言する

/*
 構文構造は次のとおりです: const 関数名 = (パラメータ 1: 型、パラメータ 2: 型、...): 戻り値の型 => {
     関数本体}
 */
// 3. 矢印関数を使用して関数を宣言します。const add6 = (x: number, y: number): number => {
    x + yを返す
}


上記は TS で関数を宣言する方法です。 JS ではパラメータ分離割り当ての状況もあります。TS でパラメータの型を指定するにはどうすればよいでしょうか?サンプルコードは次のとおりです。

const add7 = ({ x, y }: { x: 数値; y: 数値 }): 数値 => {
    x + yを返す
}

TS では、次のように、より読みやすい書き方もあります。

const add8: (baseValue: 数値、増分: 数値) => 数値 = 関数 (
    x: 数値、
    y: 数値
): 番号 {
    x + yを返す
}

このメソッドは関数を 2 つの部分に分割します。最初の部分は関数の戻り値の型であり、2 番目の部分は関数が定義される場所です。

実は、前半はコードの可読性を高めるためだけのもので、実用的な意味はあまりありません。

2. オプションパラメータとデフォルトパラメータ

TypeScriptのすべての関数は必須です。これは、null やundefinedパラメータとして渡すことができないという意味ではなく、パラメータごとに値が渡されるかどうかを意味します。1 対 1 の対応がない場合、例外がスローされます。簡単に言えば、仮パラメータの数は実際のパラメータの数と同じです。

サンプルコードは次のとおりです。

関数 add(x: 数値, y: 数値): 数値 {
    x + yを返す
}
let result1 = add(1) // 引数は 2 つ必要でしたが、 1 つでした。
結果2 = add(1, 2) とします。
let result3 = add(1, 2, 3) // 引数は2つ必要だったが、3つになった

JS では、各パラメータはオプションであり、渡すことも渡さないこともできます。渡されなかった場合は、 undefinedのデフォルト値になります。

これは TS でも可能です。オプションのパラメータ関数を実装するには、パラメータ名の後に ? を追加するだけです。

次のコード:

// オプションパラメータ関数を実装する // パラメータ名の横に?を追加するだけ function add(x: number, y?: number): number {
  x + yを返す
}
結果1 = add(1)とする
結果2 = add(1, 2) とします。
// let result3 = add(1, 2, 3) // 引数は 2 つ必要でしたが、3 つでした

上記のコードはオプションパラメータを実装しています

TS でデフォルト パラメータを実装するのは、JS でデフォルト パラメータを実装するのと同じです。値を割り当てるだけです。

サンプルコードは次のとおりです。

;(関数 () {
  関数 add(x: 数値, y: 数値 = 2): 数値 {
    x + yを返す
  }
  結果1 = add(1) // 3
  result2 = add(1, 2) // 3 とします。
})()

もちろん、y に型を指定しない場合は、JS の場合とまったく同じになります。

3. 残りのパラメータ

いわゆる残余パラメータとは、関数を定義するときに 2 つのパラメータを渡す必要があるが、関数を呼び出すときに 3 つのパラメータが渡される場合です。このとき、余分なパラメータがあり、それが残余パラメータです。

JS では、 argumentsを使用して渡された追加のパラメータにアクセスできます。では、TS の残りのパラメータにどのようにアクセスするのでしょうか?

実際、TS では、すべてのパラメータを変数に格納できますが、この変数は実際には分離された配列です。

サンプルコードは次のとおりです。

関数 fun(x: 数値, ...数値: 数値[]): void {
    console.log(数字)
}
関数1, 2, 3, 4 // [ 2, 3, 4 ]

TypeScript の関数に関するこの記事はこれで終わりです。TypeScript 関数に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript での関数オーバーロード
  • TypeScript 関数の定義と使用例のチュートリアル
  • TypeScriptの一般的な型と応用例の説明
  • TypeScript のクラス
  • TypeScript の関数とクラスを理解していますか?

<<:  親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

>>:  JS を使って CSS3 で丸い角を実装する方法

推薦する

Linuxシステムにおける仮想デバイスファイルのさまざまな実用的な使用法の詳細な説明

みなさんこんにちは。私は梁旭です。ご存知のとおり、Linux ではデバイス ファイルも含めすべてがフ...

Reactはいくつかの方法でパラメータを渡します

目次親コンポーネントと子コンポーネント間でパラメータを渡すルーティングパラメータステータスの改善コン...

VMware10 での CentOS 7 のインストールと設定のチュートリアル

Ubuntu が今日のデスクトップ ユーザーの間で最も人気のある Linux オペレーティング シス...

MySQL トリガーの使用シナリオとメソッドの例

トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...

ウェブページを開いて数秒後に他のページにリダイレクトする

これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...

MySQL 重複インデックスと冗長インデックスの例の分析

この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...

Vueコンポーネント間のデータ共有の詳細な説明

目次1. プロジェクト開発において、コンポーネント間の最も一般的な関係は次の 2 つのタイプに分けら...

Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)

目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...

MySQLでホワイトリストアクセスを設定する方法

MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...

MySQL 5.0.96 for Windows x86 32 ビット グリーン簡易版インストール チュートリアル

MySQL 5.0 は、いくつかの「高度な機能」があるため定番となっています。これは、Windows...

HTMLを使用してシンプルなメールテンプレートを作成する

今日は、「ローテク」の問題について書きたいと思います。ちなみに、私は JavaScript Week...

HTML thead タグの定義と使用法の詳細な紹介

コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...

Linux システムで TCP 接続を作成するプロセスの紹介

目次LinuxでTCPを作成する手順サーバクライアントTCP確立プロセスサンプルコードLinuxでT...

Linux で起動時にプログラムを自動的に実行させる最も簡単な方法

たくさん集めましたが、すべて失敗に終わりました。最終的に、この方法は優れており、使用に影響を与えない...