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 子要素の固定配置ソリューションの詳細な説明
みなさんこんにちは。私は梁旭です。ご存知のとおり、Linux ではデバイス ファイルも含めすべてがフ...
目次親コンポーネントと子コンポーネント間でパラメータを渡すルーティングパラメータステータスの改善コン...
Ubuntu が今日のデスクトップ ユーザーの間で最も人気のある Linux オペレーティング シス...
トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
数日前、私のウェブサイトがいくつかの IP アドレスから大量の悪意のある標的型スキャンを受け、ブルー...
これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...
この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...
目次1. プロジェクト開発において、コンポーネント間の最も一般的な関係は次の 2 つのタイプに分けら...
目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...
MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...
MySQL 5.0 は、いくつかの「高度な機能」があるため定番となっています。これは、Windows...
今日は、「ローテク」の問題について書きたいと思います。ちなみに、私は JavaScript Week...
コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...
目次LinuxでTCPを作成する手順サーバクライアントTCP確立プロセスサンプルコードLinuxでT...
たくさん集めましたが、すべて失敗に終わりました。最終的に、この方法は優れており、使用に影響を与えない...