TypeScript(ts)笔记总结02

一、函数

// 函数：封装一些重复使用的代码，在需要的时候直接调用即可
(() => {
    // js写法（ts也可使用）
    // 函数声明，命名函数
    function add(x, y) {
        return x + y;
    }
    // 函数表达式，匿名函数
    const add1 = function (x, y) {
        return x + y;
    };
    // ts写法
    // 函数声明，命名函数
    // 函数的x和y都是string类型，小括号后面的：string代表该函数的返回值也是string类型
    function add2(x: string, y: string): string {
        return x + y;
    }
    // 函数表达式，匿名函数
    // 函数的x和y都是number类型，小括号后面的：number代表该函数的返回值也是number类型
    const add3 = function (x: number, y: number): number {
        return x + y;
    };
    console.log(add3(10, 2));

    const result1: string = add('11', '22');
    console.log(result1);

    // 函数的完整写法
    // add4 --> 变量名 ---》 函数add4
    // (x:number,y:number)=> number 当前这个函数的类型
    // function (x: number, y: number): number { return x + y; } 就相当于符合上面这个函数类型的值
    const add4: (x: number, y: number) => number = function (x: number, y: number): number {
        return x + y;
    };
    console.log(add4(1,22));
    
})();

二、可选参数与默认参数

// 可选参数：函数在声明的时候，内部参数使用 ？ 进行修饰，那么就表示该参数可传可不传
// 默认参数：函数在声明的时候，内部参数有默认值
(()=>{
    // 定义一个函数：传入姓名（姓氏+名字）
    // 需求：不传任何内容，就返回默认姓氏
    // 需求：只传姓氏，则返回姓氏
    // 需求：如果传姓氏和名字，则返回姓名
    const getFullName = function(firstName:string='大胖',lastName?:string):string  {
        // 判断名字是否传入
        if (lastName) {
            return firstName + '-' + lastName
        } else {
            return firstName
        }
    }

    // 函数调用
    console.log(getFullName());
    // 传姓氏
    console.log(getFullName('lemon'));
    // 传姓氏和名字
    console.log(getFullName('大胖','小姜'));
    
})()

三、函数重载

// 函数重载：函数名字相同，函数的参数及个数不同
(() => {
    // 定义一个add函数，既可以接收2个string类型参数，也可以接收2个number类型参数相加

    // 函数重载声明
    function add(x: string, y: string): string;
    function add(x: number, y: number): number;

    // 函数声明
    function add(x: number | string, y: number | string): number | string {
        if (typeof x === 'string' && typeof y === 'string') {
            return x + y; //字符串相加
        } else if (typeof x === 'number' && typeof y === 'number') {
            return x + y; //数字相加
        }
    }

    // 函数调用
    console.log(add('大胖', '小姜'));
    console.log(add(100, 200));
    // 如果想要提示传入的是非法数据，ts应该提示红色信息，可以通过函数重载声明
    // console.log(add('大胖', 200));
    // console.log(add(100, '小胖'));
})();

四、泛型

// 函数重载：函数名字相同，函数的参数及个数不同
(() => {
    // 定义一个add函数，既可以接收2个string类型参数，也可以接收2个number类型参数相加

    // 函数重载声明
    function add(x: string, y: string): string;
    function add(x: number, y: number): number;

    // 函数声明
    function add(x: number | string, y: number | string): number | string {
        if (typeof x === 'string' && typeof y === 'string') {
            return x + y; //字符串相加
        } else if (typeof x === 'number' && typeof y === 'number') {
            return x + y; //数字相加
        }
    }

    // 函数调用
    console.log(add('大胖', '小姜'));
    console.log(add(100, 200));
    // 如果想要提示传入的是非法数据，ts应该提示红色信息，可以通过函数重载声明
    // console.log(add('大胖', 200));
    // console.log(add(100, '小胖'));
})();

五、泛型接口

// 泛型接口：在定义接口时，为接口的属性或者方法定义泛型类型，在使用接口时，在指定具体的泛型类型
(() => {
    // 需求：定义一个类，用来存储用户信息
    // 通过一个类的实例对象调用add方法可以添加多个用户信息对象，调用getUserId方法可以根据id获取某个指定的用户信息对象

    // 定义一个泛型接口
    interface IBaseCRUD<T> {
        data: Array<T>;
        add: (t: T) => T;
        getUserId: (id: number) => T;
    }

    // 定义一个用户信息类
    class User {
        id?: number; //用户id   ？可有可无
        name: string; //用户姓名
        age: number; //用户年龄
        // 构造函数
        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }
    }
    // 定义一个类，可以针对用户信息对象进行增加及查询的操作
    //URUD: create、read，update，delete
    class UserCRUD implements IBaseCRUD<User> {
        // 用来保存多个User类型的用户信息对象
        data: Array<User> = [];
        // 方法用来存储用户信息对象
        add(user: User): User {
            // 产生id
            user.id = Date.now() + Math.random();
            // 把用户信息对象添加到data数组中
            this.data.push(user);
            return user;
        }
        // 方法根据id查询指定的用户信息对象
        getUserId(id: number): User {
            return this.data.find(user => user.id === id);
        }
    }
    //  实例化添加用户信息对象的类UserCRUD
    const userCRUD: UserCRUD = new UserCRUD();
    // 调用添加数据的方法
    userCRUD.add(new User('lemon1', 18));
    const { id } = userCRUD.add(new User('lemon2', 19));
    userCRUD.add(new User('lemon3', 20));
    userCRUD.add(new User('lemon4', 21));
    console.log(userCRUD.data);
    // 根据id查询用户信息对象数据
    const user = userCRUD.getUserId(id);
    console.log(user);
})();

六、泛型类

// 泛型类
(() => {
    // 定义一个类，类中的属性值和类型是不确定的，方法中的参数及返回值的类型也是不确定的
    // 定义一个泛型类
    class GenericNumber<T> {
        //默认的属性值的类型是泛型类型
        defaultValue: T;
        add: (x: T, y: T) => T;
    }
    // 在实例化类的对象时候，在确定泛型的类型
    const g1: GenericNumber<number> = new GenericNumber<number>();
    // 设置属性值
    g1.defaultValue = 100;
    // 相加的方法
    g1.add = function (x, y) {
        return x + y;
    };
    console.log(g1.add(g1.defaultValue, 20));
    // 在实例化类的对象时候，在确定泛型的类型
    const g2: GenericNumber<string> = new GenericNumber<string>();
    // 设置属性值
    g2.defaultValue = '大胖';
    // 相加的方法
    g2.add = function (x, y) {
        return x + y;
    };
    console.log(g2.add(g2.defaultValue, '小姜'));
})();

七、泛型约束

// 如果我们直接对一个泛型参数取length属性，会报错，因为这个泛型根本不知道它有这个属性
(() => {
    // 定义一个接口，用来约束将来某个类型中必须有length这个属性
    interface ILength {
        // 接口中有个length属性
        length: number;
    }
    function getLength<T extends ILength>(x: T): number {
        return x.length;
    }
    console.log(getLength<string>('hi lemon~~'));
    // console.log(getLength<number>(1243));
})();

注：出自B站尚硅谷Vue.JS教程快速入门到项目实战视频的笔记总结，感谢~~~