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);
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
