• TypeScript语言学习笔记(3)函数,泛型


    函数

    // 具名函数和匿名函数
    // Named function
    function add(x, y) {
        return x + y;
    }
    // Anonymous function
    let myAdd = function(x, y) { return x + y; };
    // 函数体内可以引用函数外围的变量
    let z = 100;
    function addToZ(x, y) {
        return x + y + z;
    }
    // 函数类型
    // 给函数加上类型
    function add(x: number, y: number): number {
        return x + y;
    }
    let myAdd = function(x: number, y: number): number { return x + y; }
    // 给出完整的函数类型
    let myAdd: (x: number, y: number) => number =
        function(x: number, y: number): number { return x + y; };
    // 函数类型的参数名不重要
    let myAdd: (baseValue: number, increment: number) => number =
        function(x: number, y: number): number { return x + y; };
    // 可以让编译器自动推导函数的类型
    // myAdd has the full function type
    let myAdd = function(x: number, y: number): number { return  x + y; };
    // The parameters 'x' and 'y' have the type number
    let myAdd: (baseValue: number, increment: number) => number =
        function(x, y) { return x + y; };
    // 可选参数和缺省参数
    // 不使用可选参数和缺省参数
    function buildName(firstName: string, lastName: string) {
        return firstName + " " + lastName;
    }
    let result1 = buildName("Bob");                  // error, too few parameters
    let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
    let result3 = buildName("Bob", "Adams");         // ah, just right
    // 使用可选参数
    function buildName(firstName: string, lastName?: string) {
        if (lastName)
            return firstName + " " + lastName;
        else
            return firstName;
    }
    let result1 = buildName("Bob");                  // works correctly now
    let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
    let result3 = buildName("Bob", "Adams");         // ah, just right
    // 使用缺省参数 
    function buildName(firstName: string, lastName = "Smith") {
        return firstName + " " + lastName;
    }
    let result1 = buildName("Bob");                  // works correctly now, returns "Bob Smith"
    let result2 = buildName("Bob", undefined);       // still works, also returns "Bob Smith"
    let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
    let result4 = buildName("Bob", "Adams");         // ah, just right
    // 可选参数和缺省参数具有共同点
    function buildName(firstName: string, lastName?: string) {
        // ...
    }
    function buildName(firstName: string, lastName = "Smith") {
        // ...
    }
    // 两者类型相同都是
    (firstName: string, lastName?: string) => string
    // 可选参数和缺省参数可以不在最后
    function buildName(firstName = "Will", lastName: string) {
        return firstName + " " + lastName;
    }
    let result1 = buildName("Bob");                  // error, too few parameters
    let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
    let result3 = buildName("Bob", "Adams");         // okay and returns "Bob Adams"
    let result4 = buildName(undefined, "Adams");     // okay and returns "Will Adams"
    // 剩余参数
    function buildName(firstName: string, ...restOfName: string[]) {
        return firstName + " " + restOfName.join(" ");
    }
    // employeeName will be "Joseph Samuel Lucas MacKinzie"
    let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
    // 剩余参数的类型
    function buildName(firstName: string, ...restOfName: string[]) {
        return firstName + " " + restOfName.join(" ");
    }
    let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
    // 理解this
    // 错误示例
    let deck = {
        suits: ["hearts", "spades", "clubs", "diamonds"],
        cards: Array(52),
        createCardPicker: function() {
            return function() {
                let pickedCard = Math.floor(Math.random() * 52);
                let pickedSuit = Math.floor(pickedCard / 13);
                return {suit: this.suits[pickedSuit], card: pickedCard % 13};
            }
        }
    }
    let cardPicker = deck.createCardPicker();
    let pickedCard = cardPicker();
    alert("card: " + pickedCard.card + " of " + pickedCard.suit);
    // 正确示例
    let deck = {
        suits: ["hearts", "spades", "clubs", "diamonds"],
        cards: Array(52),
        createCardPicker: function() {
            // NOTE: the line below is now an arrow function, allowing us to capture 'this' right here
            return () => {
                let pickedCard = Math.floor(Math.random() * 52);
                let pickedSuit = Math.floor(pickedCard / 13);
    
                return {suit: this.suits[pickedSuit], card: pickedCard % 13};
            }
        }
    }
    let cardPicker = deck.createCardPicker();
    let pickedCard = cardPicker();
    alert("card: " + pickedCard.card + " of " + pickedCard.suit);
    // 避免在函数中使用this的方法 
    function f(this: void) {
        // make sure `this` is unusable in this standalone function
    }
    // 显示指定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),
        // NOTE: The function now explicitly specifies that its callee must be of type Deck
        createCardPicker: function(this: Deck) {
            return () => {
                let pickedCard = Math.floor(Math.random() * 52);
                let pickedSuit = Math.floor(pickedCard / 13);
    
                return {suit: this.suits[pickedSuit], card: pickedCard % 13};
            }
        }
    }
    let cardPicker = deck.createCardPicker();
    let pickedCard = cardPicker();
    alert("card: " + pickedCard.card + " of " + pickedCard.suit);
    // 回调函数中的this
    // 不希望在回调函数中使用this
    interface UIElement {
        addClickListener(onclick: (this: void, e: Event) => void): void;
    }
    // 在回调函数中显示指定this的类型
    // 错误示例
    class Handler {
        info: string;
        onClickBad(this: Handler, e: Event) {
            // oops, used `this` here. using this callback would crash at runtime
            this.info = e.message;
        }
    }
    let h = new Handler();
    uiElement.addClickListener(h.onClickBad); // error!
    // 正确示例
    class Handler {
        info: string;
        onClickGood(this: void, e: Event) {
            // can't use `this` here because it's of type void!
            console.log('clicked!');
        }
    }
    let h = new Handler();
    uiElement.addClickListener(h.onClickGood);
    // 正确示例 2
    class Handler {
        info: string;
        onClickGood = (e: Event) => { this.info = e.message }
    }
    // 重载
    // 不使用重载
    let suits = ["hearts", "spades", "clubs", "diamonds"];
    function pickCard(x): any {
        // Check to see if we're working with an object/array
        // if so, they gave us the deck and we'll pick the card
        if (typeof x == "object") {
            let pickedCard = Math.floor(Math.random() * x.length);
            return pickedCard;
        }
        // Otherwise just let them pick the card
        else if (typeof x == "number") {
            let pickedSuit = Math.floor(x / 13);
            return { suit: suits[pickedSuit], card: x % 13 };
        }
    }
    let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
    let pickedCard1 = myDeck[pickCard(myDeck)];
    alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
    let pickedCard2 = pickCard(15);
    alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
    // 使用重载
    let suits = ["hearts", "spades", "clubs", "diamonds"];
    function pickCard(x: {suit: string; card: number; }[]): number;
    function pickCard(x: number): {suit: string; card: number; };
    function pickCard(x): any {
        // Check to see if we're working with an object/array
        // if so, they gave us the deck and we'll pick the card
        if (typeof x == "object") {
            let pickedCard = Math.floor(Math.random() * x.length);
            return pickedCard;
        }
        // Otherwise just let them pick the card
        else if (typeof x == "number") {
            let pickedSuit = Math.floor(x / 13);
            return { suit: suits[pickedSuit], card: x % 13 };
        }
    }
    let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
    let pickedCard1 = myDeck[pickCard(myDeck)];
    alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
    let pickedCard2 = pickCard(15);
    alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
    

    泛型

    // 不使用泛型
    function identity(arg: number): number {
        return arg;
    }
    // 不使用泛型
    function identity(arg: any): any {
        return arg;
    }
    // 泛型
    function identity<T>(arg: T): T {
        return arg;
    }
    let output = identity<string>("myString");  // type of output will be 'string'
    let output = identity("myString");  // type of output will be 'string'
    // 泛型变量
    // 错误示例
    function loggingIdentity<T>(arg: T): T {
        console.log(arg.length);  // Error: T doesn't have .length
        return arg;
    }
    // 正确示例
    function loggingIdentity<T>(arg: T[]): T[] {
        console.log(arg.length);  // Array has a .length, so no more error
        return arg;
    }
    function loggingIdentity<T>(arg: Array<T>): Array<T> {
        console.log(arg.length);  // Array has a .length, so no more error
        return arg;
    }
    // 泛型类型
    function identity<T>(arg: T): T {
        return arg;
    }
    let myIdentity: <T>(arg: T) => T = identity;
    let myIdentity: <U>(arg: U) => U = identity;
    let myIdentity: {<T>(arg: T): T} = identity;
    // 泛型接口
    interface GenericIdentityFn {
        <T>(arg: T): T;
    }
    let myIdentity: GenericIdentityFn = identity;
    // 泛型接口2
    interface GenericIdentityFn<T> {
        (arg: T): T;
    }
    let myIdentity: GenericIdentityFn<number> = identity;
    // 泛型类
    class GenericNumber<T> {
        zeroValue: T;
        add: (x: T, y: T) => T;
    }
    let myGenericNumber = new GenericNumber<number>();
    myGenericNumber.zeroValue = 0;
    myGenericNumber.add = function(x, y) { return x + y; };
    let stringNumeric = new GenericNumber<string>();
    stringNumeric.zeroValue = "";
    stringNumeric.add = function(x, y) { return x + y; };
    console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));
    // 泛型约束
    interface Lengthwise {
        length: number;
    }
    function loggingIdentity<T extends Lengthwise>(arg: T): T {
        console.log(arg.length);  // Now we know it has a .length property, so no more error
        return arg;
    }
    loggingIdentity(3);  // Error, number doesn't have a .length property
    loggingIdentity({length: 10, value: 3});
    // 在泛型约束中使用类型参数
    function getProperty<T, K extends keyof T>(obj: T, key: K) {
        return obj[key];
    }
    let x = { a: 1, b: 2, c: 3, d: 4 };
    getProperty(x, "a"); // okay
    getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.
    // 在泛型中使用类
    function create<T>(c: {new(): T; }): T {
        return new c();
    }
    // 在泛型中使用类2
    class BeeKeeper {
        hasMask: boolean;
    }
    class ZooKeeper {
        nametag: string;
    }
    class Animal {
        numLegs: number;
    }
    class Bee extends Animal {
        keeper: BeeKeeper;
    }
    class Lion extends Animal {
        keeper: ZooKeeper;
    }
    function createInstance<A extends Animal>(c: new () => A): A {
        return new c();
    }
    createInstance(Lion).keeper.nametag;  // typechecks!
    createInstance(Bee).keeper.hasMask;   // typechecks!
    
  • 相关阅读:
    CSS3 Animation
    css形状大全
    HTML5 表单属性
    HTML5 Input 类型
    HTML 5 服务器发送事件
    jq制作博客已存在多少天
    Java网络编程与NIO详解4:浅析NIO包中的Buffer、Channel 和 Selector
    Java网络编程和NIO详解3:IO模型与Java网络编程模型
    Java网络编程与NIO详解2:JAVA NIO 一步步构建IO多路复用的请求模型
    Java网络编程和NIO详解1:JAVA 中原生的 socket 通信机制
  • 原文地址:https://www.cnblogs.com/zwvista/p/11970930.html
Copyright © 2020-2023  润新知