TypeScript-继承和函数、函数声明和重载

TypeScript-继承和函数、函数声明和重载

TS 中的接口和 JS 中的类一样是可以继承的

代码语言：typescript复制

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 当中的写法

命名函数

代码语言：javascript复制

function say(name) {
    console.log(name);
}

匿名函数

代码语言：javascript复制

let say = function (name) {
    console.log(name);
}

箭头函数

代码语言：javascript复制

let say = (name) => {
    console.log(name);
}

TS 当中的写法

命名函数

代码语言：typescript复制

function say(name: string): void {
    console.log(name);
}

匿名函数

代码语言：typescript复制

let say = function (name: string): void {
    console.log(name);
}

箭头函数

代码语言：typescript复制

let say = (name: string): void => {
    console.log(name);
}

TS 函数完整格式

在 TS 中函数的完整格式应该是由函数的定义和实现两个部分组成的

定义一个函数

• 根据定义实现函数

代码语言：typescript复制

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);

• 改造如上代码，一步到位写法

代码语言：typescript复制

let AddFun: (a: number, b: number) => number = function (x: number, y: number): number {
    return x   y;
};
let res = AddFun(20, 20);
console.log(res);

• 根据函数的定义自动推导对应的数据类型

代码语言：typescript复制

let AddFun: (a: number, b: number) => number = function (x, y) {
    return x   y;
};
let res = AddFun(20, 20);
console.log(res);

TS 函数声明

声明一个函数

• 再根据声明去实现这个函数

代码语言：typescript复制

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);

• 根据函数的定义自动推导对应的数据类型

代码语言：typescript复制

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 函数重载

函数的重载就是同名的函数可以根据不同的参数实现不同的功能

代码语言：typescript复制

function getArray(x: number): number[] {
    let arr = [];
    for (let i = 0; i <= x; i  ) {
        arr.push(i);
    }
    return arr;
}

代码语言：typescript复制

function getArray(str: string): string[] {
    return str.split('');
}

• 如上的代码如果出现在同一个 TS 文件内容会报错，需要使用 TS 函数重载来解决

定义函数的重载

代码语言：typescript复制

function getArray(x: number): number[];
function getArray(str: string): string[];

实现函数的重载

代码语言：typescript复制

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

输入图片说明

最后

本期结束咱们下次再见