Type Script関数を使って整理します.

4684 ワード

紹介します
関数はJavaScriptアプリケーションの基本です.抽象層、アナログ類、情報隠蔽とモジュールの実現に役立ちます.Type Scriptでは、クラス、名前空間、モジュールなどがサポートされていますが、関数は依然として主に行動を定義するところです.Type ScriptはJavaScript関数に付加的な機能を追加しました.例えば、形参タイプ、戻り値、thisの定義時に指定するなどです.
二、関数にタイプを定義する
1.パラメータタイプ
//              
function add(x: number, y: number): number {
    return x + y;
}
let myAdd = function (x: number, y: number): number { return x + y };
完全関数タイプを書きます.
関数タイプには、パラメータタイプと戻り値タイプの2つの部分があります.完全な関数タイプを書くとき、この二つの部分は必要です.パラメータリストの形式でパラメータタイプを書き、各パラメータに名前とタイプを指定します.
第二の部分は戻り値タイプです.戻り値に対しては、関数と戻り値の種類の前に使用します. =>)前に述べたように、戻り値の種類は関数タイプの必要な部分です.関数が返されていない場合は、戻り値の種類も指定しなければなりません. voidは残してはいけません.
let myAdd:(x:number,y:number)=>number=function(x:number,y:number):number{return x+y};
2.オプションパラメータ?と標準値パラメータ
//    
//    ,          ,      ,             
//          undefined
function bindName(firstName?: string, lastName?: string) {
    console.info(`firstName=${firstName},lastName=${lastName}`);
}
bindName();
//                  ,  C#    
//                ,          ,    undefined
//              ,      undefined
function bindName(firstName: string, lastName: string = '   ') {
    console.info(`firstName=${firstName},lastName=${lastName}`);
}
bindName('wangxiaoming');
//           
function bindName(firstName?: string, lastName: string = '   ') {
    console.info(`firstName=${firstName},lastName=${lastName}`);
}
bindName();

//    ,      
function bindName(firstName:string,lastName?:string){
console.info(`firstName=${firstName},lastName=${lastName}`);
}
function bindName(firstName:string,lastName:string='   '){
console.info(`firstName=${firstName},lastName=${lastName}`);
}
3.残りのパラメータ
//    
//             ,          
function bindName(firstName:string,...restOfName:string[]){
    console.log(`firstName=${firstName},other:${restOfName.join('&')}`);
}
bindName('  ','a','b','c');
三、関数におけるthisの使用
1.thisと矢印関数
JavaScriptでは、thisの値は関数が呼び出された時に指定されます.これは強力で柔軟な特徴ですが、呼び出しの文脈は時間がかかります.
Type Scriptでは、矢印関数で定義時の現在のオブジェクトの参照を指定できます.
//this      
//JavaSctipt   this           ,         
//TypeScript     ,   this        
let deck = {
    suits: ['hearts', 'spades', 'clubs', 'diamonds'],
    cards: Array(52),
    createCardPicker: function () {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);
            console.info(typeof this);
            
            console.info(this);
            return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
        }
    }
}
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
console.info(pickedCard);
2.thisパラメータ
thisパラメータ指定矢印関数の特定のタイプ
//this      
//this         ,            
//this          this     
interface Card {
    suit: string;
    card: number;
}
interface Deck {
    suits: string[];
    cards: number[];
    createCardPicker(this: Deck): () => Card;
}
let deck: Deck = {
    suits: ['hearts', 'spades', 'clubs', 'diamonds'],
    cards: Array(52),
    createCardPicker: function (this: Deck) {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);
            console.info(typeof this);
            return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
        }
    }
}
let cardPicker=deck.createCardPicker();
let pickedCard=cardPicker();
console.info(cardPicker);
.
四、関数の再ロード
JavaScript自体は動的言語です.JavaScriptでは、関数が異なるパラメータ2に入ってきて、異なるデータを返して、方法を再ロードします.
Type Scriptではanyタイプのイメージ、戻りタイプを指定でき、関数内部判定処理で負荷がかかります.
Type Scriptコンパイラは現在、同じスコープの関数名のコンパイルに異常があります.つまり、同じ名前の関数は現在許可されていません.
//    
//TypeScript ,                   
//                   ,      
//    ,     
function pickCard(x: { suit: string; card: number; }): number {
    return 2;
}
function pickCard(x: number): { suit: string; card: number; } {
    return { suit: 'asdf', card: 3 };
}
//    ,    
function pickCard(x): any {
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}
詳細:
Type Script類使用整理
Type Scriptインターフェースの紹介
Type Script基礎データタイプの紹介