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 で丸い角を実装する方法

推薦する

Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴

まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...

Navicat を使用してリモート Linux MySQL データベースに接続するときに発生する 10061 不明エラーの詳細な説明

Navicat を使用してリモート Linux MySQL データベースに接続すると、不明なエラー ...

インデックスは MySQL クエリ条件で使用されますか?

雇用主から MySQL クエリ条件でインデックスが使用されるかどうかを尋ねられた場合、どのように答え...

VUE v-for の :key の詳細な説明

v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...

エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...

JavaScript の基本変数

目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...

州と市町村の連携を簡単に実現するJavaScript

この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Linux で Sudo を使用して権限を委譲する

sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド&#...

MySQL シリーズ 4 SQL 構文

目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...

docker-compose.yml ファイル内の一般的なテンプレート コマンドの詳細な説明

注意: docker-compose.yml ファイルを書き込むときは、すべてのコロン (:) とダ...

easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...

レスポンシブフレームワークのテーブルヘッダーの自動改行問題に対する簡単な解決策

最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...

MySQL 5.7 における部分テーブルのデュアルマスター同期の実装プロセスの詳細な説明

序文最近、私はある要件に遭遇しました。会社の業務上、2 つのデータベース間の一部のテーブルは、リアル...