TypeScript-继承和函数、函数声明和重载
原创
TypeScript-继承和函数、函数声明和重载
原创
杨不易呀
发布于 2023-09-28 19:09:03
发布于 2023-09-28 19:09:03
代码可运行
运行总次数：0
代码可运行
TypeScript-继承和函数、函数声明和重载
TS中的接口和 JS 中的类一样是可以继承的
interface LengthInterface {
length: number
}
interface WidthInterface {
width: number
}
interface HeightInterface {
height: number
}
interface RectInterface extends LengthInterface, WidthInterface, HeightInterface {
color: string
}
let rect: RectInterface = {
length: 10,
width: 20,
height: 30,
color: 'red'
}
console.log(rect);TS 中的函数大部分和
JS相同
JS 当中的写法
命名函数
function say(name) {
console.log(name);
}匿名函数
let say = function (name) {
console.log(name);
}箭头函数
let say = (name) => {
console.log(name);
}TS 当中的写法
命名函数
function say(name: string): void {
console.log(name);
}匿名函数
let say = function (name: string): void {
console.log(name);
}箭头函数
let say = (name: string): void => {
console.log(name);
}TS 函数完整格式
在 TS 中函数的完整格式应该是由函数的定义和实现两个部分组成的
定义一个函数
- 根据定义实现函数
let AddFun: (a: number, b: number) => number;
AddFun = function (x: number, y: number): number {
return x + y;
};
let res = AddFun(10, 20);
console.log(res);- 改造如上代码，一步到位写法
let AddFun: (a: number, b: number) => number = function (x: number, y: number): number {
return x + y;
};
let res = AddFun(20, 20);
console.log(res);- 根据函数的定义自动推导对应的数据类型
let AddFun: (a: number, b: number) => number = function (x, y) {
return x + y;
};
let res = AddFun(20, 20);
console.log(res);TS 函数声明
声明一个函数
- 再根据声明去实现这个函数
type AddFun = (a: number, b: number) => number;
let add: AddFun = function (x: number, y: number): number {
return x + y;
};
let res = add(30, 20);
console.log(res);- 根据函数的定义自动推导对应的数据类型
type AddFun = (a: number, b: number) => number;
let add: AddFun = function (x, y) {
return x + y;
};
let res = add(30, 20);
console.log(res);TS 函数重载
函数的重载就是同名的函数可以根据不同的参数实现不同的功能
function getArray(x: number): number[] {
let arr = [];
for (let i = 0; i <= x; i++) {
arr.push(i);
}
return arr;
}function getArray(str: string): string[] {
return str.split('');
}- 如上的代码如果出现在同一个 TS 文件内容会报错，需要使用 TS 函数重载来解决
定义函数的重载
function getArray(x: number): number[];
function getArray(str: string): string[];实现函数的重载
function getArray(x: number): number[];
function getArray(str: string): string[];
function getArray(value: any): any[] {
if (typeof value === 'string') {
return value.split('');
} else {
let arr = [];
for (let i = 0; i <= value; i++) {
arr.push(i);
}
return arr;
}
}
// let res = getArray(10);
let res = getArray('yby6.com');
console.log(res);
end02
输入图片说明
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
输入图片说明
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
