Type Script入門-声明と構造、関数

4812 ワード
javascript typescript アングラー2 angglar.js
アングラー2を勉強して、アングラー2を公開します.読書ノート.Anglar 2はType Scriptを公式の最も主要なビルド音声として選択し、Type Scriptの音声を把握することはAnglarアプリケーションの効率的な開発に有利になることを意味する.
宣言と構造
Type Scriptでは、var、let、constのような声明方式がサポートされています.
let声明
letとvar宣言変数の書き方は似ています.例示コードは以下の通りです.
let hello = "Hello Angular";
varとは異なり、let宣言の変数は、ブロックレベルの作用領域内で有効にすることを目的としており、例示的なコードは以下の通りである.
function f(input: boolean) {
    let a = 100;
    if(input) {
        let b = a + 1; //     
        return b;
    }
    return b; //   ， b     
}
ここでは2つの変数aとbを定義し、aの作用領域はf()関数の中にあり、bはifという文ブロックにある.ブロックレベルのスコープにはいくつかの注意が必要です.
  • は、その宣言の前に、または
    • を読み込むことができません.
  • は同じ作用領域において、letは変数が繰り返し宣言されることを許さない.
    また、以下の2つの関数でlet宣言の比較に注意する必要があります.
    function funA(x) {
    let x = 100;    //   ，x         
}

//                  
function funB(condition, x) {
    if(condition) {
        let x = 100;     //     
        return x;
    }
    return x;    
}

funB(false, 0);    //    0
funB(true, 0);    //    100
    const声明
    const声明はlet声明と似ています.letと同じ作用ドメイン規則を持っていますが、const宣言は定数であり、定数は再割り当てされません.ただし、定義された定数がオブジェクトである場合、オブジェクト内の属性値は再割り当てされます.サンプルコードは以下の通りです.
    const CAT_AGE = 9;

const cat = {
    name: 'kitty',
    age: CAT_AGE
}
//   
CAT_AGE = 10;
//   
cat = {
    name: 'Danie',
    age: CAT_AGE
}

cat.name = "Jason";    //
    構成を解く
    解凍はES 6の重要な特性である.解構成とは、宣言された変数のセットを、同じ構造の配列またはオブジェクトの要素値に1つずつ対応させ、変数に対応する要素を割り当てます.
    Type Scriptでは配列解離とオブジェクト解凍をサポートします.
    配列解法
    データ構造は最も単純な解凍タイプで、コード例は以下の通りです.
    let input = [1, 2];
let [first, second] = input;
console.log(first); //     input[0]: 1;
console.log(second); //     input[1]: 2

//            ：
[first, second] = [second, first];    //     

//         
function f([first, second] = [number, number]) {
    console.log(first + second);
}
f([1, 2]);    //    3
    時々、let[first]「…rest」のように「...」という語句が使われているのを見ますが、「…」の3つの連続小数点は演算子を展開し、可変長のパラメータリストを作成するために使用されています.例のコードは以下の通りです.
    let [first, ...rest] = [1, 2, 3, 4];
console.log(first);    //    1
console.log(rest);    //    [2, 3, 4];
    オブジェクトの解凍
    オブジェクトの解凍は、コードをより簡潔にし、読み取り可能性が強くします.コード例は以下の通りです.
    let test = { x: 0, y: 10, z: 20 };
let {x, y, z} = test;
console.log(x, y, z);    //    0, 10, 20
    関数
    関数の定義
    Type Scriptでは、関数宣言と関数表現の書き方をサポートします.コード例は以下の通りです.
    //       
function maxA(x: number, y: number): number {
    return x > y? x : y;
}

//        
let maxB = function(x: number, y: number): number {
    return x > y? x : y;
}
    上記の例では、パラメータタイプと戻り値タイプの両方がチェックされます.呼び出し時はパラメータタイプと個数の一致だけを行い、パラメータ名のチェックは行いません.
    オプションのパラメータ
    Type Scriptでは、変調関数の各パラメータは必ず伝達されます.つまり、関数に伝達するパラメータの個数は関数定義時のパラメータと一致しなければなりません.例のコードは以下の通りです.
    function max(x: number, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    //   
let result2 = max(2, 4);    //
    しかし、現実的な開発では、実際の状況によって、あるパラメータに入るかどうかを決める必要があります.Type Scriptもオプションのパラメータ文法を提供しています.つまり、パラメータ名の隣に加えます.可変パラメータに変更するには、オプションパラメータは必須パラメータの後ろにある必要があります.コード例は以下の通りです.
    function max(x: number, y?: number): number {
    if(y) {
        return x > y? x: y;
    } else {
        return x;
    }
}
let result1 = max(2);    //   
let result2 = max(2, 4);    //   
let result3 = max(2, 4, 7);    //
    デフォルトのパラメータ
    Type Scriptは初期化のデフォルトパラメータもサポートしています.関数のあるパラメータにデフォルト値が設定されている場合、この関数が呼び出されたとき、このパラメータに値を伝えたり、伝えたりしていない場合、このパラメータの値は設定のデフォルト値です.コード例は以下の通りです.
    function max(x: number, y = 4): number {
    return x > y? x: y;
}

let result1 = max(2);    //   
let result2 = max(2, 4);    //   
let result3 = max(2, undefined);    //
    デフォルト値を持つパラメータは、必須パラメータの後ろに置く必要はないが、デフォルト値パラメータが必須パラメータの前に置かれている場合、ユーザは必ず明示的にundefinedに入ってきます.コード例は以下の通りです.
    function max(x = 2, y: number): number {
    return x > y? x: y;
}

let result1 = max(2);    //   
let result2 = max(undefined, 4);    //   
let result3 = max(2, 4);    //
    残りのパラメータ
    複数のパラメータを同時に操作したり、どれぐらいのパラメータが入ってくるかわからない場合は、Type Scriptの残りのパラメータを使用する必要があります.サンプルコードは以下の通りです.
    function sum(x:number, ...restOfNumber:number[]): number {
    //      ...    ，           
    let result = x;
    for(let i = 0; i < restOfNumber.length; i++) {
        result += restOfNumber[i];    
    }
    return result;
}

let result = sum(1, 2, 3, 4, 5);
console.log(result);    //    15
    関数の再ロード
    関数の再負荷は、同じ関数のための複数の関数タイプの定義を提供することによって、複数の機能を実現する母に達成される.Type Scriptは関数の再負荷をサポートできます.例のコードは以下の通りです.
    function css(config: {});
function css(config: string, value: string);
    上記の例では、この関数には2つの重荷重方法があり、コンパイラはパラメータの種類によってどの関数を呼び出すかを判断します.Type Scriptの関数の再負荷は、リロードリストを検索することによってマッチングを達成するため、リロード方法を実現する際に、最も正確な定義を先頭に置くことを推奨します.
    • javacript基礎知識(配列、オブジェクト、文字列など)