タイプスクリプトでRest構文とDistribution割当てを使用する

ES 6で新しく紹介された文法はいろいろあります.ここで非常に有用でよく使われるのはrest構文とdistributing割り当てです.これらの友人は、タイプスクリプトでより安定して使用することもできます.

RestとDistrict Pictureの割当て

RESTおよびDistribution割当ては、ES 6(すなわちJavaScriptの領域)の厳密な定義である.
ただし、JavaScriptの内容を再強化し、新しいスクリプト構文をよりよく理解するために、他の投稿に示すように簡単に概説します.

Rest Parameter

関数を処理するとき、コードで書かれた関数に異なるパラメータを追加することがよくあります.
ただし、複数のユーザーと対話したり、複数の変数のコードを作成したりすると、関数のパラメータを指定できない場合があります.
特に,いくつかの場合,どれだけの因子が入るかは予め予想できない.
Rest構文では、複数のパラメータを1つの配列に戻すことができます.

function plus(...rest) {
  let sum = 0;
  for (let n of rest) {
    sum += n;
  }
  return sum;
}

console.log(plus(1,3,5));  // 9
console.log(plus(1,3,5,7,9));  // 25

コードブロックを表示する場合は、変数形式のプラス記号関数としてパラメータを指定しないでください...restを使用すると、restという名前の配列にパラメータを含めることができます.
(名前はrestとは限りません.パラメータを含む配列の名前です.任意に名前を付けることができます.)
したがって,3つの数字をパラメータとしても5つの数字をパラメータとしても正常に動作する.

コンストラクタの割当て

解析割当ては、Javascript式で、配列またはオブジェクトのプロパティを分解して変数に値を含めることができます.
話は複雑でしょう.次のブロックを参照してください.

const [a, b, ...rest] = [1, 2, 3, 4, 5]

a; // 1
b; // 2
rest // [3,4,5]

変数名ではなくconstの後に配列式を書き、最初のa、2番目のb、およびさっき学んだrest構文で残りの部分を表します.
次に、aは、下図に示すように、配列の最初の項目1、bは、2番目の項目2、restという配列の残りの項目を自動的に含む.
ReactでusStateを使用したことがある場合は、このDistributionの割り当てに慣れていると思います.

RestおよびDistribution割当てタイプの指定

Rest Parameter

先ほどRest構文を説明し、複数の項目を1つの配列に並べるように教えていただきました.
すなわちrest parameterの結果は、複数のパラメータからなる配列を返すため、アレイタイプを指定するようにタイプを指定できます.

function makeArr(...a :number[]){
  console.log(a)
}

makeArr(1,2,3,4,5)  // [1,2,3,4,5]

これでパラメータに数字しか入れない仕組みが完成しました.

構築割当タイプの指定

let person = { adult : true, age : 20 }

function func({adult, age}){
  console.log(adult, age)
}
func({ adult : true, age : 20 })

上記のコードブロックは、コンストラクション割当てを使用して関数パラメータを作成する例です.タイプはまだ指定されていません
(パラメータとして関数に入る大人とageはオブジェクトの属性とは異なり、混同を避けるために名前を付けただけであることに注意してください)
ここで、タイプ化は、関数パラメータのタイプ化とオブジェクトのタイプ化と混合して使用できます.

let person = { adult : true, age : 20 }

function func({adult, age} :{adult : boolean, age : number}){
  console.log(adult, age)
}
func({ adult : true, age : 20 })

シナリオの場合は、次のコードブロックを参照してください.
type構文を使用して独立したタイプを作成し、「構築」で割り当てられたパラメータに貼り付けます.

type arr = (number | string | boolean)[];

function 함수([a,b,c]:arr){
  console.log(a,b,c)
}

함수( [40, 'Park', true] ) //  40 'Park' true