一、函数
// 函数:封装一些重复使用的代码,在需要的时候直接调用即可
(() => {
// 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教程快速入门到项目实战视频的笔记总结,感谢~~~