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. オプションパラメータとデフォルトパラメータ
サンプルコードは次のとおりです。 関数 add(x: 数値, y: 数値): 数値 { x + yを返す } let result1 = add(1) // 引数は 2 つ必要でしたが、 1 つでした。 結果2 = add(1, 2) とします。 let result3 = add(1, 2, 3) // 引数は2つ必要だったが、3つになった JS では、各パラメータはオプションであり、渡すことも渡さないこともできます。渡されなかった場合は、 これは 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 では、 実際、TS では、すべてのパラメータを変数に格納できますが、この変数は実際には分離された配列です。 サンプルコードは次のとおりです。 関数 fun(x: 数値, ...数値: 数値[]): void { console.log(数字) } 関数1, 2, 3, 4 // [ 2, 3, 4 ] TypeScript の関数に関するこの記事はこれで終わりです。TypeScript 関数に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明
まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...
Navicat を使用してリモート Linux MySQL データベースに接続すると、不明なエラー ...
雇用主から MySQL クエリ条件でインデックスが使用されるかどうかを尋ねられた場合、どのように答え...
v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...
環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...
目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....
ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...
この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...
sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド...
目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...
注意: docker-compose.yml ファイルを書き込むときは、すべてのコロン (:) とダ...
この記事では、例を使用して、MySQL ストアド プロシージャを作成 (CREATE PROCEDU...
この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...
最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...
序文最近、私はある要件に遭遇しました。会社の業務上、2 つのデータベース間の一部のテーブルは、リアル...